Introduction

In our journey of creating a time-saving and editable tool for creatives, we’ve benefitted greatly from Figma’s auto-layout and components features and the limitless possibilities they provide when used together. At its core, a component in Figma is a design element that can be reused time and time again, its origin serving as a single source of truth for a consistent and cohesive design. By taking this a step further through nested components, you can create a myriad of possibilities of fine-tuning variants. A structured and organized approach is necessary to enable this kind of editing. The following chapters will take you through everything you need to know to create your own master components. This article also provides a working playground in Figma for you to follow along and better understand the process. We will first lay the theoretical groundwork based on our experience with building Kiwi Design System, and to test that theory, we will make our own updates to a Button Master Component.

This article is accompanied by a supporting freebie! Tag along and witness first hand what Master Components can do by clicking here.

Design systems and components essentially fulfill the same purpose: serve as a single source of truth in design. What they obviously differ in is complexity. Therefore, it is only natural to employ components in the construction of a design system. The extent to which we can do this is also magnified by Figma’s auto layout and variant features. Combine all of these along with a few fundamental rules, and you have yourself a versatile and editable design system.

As we said in the beginning, components are elements that enable you to maintain a consistent design. While working on Kiwi, we have devised several types that distinguished themselves through advancing complexity: base elements, basic components, and complex components.

What are base elements?

Base elements are components that stand on their own and are usually made up of text and icons. Base elements are essentially the founding pillars of any component in the design system. They represent the first auto-layout grouping. You will find them at the top of the Master Sheet.

Examples: text elements, icons

What are basic components?

A basic component is a component that is made up of base elements. Is structure will exhibit:

1. Level 1: An auto-layout frame with base elements (icons, text; this is the base elements tier)
2. Level 2: Sizing differentiation, modifying auto-layout properties to create different sizes (small, medium, large; this tier is not always necessary)
3. Level 3: Different combinations of components, depending on what we included on Level 1 (icon left, icon right, only text, only icon; this tier is not always necessary)

Examples: buttons, chips, inputs, dropdowns, etc.

What are complex components?

A complex component is a component that is made up of base elements alongside other basic components. Consequently, its structure will exhibit:

• Level 1: An array of base elements and basic components (personalized or otherwise)
• Level 2: A component constructed from Level 1 elements put into an auto-layout frame.

Examples: notification, navigation menus, sliders

Master Components and Master Sheets

Any type of component can become a Master Component. To have this distinction, a component simply benefits from having one or more layers of nested components. The Master Sheet is simply home to all the levels of Master Components of a design element.

Ut aut animi velit occaecati molestiae excepturi dignissimos. Similique exercitationem ut. Eius suscipit et accusantium.

Component hierarchies

This hierarchical constitution of a master component aims to enable bulk editing of variants. Variants are the final product in the chain of component creation. Changes in the chain of component creation travel downward, so any edits above variants will ultimately affect them as well.

Style Sheet vs. Master Sheet

While the Master Sheet houses Master Components of a single design element, the Style Sheet is home to the entire design system’s colors, effects, and typography. Any component must have the published styles and effects applied to them for mass editing to work. Unlinked and undocumented colors and effects impede keeping the system organized. Should you want to edit or add a new style, we suggest doing so from the Style Sheet to keep track of all changes.

Edit transferring

We classify edits by the type of element that they are affecting:

• System-level edits: these are the type of edits that travel across the entirety of the design system and are usually made from the Style Sheet (typography styles, color styles, and effects styles)
• Master Sheet level edits: these are edits that travel across a particular component all the way down to its variants and usually stem from auto-layout properties
• Variant level edits: through mass selecting and editing in bulk, you can update the styles attributed to each variant (fill color, stroke color, stroke size, effects applied)

Best practices

Now that we’ve established a working structure to our editable design system, there are several things to keep in mind if we wish for our overrides to push through and not create buggy results. These are the best practices we’ve discovered to be necessary when dealing with master components.

Master sheet colors

To ensure override preservation, it is best not to confuse colors applied to final variants and the colors used in the Master Sheet. Figma tends to get buggy when it does not detect any change in color from the initial master component. We suggest creating separate color styles for the Master Sheet.

Using icons‍

Using icons and hoping for override preservation is a tricky business. We have found several rules to abide by when incorporating icons into your design system:

1. Make sure your icons are flattened with the help of the Union boolean operation into a single vector.
2. Make sure this vector layer is named the same all across your icon library.
3. When creating components, it is best to use a “base-icon” component formed from a Union of your icon.

So, your icon layer structure should look like: icon-name > vector (user > vector)

And your base-icon layer structure should look like: base-icon > union > icon-name > vector

Layer naming

Another tip to help with the transference of edits is to make sure your layers, in variants particularly, have the same naming convention. It’s a principle we’ve applied when working with icons as well.

Master Components Playground

The provided test file is built like a Kiwi mini-design-system. You’ll have your assets (typography, icons, color and effect styles, and buttons), and you’ll have the power to edit these assets. To do so, you will go back and forth between:

• the Master Sheet
• Figma’s menu
• and the final components/variants

Step 1. Change styles - Colors

We’ll now make a system-wide change and edit the button component’s colors. Change each light theme color to match the reference colors:

• Select each light theme color with CTRL/Command + Click
• Open the selected Color Styles dropdown
• Right-click and choose “Edit Style”
• Use the color picker tool to sample the reference colors

You can then preview your changes in the button component.

Step 2. Change styles - effects

Now that we’ve changed the colors, it’s time to adjust the effects. Try to change the Hover effect to give our buttons a new look:

• select the object with the applied effect
• select the effect from the right-hand menu
• click the edit icon and make your changes
• some suggestions for Drop Shadow include: X: 9, Y: 9, Blur: 0, Spread: 0

Preview your new Hover effect in the Button Component variants.

Step 3. Change typography

What if we want the button to feature a different text style across all variants? To do so, we’ll go to the “Master-Button” (base elements, first level on the Master Sheet) and select the text layer. We can see that it has “Subtitle 1” ascribed to it. Change that to “Button” from the text styles menu and then preview your changes in the final component.

Step 4. Change default icons

Say we want the button to feature a different icon. To do this:

• we’ll access the first level of the Master Component (Base Elements layer) like we did when we changed the typography
• you will see this layer path when we select the icon frame
• base-icon > Union > icon-container
• select the icon-container layer
• change the icon to the desired one in the component dropdown of the right-hand menu

You will then see your change cascade all the way down to variants.

Step 5. Change sizing

Changing component size is best done, as I’m sure you’ve guessed already, at the “Size differentiation” level. Here you can also make edits that apply only to specific component sizes. To change component sizing we’ll do the following:

• select the component size you want to change
• go to the auto-layout settings in the right-hand menu
• change the padding according to whatever you now deem fit

As with the icon change, you can now see that the variants have been updated with the new sizes.

Step 6. Change corner radius

Another way to personalize your component is to adjust the corner radius. For this to be visible, the edit must be applied at the last level of the master component, titled “Different combinations”:

• select all four combinations under a specific size
• apply your desired corner radius
• make your changes to the other sizes and combinations as well
• we suggest going for either fully rounded or no corner radius in order to make the change obvious

And that’s it! You’ve now learned how to create your own master components and seen what you can achieve with their help. Should you want an already working design system with master components built-in, you can head to our Gumroad page and view our design system products and freebies. You can also browse our website and see what other features Kiwi Design System has to offer.