Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

#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 görüntüleme • 3 yıl önce •via X (Twitter)

10 Yorum

Figma profil fotoğrafı
Figma3 yıl önce

🌈 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 profil fotoğrafı
Figma3 yıl önce

📏 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 profil fotoğrafı
Figma3 yıl önce

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

Figma profil fotoğrafı
Figma3 yıl önce

👩‍💻 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 profil fotoğrafı
Figma3 yıl önce

🛠 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 profil fotoğrafı
Figma3 yıl önce

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

J~P profil fotoğrafı
J~P3 yıl önce

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 profil fotoğrafı
The Designer3 yıl önce

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 profil fotoğrafı
Steve3 yıl önce

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

Constantine Zuev profil fotoğrafı
Constantine Zuev3 yıl önce

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.

Benzer Videolar

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 görüntüleme • 1 yıl önce