Figma UI Kit

The UI-Kit contains all the resources you need for Figma to design great web applications. In this kit you'll find Figma versions of all Calcite Components, Calcite UI Icons, Calcite Colors, and Calcite Typography. As you construct your designs in Figma, developers will easily be able to implement them in code.

When there are new updates to the library, they are exported and versioned on Github.com. In order to use the Calcite Figma UI-Kit you will need to download the library.

Download Figma UI Kit

Importing Figma files

Once you have downloaded the files above make sure to unzip and follow the steps below to import the libraries in Figma.

Regardless of platform, the process for linking the Figma files is the same.

⚠️ For desktop app users, make sure you are using the latest version of Figma ⚠️

  1. Click the Import button in the top right of the Figma toolbar. image

  2. Select the Calcite .fig files and click Open. image

  3. Now in each Calcite document, click the dropdown in the top-center toolbar. Publish each document. image

  4. To access the components in your documents, click on the Figma menu in the top left of the toolbar and then click Libraries. image

  5. In the Libraries menu, turn on the Calcite files in your document and you are all set! 🎉 image

Using the kit

  1. Click on the Assets tab in your left-hand panel to access the Calcite Components and UI Icons. image

  2. For colors click on the Style button in your right-hand Fill or Stroke panel to access Calcite Colors. image

  3. For type click on the Style button in your right-hand Text panel to access Calcite Typography. image

Component variants

Components are built with Figma variants. When using a component, locate the right-hand panel for properties and slots that reflect directly what is in code. image

Complex components have nested components inside. To access the variants, simply double click them and the right-hand variant panel will show the nested properties. image

What is in the library?

In the project are the following libraries:

  • Calcite Colors
  • Calcite Typography
  • Calcite UI Icons
  • Calcite Components

Calcite Colors

This library contains the UI Colors that are leveraged in the design system. For the complete Esri Color reference, see Calcite colors repository.

Color categories:

  • Brand
  • Status
  • Borders
  • Type
  • Background/foreground
  • Grays

Calcite Typography

This library contains the Avenir Next typeface. Choices are defined in the core definition of Esri Web. Type styles are organizes on pages that reflect the weights used in the framework CSS. The options are defined as Text Styles in Figma. Additionally, for on-premise use (Esri internal users and Esri distributors), can use the local font files from the Calcite fonts repository.

Type styles:

  • Avenir / Light
  • Avenir / Regular
  • Avenir / Medium
  • Avenir / Bold

Calcite UI Icons

This library contains the complete set of SVG icons available in the Calcite UI Icons. The icons are converted to symbols and can be placed into your design file. The symbols have a color mask applied that allows the color to be overridden with any color.

Icon pages:

  • 16px
  • 24px
  • 32px

Calcite Components

The library contains components such as buttons, links, inputs, switches, sliders, cards, modals, etc. Components from the Figma library will always have parity to the web frameworks.

  • Small, medium, and large sizes for each component
  • Light and dark modes for each component
  • Thousands of unique variations

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.