Thread by @thalion_pb

Everything you would like to know about @figma Variables.
MEGA THREAD (20+ tweets!) 🧵

#FigmaTip #uidesign #designsystem

✨ What are variables?

Variables are dedicated to store values that may be used as properties across your designs. Their goal is to help you make the design more intelligent; they may become tokens for your design system or adjust prototypes to specific rules.

Variables can store the following values:

1. Colors - use for fills & strokes
2. String - apply for text layers
3. Number - use for spacing, size, text layers & corner radius
4. Boolean - true/false values for layer visibility of variant instances

Figma team promises that very soon, we will see options also for the following variables:

1. Typography
2. Gradients
3. Effects

You may structure your variables in a several ways:

- Modes
- Groups
- Collections

Variable modes allow you to define alternative values applied to a different mode. Works perfectly for Dark & Light modes.

Groups works just like with styles. you may group Variables by adding "/." Useful for organizing color palette

Collections are the next layer of organizing variables.

In design systems, you often define primitives like full color palette & full typography scope; then you build more semantic colors & reference primitives. Finally, you apply semantic colors to specific component tokens.

Practical use cases for variables:

1. Use variables as design system tokens
2. Define properties for breakpoints
3. Prepare light & dark mode, or even multiple themes superfast
4. Prepare designs in multiple languages
5. Create advanced prototypes with conditional logic

1️⃣ Variables in Design Systems

Here is the sample workflow:

1. Add your entire color palette as a "Primitives" Collection.
2. Prepare a collection of semantic colors (backgrounds, strokes, text, etc.). As values use references from the Primitives collection.

3. At this point, you may also add a mode to make tokens for "Light" & "Dark" themes
4. Add the final layer to your design system, define the collection of components. Add variables for "button-background," "modal-stroke," etc., & put references to semantic tokens as values.

2️⃣ Variables for different breakpoints

Depending on your project requirements, add the default for desktop, then tablet, and mobile options.

If your product is going to have a customizable UI, consider making spacing modes for "standard," "compact," and "spacious" options.

3️⃣ Light & Dark mode with Variables

As I already mentioned in the first point. When you add a variable, you may add an extra mode to it. Name your modes - Light and Dark

4️⃣ Multi-language designs with Variables

When you define collection for the project copy, define languages as modes. The first is always a default one.

Now when you have a section in Figma that uses a specific mode, all your designs will turn into a specific language.

5️⃣ Advanced prototyping thanks to Variables.

No more spaghetti prototyping!

With variables, you may create prototypes that make calculations or rely on conditional logic.

To keep your variables clean, you may add a separate variable collection dedicated to prototyping values.

✨Additional Tips for Figma Variables

Let's add a cherry on top of your new knowledge about Variables. There are some recommended practices that will immediately help you:

Tip 1: Making collections private

If you may want to hide primitive values and expose only tokens, make some of collections private.

It works like with components, add a dot "." or underscore "_" as the prefix of your collection name. Now collection is private

Tip 2: Styles or Variables?

Figma allows us to use both and achieve almost the same results.

Variables are much more advanced, and if you are building a kind of design system or doing more prototyping work - go for them! 1/2

There are no variables for some properties like gradients or effects, where styles work very well.

Variables are more atomic (store single values). Styles may be a composition of values.

Variables may reference other variables. Styles cannot do that. 2/2

Tip 3: Use Sections (and Pages) to show the variable options set.

Once you put your designs in a specific Section, you may select this Section and configure the Collections & Modes used within the area.

Tip 4: Reordering Variables

Variables are organized in alphabetical order. This means you cannot (yet?) drag & drop to customize it like styles.

This means that in the core file, you will see all your private Variables on top of the layer list (they start with "." or "_").

‍

Tip 5: Using Variables in different files

Just like with styles, you may publish Variables in your Library document. Then enable Library, and you will be able to see them in different documents. Super helpful for more complex design systems.

This is just a glance, to dive deeper into variables feel free to read article on my blog:

Enjoyed the thread? Don't forget to follow me (@thalion_pb) and share it with friends!thalion.pro/post/figma-var…