You can learn a lot from a Chinese teapot

The way we perceive beauty

Creating a new UI component in Figma for yourself, your team, or your Design System is a form of art. It’s not easy, and there’s a lot to consider when building a component.

Luckily, Figma prioritizes features for full-time or ad-hoc Design System designers (I understand the struggle of not having a full-time Design System team). But these features can sometimes look daunting… a weird-looking icon button in the design panel that I have no idea how to use? Yeah, I’m gonna ignore it.

Even if you do use the daunting and weird-looking icon buttons in Figma, it’s just not everyday knowledge on how to make components easier to design, simple to consume, and better performing.

So when it’s been justified that a new component should be built, it needs to be scalable for various use cases that exist now and in the future. But most importantly, it needs to be useable by Design System consumers.

Three by three grid with while lines with heading tags, UI components, and shades of grey in rectangles in the grid, with a purple-blue gradiant background
Building UI components for a Design System is no easy feat

A good indicator of how a component is being used by designers is how often instances are being broken. If a designer does break an instance, it’s more than likely the component wasn’t working for them or their design needs. Maybe they couldn’t prototype a nested element or maybe they needed to alter an auto-layout constraint that was disabled.

Though breaking instances is viewed as a sin to Design System designers, it also sends us a message. Seeing a pattern of broken instances from the same component shows there is a possible area of improvement. These breakages defeat the purpose of a Design System because they are no longer mapped to its master component; meaning it will not include critical properties such as interactive states, as well as not receive component updates.

A dropdown UI component in Figma that has a menu next to it with the option ‘Detach instance’ highlighted
By right-clicking on a component, there is an option to ‘Detach instance’

We want to avoid breakages and prevent sinning while using the Design System, and this can be supported by making your components work harder in Figma by using the following seven techniques:

  1. Create a ‘Nested Elements’ Figma file
  2. Expose nested properties in the master component
  3. Use local variables
  4. Use text property
  5. Use instance swap property
  6. Use boolean property
  7. Add embedded prototype interactions

1. Create a ‘Nested Elements’ Figma file

Creating a separate Figma file for master UI component’s nested elements, or children components, helps designers understand the build of the component, saves Figma file memory, and enhances organization.

How to steps:

  • 1a: Identify components that use nested components. (A good way to tell your component could use a nested element file is if your component build looks a little something like the below image).
Dropdown UI component in Figma showing many nested components to build the master component
Components can be broken into separate files if they include many nested components
  • 1b: Create a new Figma file in the same project or work-space as the master component file, and name the new file ‘Nested Elements’.
  • 1c: Migrate all nested elements to this new file and relink them to their corresponding master component. I prefer this manual process to not risk losing a component, but Figma does have a “Move published components” article in Figma Learn if you don’t want to do this manually.
  • 1d: Ensure the master components are properly linked to their nested elements in the new file by right-clicking on the nested component in the master component, and selecting ‘Go to main component’.
  • 1e: Publish the nested element file as a library so the master components can receive updates, but make a clear note of the file’s intent that it does not store the final components.
A project in Figma that has two files in it with one named ‘2.0 Nested Elements’ and the other named ‘2.0 Native Mobile’
The Design System mobile project in Figma has two files: Nested Elements & Native Mobile

Tip: My Design System organizes the master component library in alphabetical order by component name, and the nested element Figma file is structured the same. If the master component does not have any nested elements, it is omitted from the Nested Elements file.

