Figma FAQ for designers

Follow these steps in Figma:

1. Go to the "Assets" panel in the left sidebar.
2. Click on the "Team library" icon that looks like an open book.
3. Click the toggle next to "fancy ui kit" in the modal.

• Color styles that match all of our design token colors
• Effect styles that match most of our design token shadows.
• Text styles that match our Heading, Paragraph, and Inline Text components.
• Components that match most of our Lib and lab components.

Figma will notify you and you'll be able to review and accept the changes. If your file doesn’t contain something from the UI kit that’s been updated, the update will happen silently and automatically.

They are available as color styles. This is how to use them:

1. Select the object(s) you want to change the color of.
2. In the "Properties" panel in the right sidebar, under "Fill" or "Stroke", click the icon with the four dots.
3. Search and select the color you want to be applied to the selected object(s).

They are available as effect styles. This is how to use them:

1. Select the object(s) you want to add a shadow to.
2. In the "Properties" panel in the right sidebar, under "Effects", click the icon with the four dots.
3. Search and select the shadow you want to be applied to the selected object(s).

When it comes to Headings, Paragraphs, or Inline Text, you can either use text styles or text components. The table below shows how the two options differ in use.

Add the "List" component from the UI kit. It features instructions for how to recreate the List component in Figma. It was unfortunately not possible to recreate the List component as a dedicated text style or component in Figma.

Add the "Text Container" component from the UI kit to your file. It’s unfortunately not a component that automatically adds appropriate vertical spacing. Instead, it’s an overview of appropriate spacing values between text component pairs.

You can either use the Assets panel in the left sidebar or the quick insert shortcut Shift + I. Both options enable you to search or browse for a component.

No, but most are. There are various reasons for why some components are missing:

1. We haven't added them yet. These components are marked in the UI kit with the label "(missing)".
2. They can't be recreated in Figma. An example is the Text Container component, which automatically adds correct vertical spacing between headings, paragraphs, and lists. Instead, these components are available in the UI kit as instructions for how to create them manually in Figma. They are marked with the label "(instructions)".
3. They are non-visual technical components that don’t make sense within the context of a UI design tool. The Screen Reader Only (SrOnly) component is an example of such a component. These are entirely absent from the UI kit.

No, but most are. There are two exceptions:

1. Components grouped under "_platform". These are non-Fancy UI elements from the Siteimprove Platform, such as the left hand navigation menu.
2. Components grouped under "_templates". These are common combinations of Fancy and "_platform" components. They are meant to be used as starting points for mockups, so you don't have to assemble and design everything from scratch.

A popover will tell you when you hover over the component in the "Assets" panel. Alternatively, if you've already added the component, select it and go to the "Inspect" panel in the right sidebar.

1. Select the component.
2. Go to the "Inspect" panel in the right sidebar.
3. Click on the "View documentation" button".

The quickest way is to activate the text tool (press T) and click on the label. Another method is to hold down the Command (⌘) key and double click on the label.

Select the component and use the dropdown menus and toggles beneath the component's name in the right sidebar.

Note that some components contain nested components. To adjust a nested component’s property values, you first need to select it. You can do this by clicking on its layer, marked by a diamond icon. You can also select a nested component by double clicking on its parent component (multiple times).

No, the Figma components often feature a subset of their code counterpart's properties. Some properties simply don't make sense within the context of a UI design tool or couldn't be recreated. Examples are the data-obsere-key, children, and className properties. Shared properties have been given the same names, though. This should facilicate communication with developers.

You can't, unfortunately. This is particularly frustrating when it comes to components that are meant to function as containers, such as the Card component. As a result, when you've perfectly aligned some text within a Card and then move that Card, the text will stay put.

Fortunately, there's a workaround:

1. Select the container component and press Option (⌥) + Command (⌘) + G. This wraps the component in a frame.
2. Place whatever layers you want inside the frame alongside the container component.
3. Now, when you move the frame, both the component and the layers move together.

A downside to this workaround is that the container component and frame can't be resized simultaneously. The workaround for this issue is to resize the component first, then select the frame and press the “Resize to fit” button (or use the Option (⌥) + Shift + Command (⌘) + R shortcut).

The “Standalone” version is just the form component. The “Form element wrapper” version adds many of the options of the component with the same name. That means it provides the form component with a label and optional tooltip, helptext, and error message.

The interactive behavior of checkboxes and radio buttons is built into these components. That means you don’t need to create and link frames for every possible selection state. You only need to specify the number of radio buttons or checkboxes you want and change the labels of the options.

Both components contain three text layers:

• placeholder
• value 1
• value 2

Only one textlayer is visible at a time. Which one that is, is controlled through the “value” property. When you click on one of the components in a prototype, the “value” property changes like this:

• placeholder becomes value 1
• value 1 becomes value 2
• value 2 stays value 2

So, when you set up your prototype, perform the following steps:

1. Toggle the visibility of the text layers one by one and edit the labels to what you want them to be.
2. Change the visibility of the text layers back to how they were before you started editing them.
3. Set the “value” property to the text layer you want to be visible from the start of the prototype.

It's possible to create a prototype with a dropdown button that opens a popover, which closes when either the button or something in the popover is clicked. What's not possible, is to make the button label change to whatever item has been clicked in the popover. That is, not unless you're willing to create a large number of frames and prototype connections.

The workflow is similar for the different dropdown components (Action, Base, Regular, Searchable, and Multiselect):

1. Add two instances of the dropdown's button and a single popover.
2. Place the first button in a frame and customize its label. Place the popover and the second button outside the frame.
3. Edit the second button's label so it matches the first button's label. Also, toggle on the second button's "open" property.
4. Customize the items in the popover.
5. Place the popover 4 pixels away from the second button.
6. Select the popover and second button and place them in a frame together. You can use the Option (⌥) + Command (⌘) + G shortcut for this.
7. Create a prototype connection between the first button and the frame containing the second button and the popover.
8. Use an “On click” trigger to open the frame as an overlay, set the overlay’s position to “Manual”, and check the “Close when clicking outside".

Add the "Form" component from the UI kit to your file. Unfortunately, it’s not a component that automatically lays out a form correctly. Instead, it features step-by-step instructions for how to assemble, layout, and place a form.