Загрузка видео...

Не удалось загрузить видео

На главную

#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 просмотров • 3 лет назад •via X (Twitter)

Комментарии: 10

Фото профиля Figma
Figma3 лет назад

🌈 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
Figma3 лет назад

📏 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
Figma3 лет назад

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

Фото профиля Figma
Figma3 лет назад

👩‍💻 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
Figma3 лет назад

🛠 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
Figma3 лет назад

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

Фото профиля J~P
J~P3 лет назад

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
The Designer3 лет назад

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
Steve3 лет назад

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

Фото профиля Constantine Zuev
Constantine Zuev3 лет назад

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.

Похожие видео

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 просмотров • 1 год назад