Figma is free to use. Sign up here: https://bit.ly/3msp0OV
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.
Follow along with the file: https://bit.ly/44bHgC2
Learn about prototyping with variables with our other tutorial: https://bit.ly/3pfKk1h
Learn more about variables in Figma with our additional playground file: https://bit.ly/4490iJc
Learn more about design systems in Figma: https://bit.ly/3os0Afc
Help center articles:
Guide to variables: https://bit.ly/3Nh7JaK
Overview of variables: https://bit.ly/44bD2dG
Create and manage variables: https://bit.ly/447B9im
Apply variables to designs: https://bit.ly/3qVsnWo
Modes for variables: https://bit.ly/3qS3GKk
For more information on using variables with API and development, check out the links here:
– REST API: https://www.figma.com/developers/api#variables
– Plugin API docs: https://www.figma.com/plugin-docs/working-with-variables
– Import/export variables code sample https://github.com/figma/plugin-samples/tree/master/variables-import-export
– Styles to variables convert code sample https://github.com/figma/plugin-samples/tree/master/styles-to-variables
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 ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/
____________________________________________________
#Figma #Config #Config2023 #Variables #Designtokens #Tutorial #design #tips #DesignSystems
source
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.
https://second-editors-draft.tr.designtokens.org/format/#character-restrictions
Keep an eye out for additional syntax support in the future. Thank you for your understanding!
"Variables can store raw single values" Like what? Translation needed. how raw. 1-10
Huge 🙌
I noticed you don't allow special characters in variable names (for a good reason) but the tutorial does otherwise.
Are you serious? Why change Spacing and Radius on Light and Dark modes? 🫣
@figma Is it possible to apply a number variable as a type size? Im not seeing how to do this in Figma
what is surface invert? and when would you use this?
Do you plan to allow resizing the right sidebar? It's filled with icons, now more icons in fields on hover, and names of variables don't fit without truncation. The sidebar and all popups need to be resizable horizontally.
I don't get, seems it's overkill, feature for the sake of feature. But it's interesting.
Can it be published Local Variables between files?
The features are really awesome, but adding library to gradient would solve my problem. 😊
Is there a way to automate the creation of systems of variables? Pretty much every product is made up of colours, corner-radii and font sizes (for the time being at least), and it would be great to be able to crate these systems at a click of a button and then tweak them, as opposed to having to manually input every variable from scratch.
I feel myself so stupid because I can't understand why I should create alias tokens. Why can't I just create Blue, Red, Green color tokens and use them in my components and text? Why now I should create different tokens for text, radio, checkbox that are basically just copy of my Blue, Red, Green color tokens but with different names…Could anybody please explain that?
Please, make the variable panel full screen and resizable. Including the columns.
not able to get the follow along file..
is this feature released yet?
Is there a video on how this layout was created using auto-layout and wrapping? It will be quite helpful if there is a video series on creating layouts with best practises for dev hand-off using Figma
The sibilant S in the narrator's voice is so biting, I had to stop watching the video.
Cannot use dots (.) on variables names. 🤔
right clicking on several variables does not bring up create new group for all option, instead it highlights only the variable you are right clicking on and allows that one to be added
@figma please oh please allow maths when referencing another variable Var b = (varA * .5)
9:35 why isn't the change variable mode button there for me?
Using the ½ emoji seems to be a workable solution as a replacement for .5 in the spacing primitives section. Not sure if that presents any issues with exporting though.
This is absolutely mindblowing!
The video was truly excellent and highly educational. However, the persistent hisses, almost resembling whistling sounds, in the voiceover were quite uncomfortable and continuously distracting. It became difficult for me to fully engage with the content as I couldn't help but anticipate when the next hiss would occur.
Is there any ways to have text tokens ? I mean font-size, font-weight, …
Can tokens also be published for use across multiple files?
Would love a way to import all the predefined variables from Tailwind into Figma. Would make it smooth!