Figma tutorial: Intro to variables

By definition, a variable is something that can vary in value or take on multiple values. Variables in Figma store reusable values, like color values and numbers, that can be applied to all kinds of design properties and even prototypes! A variable’s values can also reference other variables, making updating design systems a breeze. In this video, we’ll cover how variables work, and how to use them to represent design tokens and account for different modes and themes.

* Update: When following along with the tutorial at 10:30, the variable called ".5" will no longer work. This is due to our alignment with the W3C spec which doesn't allow periods in names. Calling the variable "spacing/half" will work, instead.
We are doing a follow-up in the next coming months where we’ll be separating out the “figma name” from the code syntax, which may let us loosen these restrictions. Keep an eye out for additional syntax support in the future.

Help center articles:

For more information on using variables with API and development, check out the links here:

Chapters:
00:00 - Intro
01:17 - Color variables
03:55 - Create tokens
06:00 - Apply variables
07:13 - Styles vs variables
08:17 - Modes
10:12 - Number variables
12:35 - Themes
14:11 - Wrap up
____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #Config2023 #Variables #Designtokens #Tutorial #design #tips #DesignSystems

[Figma]

*(2) Spacing value ".5":* When following along with the tutorial at 10:30, the variable called ".5" will no longer work. This is due to our alignment with the W3C spec which doesn't allow periods in names. Calling the variable "spacing/half" will work, instead.
Changes can occur during production of our tutorials and we are sorry for any confusion. We are doing a follow-up in the next coming months where we’ll be separating out the “figma name” from the code syntax, which may let us loosen these restrictions. For now though to stay compatible with the W3C community group standard, we can’t allow them.
Keep an eye out for additional syntax support in the future. Thank you for your understanding!

[samuelsmithm]

An important note for everyone: in the video, when they are setting up Number Variables, they create a variable called ".5" for spacing values 10:30. This is currently an illegal syntax because the W3C spec on Design Tokens forbids the use of periods within token names.

EDIT: Figma has addressed this and has pinned a reply to the top of the comments addressing this. Thank you, Figma! ❤️

[SilverAsakura]

Great tutorial. Took me 1 hour to follow, but the end result is so satisfactory.
I would advise to provide 2 files: absolute starting point, and completed. Messed up my tokens so many times because of the "completed" versions available as I was following along. Only issue I had but thought it was worth mentioning.

[TyranVz]

These are really awesome! Also daunting for projects with massive "OLD" design systems already in place

[willysonotone]

It is becoming increasingly clear that Figma is shifting its focus towards creating and maintaining large design systems to the detriment of the real needs of independent designers. I respect this decision, but many of us will end up opting for solutions more suited to our needs.

[sauhardshrestha]

I had been maddening about tokenization in figma over the past few weeks. This is

[hellojohnnymac]

We're loving this at Pegasus, I'm wondering if in an update you could consider making a few changes that might streamline working with large systems in a future update?

1. I'm wondering if there could be a structure where you could craft: themes (modern, brutalist) / modes (light dark) / and something else to control spacing (comfortable dense). Having it all at one level with different properties that don't always translate is a lot of duplication and maintenance. But I'm sure it's something that's being looked at internally. Can't wait to see how this develops!

2. When you add a new variant today you have to select custom or libraries tabs to get started. If you have already set your global tokens and now want to reference them it's an extra mental step every time to switch from custom to libraries tab or visa versa. Remembering what tab you where last on would improve workflow when adding hundreds of aliased tokens tremendously.

3. Exporting to a design token spec .JSON file would be a killer feature. Having this would truly unite Design & Development.

Excited to see how this develops and thank you for listening to the community and delivering what matters.

[lukejonesme]

This new feature is amazing. I would love to be able to user the number string for any numerical values, however... e.g. type scaling would be so so so powerful. Vertical rhythm is often so closely tied to the sizes of the fonts (for example) that being able to set core/primitive values and then tokenize these same numbers for padding, spacing, and font sizes would be wonderful.

[benemma]

What a bittersweet experience for old figma design systems esecially large ones...don't even know where to start from porting our old design system to work with this new paradigm. Completely makes alot of duplicated frames expandable

[TonyAnthony_Oficial]

it would be more interesting to bind a color variable to an already created color style

[btkfxbl]

this is sick 🚀🚀🚀🚀One thing i've notice it's a lot of scrolling because you cant reorder the table in the local variables, waiting for the update ✨

[captainjunsan]

This video is insane. The content is crazy good and the presentation is awesome. Definitely need to re-watch this a few times to get the hang of this workflow but it really looks like it takes half the effort to do twice the work! Figma is changing the design world for the good!

[djashawe]

Thanks a lot, Figma, for the great content. It would be really nice to only have Tokens show up in the modal when applying variables (or have an option to turn off the visibility of Primitives). We don't need Primitives except for the initial setup, and it creates unnecessary cognitive load to ensure that Primitives are not accidentally applied. 🥺

[iamtharunraj]

I just love the animations in Figma tutorials! Easy and interesting. Keep doing these!

[robertjanezic]

Very cool, but you're basically having to create styles twice. It makes the most sense imo to create styles once, then bind your already created styles to variables.

[melaniedrxnurole]

Thank you for this great tutorial! Can't wait for the font and boolean tokens as well :D
It would be so good to be able to hide the primitives from the list of colours and only have tokens show instead!

[Dampealx]

She has such a smooth soft voice. It's make learning this stuff super easy. Excellent video

[sebastianyepes]

Would be nice to have and example of an existing design system to variables.

[dzmitrysiarheyeu]

There is not enough swap function from the styles in the variables.
I can't imagine how to quickly migrate an existing project with thousands of layouts and components from styles to variables.
But, of course, the update is cool, thanks!

[TheRiteHand]

Looks to be a well-rounded feature. Good work, Figma team!