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 libraryThe 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.
Switch to Assets panel in your Figma file and click on the team library icon
Navigate to the Web UI kit toggle and enable it
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.
#
Color and Text StylesYou 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.
You can find the text styles directly in the Text sections of your Figma file once you enable this kit as a library.
#
ComponentsYou 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 ComponentsSimple components can be dragged and dropped onto your file and used as is.
#
Grouped ComponentsGrouped 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
#
TemplatesYou 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- Drag and drop a page layout component from the
02 Templates
section in the Assets panel.
- Detach instance so that manipulation of sub-components is possible.