I previously wrote an article on this Design System file strategy called “Organizing a web design system for scalability in Figma”, which I implemented in my team’s Design System. It has proven effective in allowing our Design System to scale without effecting file memory storage, as well as opened the doors to use other techniques such as using instance swap properties (explained in #5).

2. Expose nested properties in the master component

Exposing a nested component’s properties in its master component can help consumers modify the nested properties without having to drill into the component. Additionally, it can make components more intuitive to work with in understanding what can be modified and what can’t.

How to steps:

  • 2a: Identify a component that has nested or children components included.
  • 2b: Select the entire component set, then click the plus (‘+’) icon button next to ‘Properties’ in the design panel.
  • 2c: Select ‘Nested instances’ under the subtitle ‘Expose properties from’.
A keyboard component in Figma with the properties panel menu open and the ‘Nested instances’ option in the menu highlighted
Add ‘Nested instances’ to a component’s properties
  • 2d: In the ‘Expose properties from’ menu that appears, select the nested elements that need to be exposed in the properties panel.
The keyboard component in Figma with the ‘Expose properties from’ menu open and the options ‘Fine’, ‘Replace’, ‘ and ‘Keyboard layouts’ are selected from the checkboxes in the menu
Select the nested elements to expose in the component
  • 2e: Test the component to ensure it’s working properly.

The nested properties that appear in the design panel will depend on which variant is selected, so properties that are not at the top-level of the component will be altered.

Gif showing a keyboard component in Figma where the variant is changed and the nested properties adjust, then selecting different nested properties in the panel
Easily modify nested components from the design panel

3. Use local variables

The release of local variables has been a game-changer for my Design System. Work is more efficient when updating and building new components.

For example, instead of having to create a light and dark theme version of a component, I only have to build one component and assign the correct color variables to easily swap between themes. This has eliminated the need to support two separate Figma files including the light theme and dark theme components.

How to steps:

  • 3a: Create local variables to house your Design System’s colors, breakpoints, typography, etc. For more details on this step, view my article “Migrating from color styles to local variables in Figma”.
  • 3b: Create modes in the local variables menu to link variables together and place them in-context.
  • 3c: Select a component set or similar variants in a component.
  • 3d: For colors, next to the style or hex value, select the grid icon on the right to open published libraries.
A button component set is selected in Figma, with a hex value in the design panel highlighted and the local variables menu open to choose a color variable for the selected hex value
Add color variables to components
  • 3e: Select the appropriate color variables from the library. Note: variables are square-shaped, versus styles are circle-shaped.
  • 3f: For numeric variables, select the variables icon on the right of a input field (I.E., auto-layout property) to open local variables.
A button component selected in Figma with the local variables menu open and multiple variable listed; the ‘Padding’  item is highlighted
Add numeric variables to components
  • 3g: Select the appropriate numeric value from the library. The variable will appear in a grey square in the input field.
  • 3h: Test that the components swap between their intended modes.
Gif showing multiple UI components like a card, buttons, and progress indicator in Figma being swapped from Light theme to Dark theme by specifying the theme wanted in the Design panel
Easily swap between theming through local variables and modes in Figma

Though this technique is easily understood for colors and swapping between themes, it can also apply to support device responsiveness. Typography and number variables can be used to swap between desktop and mobile frames.

4. Use text property

Ever hear a co-worker clicking an insane amount of times in a row? (Click, click, click x 6)… well, maybe they were just trying to select a nested layer of text to modify it in Figma.

Adding a text property to a component’s copy, such as titles or body text, allows consumers to modify the copy on the design panel without having to drill into the component’s layers.

How to steps:

  • 4a: Identify a component that would benefit from a text property.
  • 4b: Select the entire component set, then click the plus (‘+’) icon button next to ‘Properties’ in the design panel.
A button component set in Figma with the Properties panel menu open with the Text property highlighted
Add a text property to UI components in Figma
  • 4c: Select ‘Text’ from the dropdown menu and name the property accordingly.
  • 4d: Select all corresponding text layers, then click the icon button with an arrow in a diamond shape in the ‘Typography’ section of the design panel. This will open a menu with any text properties associated to the component.
A button component set in Figma with the text property menu open with the specific text property highlighted to apply to selected text layers
Add the created text property to text layers in a component’s variants
  • 4e: Edit the value of the text property if needed; this is the default text that will show when consumers insert this component into their file.
A button component set in Figma with the Properties panel open and the Text Property edit button selected and the value of the text property highlighted
Modify the value of the text property to change the default

With the text property applied, you only need to click on the first layer of the component to modify text.

Gif showing a primary button with the component’s properties shown in the design panel; the property labelled ‘Button title’ is changed from ‘Button’ to ‘Submit Work Order’
Component instance’s text can easily be modified

5. Use instance swap property

Similar to text properties, instance swap properties allow consumers to easily switch between design elements in a component. This property supports the scalability of a component as additional use cases arise.

How to steps:

  • 5a: Identify a component that includes sections that may need to be changed depending on the use case. (I.E., a bottom sheet that has multiple header types).
  • 5b: In the ‘Nested Elements’ file, create a separate component for each element the master component needs to swap from, and name each appropriately. Note: creating one component with all the different swaps will not work with this property.
Four separate components in Figma grouped together with the label ‘Header’ for the Bottom Sheet component’s header instance swap
Create separate components for each instance swap

Tip: I name the swap components with forward-slash (‘/’) to group them and number them from #1 to #n. (I.E., ‘Header/ 1. Grabber’). This will support how they appear in the master component.

  • 5c: Insert the nested component into the master component.
  • 5d: Select the master component set, then click the plus (‘+’) icon button next to ‘Properties’ in the design panel.
A bototm sheet component set in Figma with the Properties panel menu open with the Instance swap property highlighted
Create an Instance swap property on the component
  • 5e: Select ‘Instance swap’, name the property, and pick the instance for the value by selecting the correct library and component.
A modal that appears on top of the bottom sheet component with specific for the instance swap properties
Specify the instance swap property’s components in the modal
  • 5f: Select all corresponding layers, then click the icon button with an arrow in a diamond shape in the ‘Property’ section of the design panel. This will open a menu with any swap properties associated to the component.
The bottom sheet component’s header layers selected with the ‘Add the instance swap property’ highlighted in the design panel
Add the instance swap property to the corresponding layers in the component

With the instance swap property, consumers can easily switch between nested components without having to drill into the master component. This can be applied to different content in a component, including iconography, buttons, etc.

Gif showing an instance of a bottom sheet in Figma; the ‘Swap header’ property is selected and the bottom sheet’s header swaps between a title left-aligned to right-aligned to a grabber-only
Switch between instances in the properties panel in Figma

6. Use boolean property

As easy as a light-switch, the boolean property removes the need to create two separate variants in a component set when one variant needs a design element and the other doesn’t.

A Popup UI component with modal and non-modal variants in Figma
Popup component with modal and non-modal variants

If I created a popup component that needs to support a modal and non-modal, I would need two separate variants for each popup. One would have the modal background, and the other would not have the background. Instead of having these near duplicate variants, I can add a boolean property and attach it to the modal’s background to turn it on and off.

How to steps:

  • 6a: Identify a component that includes variants where a design element is ‘on’ in some variants and ‘off’ in others.
  • 6b: Select the entire component set, then click the plus (‘+’) icon button next to ‘Properties’ in the design panel.
  • 6c: Select ‘Boolean’ from the menu.
A popup UI component set in Figma with the Properties panel menu open with the Boolean property highlighted
Add a Boolean property to components to turn elements on or off
  • 6d: In the modal that appears, name the property accordingly and decide if the layer should be ‘True’ or ‘False’.
  • 6e: Select all corresponding layers in the component set, then click the icon button with an arrow in a diamond shape in the ‘Layer’ section of the design panel. This will open a menu with any boolean properties associated to the component.
A popup UI component set in Figma with the Layers menu open in the Design panel with the Boolean property highlighted to be applied to the component
Apply the boolean property to the correct layers in the component

If the component doesn’t need the element turned on by default, the value of the boolean property can be set to ‘False’ so the consumer would have to turn the element on in the design panel.

Gif showing the boolean property in the Popup being turned on and off which turns the modal backdrop in the Popup on and off
Easily turn the Popup’s boolean property on and off

7. Add embedded prototype interactions

This one may seem like a given, but it’s a commonly forgotten attribute to give a Figma component. Trust me, I’ve forgotten to add prototypes between states as a Design System designer. This is especially important for nested components because consumers cannot add a prototype to the individual nested components without breaking the master component.

A button component is selected within a bottom sheet component, and a prototype interaction being added to the button shows the controls for the bottom sheet variants and not the button variants
Prototypes can only control variants at the top-level of the component

Let’s say I have a button nested in a bottom sheet component, and I want the button to have a pressed state for my prototype. If the button component does not include a ‘Change to’ interaction while it is being pressed, I won’t be able to add this in the bottom sheet. I will only be able to control the variants in the bottom sheet component; not nested components like the button.

How to steps:

  • 7a: Identify a component or nested component that needs an embedded prototype.
  • 7b: Switch from ‘Design’ to ‘Prototype’ in the design panel.
  • 7c: Select the starting variant in the component set, and click/ drag the noodle to the ending variant or select the plus icon (‘+’) next to ‘Interactions’ in the panel.
A button variant is selected and an interaction is being added to the button; the interaction specification menu is open
Add prototype interactions to nested components
  • 7d: Modify the specifications of the interaction (I.E., ‘While pressing’, ‘Change to’, ’State: Pressed’).
  • 7e: Publish the changes or relink the nested component to the master component.
  • 7f: Test out the prototype.
A button component is selected within a bottom sheet component, and there is an embedded prototype interaction in the button component shown in the design panel in Figma
Test the master component to ensure nested components include interactions

That’s all for now! Incorporating these techniques into your personal, team, or organization’s Design System will make UI components easier to build, manage, and consume. Most importantly, it will help prevent Design System sinning from consumers breaking component instances.

Figma has awesome features to support creating recyclable components, so let’s make the most of using them.

Make your Figma components work harder was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.






Leave a Reply

Your email address will not be published. Required fields are marked *