Loading video...

Video Failed to Load

Go Home

#Config2023 Launch 2: Variables You can now use variables to make adaptable designs—we’re talking different brand themes, device formats, and more. And yup, variables can be exported as tokens in case that’s helpful 😉. 👇 See variables in action

357,641 views • 3 years ago •via X (Twitter)

10 Comments

Figma's profile picture
Figma3 years ago

🌈 Adapting to change Variables can be colors, numbers, or strings and they can have different values across multiple modes—unlocking light and dark mode, and much more.

Figma's profile picture
Figma3 years ago

📏 Design in another dimension With number variables, you can now apply them to width/height/padding and more to actually switch between different layouts.

Figma's profile picture
Figma3 years ago

🌎 Localization in one click And with string variables, you can include and swap between content in multiple languages for truly global designs.

Figma's profile picture
Figma3 years ago

👩‍💻 API to get serious We’ve updated our API documentation to help you scale design systems management. 👉 Variables plugin API: 👉 Variables REST API (read and write, Enterprise plan only):

Figma's profile picture
Figma3 years ago

🛠 Plugins to help you along the way Our developer advocates @jak___e and @actuallyakbar have published a number of plugins to help you get started. 👉 Variables import/export plugin: 👉 Styles to variables converter:

Figma's profile picture
Figma3 years ago

Start scaling your designs and try out variables in the playground file! Feature availability differs by plan.

J~P's profile picture
J~P3 years ago

where can I find more information on "variables can be exported as tokens" will variables be exportable to gitlab to be directly ingested by devs ?

The Designer's profile picture
The Designer3 years ago

All you had to do was implement a feature that could publish designs to live web pages. That's all we asked for for God's sake

Steve's profile picture
Steve3 years ago

Is this like a Figma Styles 2.0? What happened to the Figma Style icon? Are all Figma Styles automatically upgraded?

Constantine Zuev's profile picture
Constantine Zuev3 years ago

As exciting as it looks… when you try it it feels halfbaked ☹️ so halfbaked it is indigestible. Zero support for component properties that were announced just a year go. I hope this will be addressed but this is huuuge bummer.

Related Videos

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,495 views • 1 year ago