Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

#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,664 Aufrufe • vor 3 Jahren •via X (Twitter)

10 Kommentare

Profilbild von Figma
Figmavor 3 Jahren

🌈 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.

Profilbild von Figma
Figmavor 3 Jahren

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

Profilbild von Figma
Figmavor 3 Jahren

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

Profilbild von Figma
Figmavor 3 Jahren

👩‍💻 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):

Profilbild von Figma
Figmavor 3 Jahren

🛠 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:

Profilbild von Figma
Figmavor 3 Jahren

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

Profilbild von J~P
J~Pvor 3 Jahren

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 ?

Profilbild von The Designer
The Designervor 3 Jahren

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

Profilbild von Steve
Stevevor 3 Jahren

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

Profilbild von Constantine Zuev
Constantine Zuevvor 3 Jahren

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.

Ähnliche 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,496 Aufrufe • vor 1 Jahr