Using the UI Kit

Make sure you are a member of the iQmetrix Figma team. Ask your design lead for an invitation to the Figma team account.

The Web UI kit uses Open Sans. Make sure you have the right version of Open Sans installed on your desktop to use the UI kit.

Working with UI kit as a Figma team library#

The Design Systems team encourages the use of Figma libraries for the easiest access to UI kit components and updates.

Team libraries can only be consumed by Figma files created within an iQmetrix team project.

Figma libraries make working across multiple files easy. To have access to all of the Web UI kit components, you’ll need to enable the file as a Figma Team library.

  1. Switch to Assets panel in your Figma file and click on the team library icon

    using-the-ui-kit-1

  2. Navigate to the Web UI kit toggle and enable it

    using-the-ui-kit-2

  3. Now you will be able to access all of the components in the Components page of this kit directly from the Assets panel of your Figma file.

    using-the-ui-kit-3

Color and Text Styles#

You can find the color styles directly in the Fill and Stroke sections of your Figma file once you enable the Web UI kit as a library.

using-the-ui-kit-4

You can find the text styles directly in the Text sections of your Figma file once you enable this kit as a library.

using-the-ui-kit-5

Components#

You can access components from your Assets panel in your Figma file under the page 01 Components. To use components, drag and drop components from the Asset panel into the working space of your Figma file.

Simple Components#

Simple components can be dragged and dropped onto your file and used as is.

Grouped Components#

Grouped components must be detached first in order to be used. Group components have an asterisks in their naming to help distinguished them from simple components.

Simple component naming: 01 Card with Body & Title

Grouped component naming: 04* Card with Body, Title, Header & Footer Actions

Templates#

You can access Templates from your Assets panel in your Figma file under the page 02 Templates. Templates are page layout components that you detach once to use. Templates exist for common page layouts across the five Hub breakpoints.

Working with Templates#

  1. Drag and drop a page layout component from the 02 Templates section in the Assets panel.

using-the-ui-kit-6

  1. Detach instance so that manipulation of sub-components is possible.

using-the-ui-kit-7

Last updated on by Paulo Andrade