正在加载视频...

视频加载失败

#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 年前