A design system plays a vital role in fostering collaboration in the development of digital products. It is a reusable and editable framework that comprises the comprehensive documentation needed to guide a team in developing products that meet the needs of users.

‍

This framework encompasses essential visual elements such as buttons, color, typography etc., which are indispensable for crafting user-centered digital products.

‍

Setbacks of styles

‍

Using Figma, elements can be meticulously crafted with style guides. However, it's important to note that relying solely on styles in design systems has limitations.

‍

For example, if text elements share the same hex code as button colors, changing the hex code affects both, highlighting their interdependence. Styles may also fall short in optimizing design elements like auto-layout, spacing and corner radius, restricting design control and efficiency.

‍

The introduction of variables effectively addresses these issues.

‍

Figma Variables: The way forward

‍

Variables represent reference-able, reusable values (colors, numbers, strings, and booleans) that can be applied across all design properties within a design system.

Colors can be assigned elements such as text, color & background

Numbers can be applied to elements like spacing in auto-layout & corner radius, among others.

Strings can applied for translations of texts

Boolean can be applied for true of false statements in prototyping

Unlike traditional style guides, variables offer the flexibility to easily edit individual resource values through referencing, providing a more efficient and adaptable approach to designing.

There are a two types of variables:

1. Primitive Variables
2. Semantic Variables (Tokens)

‍

Primitive Variables

‍

Primitive variables serve as fundamental building blocks. They are akin to style guides but possess the advantage of being usable as references.

Similar to how style guides can introduce inconsistencies when editing elements with similar hex codes, primitive variables can lead to the same issue if not used as references.

‍

Creating Primitive Variables

‍

‍

Using the frame displayed above, we will follow a step-by-step process to create primitive variables using color and to group these variables.

👉 Click here to view the practice file.

N.b If you choose to create your own frame, ensure you use auto layout. Variables won’t function if auto layout isn’t used

Steps to create primitive color variables

‍

1. Ensure that all frames are deselected.
2. Click on 'Local Variables' in the top-right corner
3. In the top-left corner, rename 'Collection 1' to ‘Primitive Variables.'
4. Click on '+ Create Variable and 'Select 'Colors.'
5. Two tables will appear. Under 'Name,' input 'Bk-25' to represent 'black 25%.'
6. Repeat this for the rest of the variable increasing the percentage by 15%
7. Left-click under 'Value' and select the dropper tool to pick the pre-created color styles.
8. To create a new variable, use the shortcut Shift + Enter while your first variable is selected.
9. Repeat these steps to create additional color variables. The result should match the image below

‍

‍

Steps to group primitive color variables

‍

1. To group your colors, select your last variable, then while holding Shift, select the first variable. Right-click on all highlighted variables and click on "New Group."
2. Rename the new group "color/black." The forward slash will create a color group with the subset black.
3. To create a new variable, click on “all variables”, located at the top left corner then click "+ Create New Variable."

‍

‍

Using steps 1-9 and 1-3, create a color variable for a subgroup named "blue" and another one named "base." The result should match the image below

‍

‍

Now that you understand how to create primitive variables, let's dive into crafting semantic variables, often referred to as tokens.

‍

Figma Semantic Variables

‍

Semantic variables are formed through tokenization, which involves creating a new variable by referencing a pre-made variable, typically a primitive variable

When naming primitive variables, we often use vague labels like numbers or unclear text. In contrast, semantic variables use contextual names. The name of a semantic variable indicates its purpose, while its value references the corresponding primitive variables, clarifying how it functions. To grasp semantic variables' logic, follow these steps to create one.

Steps to create color tokens

‍

1. Create a “new collection” and rename it "Semantic Variables" or "Tokens." For this step, we will use "Tokens."
2. Click on "+ Create variables," then select "Color."
3. Change the name to the context you want the primitive variable to act upon. In this example, we will use the following contexts: Header text, Body text, Price text, Button text, and Button color. ‍
4. Right-click under "Value" and select "Alias." A library overlay will display the primitive variables we've created.

‍

‍

5. For ‘Header text’, Select "Bk-100," this indicates that we want our header text to be 100% black.

6. Repeat the naming & aliasing steps for each context: "Body text - Bk 85,"  "Price text - Bk 10,"  "Button text - Base/white,"  "Button color - Bl 100%."

7. Group all these variables together and name them "Text Colors."

8. Repeat these same steps for "Background 1 - Base/white" and "Background 2 - Base/light purple" and name them ‘’Background’’. The result should match the image below

‍

‍

Applying variables to the Figma design

‍

With primitive and semantic variables created, we can begin applying them to designs. Follow these steps to implement variables:

1. Select your header text.
2. Head over to the "Fill" option on the left panel.
3. Click on the "Style" icon.
4. Scroll down to "Tokens."
5. Tap on "Header Text."
6. Repeat the above steps for background, body text, price text, button text, and button color. The result should match the image below

‍

‍

In Conclusion

‍

Variables offer an advantage over styles as they allow for the independent modification of individual values.

The image above shows two Tokens sharing the same primitive variable (value) independent of each other. In contrast, altering the hex code within a style would impact all elements using that code.

This flexibility is what makes variables superior tools for creating visual elements in design, due to their seamless editing capabilities.

Variables are simple, reusable design elements that represent specific design attributes. Primitive variables are the actual design decisions, while semantic variables represent design attributes. Optimizing variables to create a design system results in consistency, reusability, and editability.

Now that you know how variables  are used, click on this link to access more resources about Figma.

‍