正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Some updates to variables! You can now bind variables to: - Individual corner radius - Effects - Layer opacity - Layout grid - Nested instances - Stroke weight Join our Q&A next week (Dec 13) to learn more →

Figma

568,814 subscribers

318,717 次观看 • 2 年前 •via X (Twitter)

艺术教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

aparently 的头像

aparently2 年前

Can we please separate color and opacity so I can use variables independent from opacity? 🙏

Alex Einarsson 的头像

Alex Einarsson2 年前

Great news! ❤ Most useful for me is probably applying color variables to effects (even though it was a bit hard to find)

Nicholas Jenner 的头像

Nicholas Jenner2 年前

When are we getting typography variables?

Sula Yang 的头像

Sula Yang2 年前

CHRISTMAS CAME EARLY Y'ALL!!!!!!! ♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️

kyle 的头像

kyle2 年前

another update closer to font properties... 🙏

Austin Robinson 的头像

Austin Robinson2 年前

Nested instance variables praise the lord!

Dima Groshev 的头像

Dima Groshev2 年前

This is awesome! I'll definitely implement it in my Design System.

Tregg 🤘 的头像

Tregg 🤘2 年前

Sick lets go

Omzzz 的头像

Omzzz2 年前

Amazing! Typography variables when? 👀 Also variable export and import would be huge. That way we can play around in one file and then move to main when ready.

Fabian B. 的头像

Fabian B.2 年前

Still no variables, not even color styles for gradients 😄 that’s such a pain! Still great updates though.

相关视频

#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

Figma

357,664 次观看 • 3 年前

Component properties can now be bound to variables Also, UI has been simplified so that props and variables are in the same dropdown

Component properties can now be bound to variables Also, UI has been simplified so that props and variables are in the same dropdown

Figma

38,494 次观看 • 1 年前

7 quality of life updates to variables: → Copy + paste across collections → New variables under selection → Hover to show value and description → Hover to show group names → Tabbing through authoring window → Improved input accessibility → Resize columns

7 quality of life updates to variables: → Copy + paste across collections → New variables under selection → Hover to show value and description → Hover to show group names → Tabbing through authoring window → Improved input accessibility → Resize columns

Figma

51,925 次观看 • 1 年前

Can't get enough of variables? NEW: Even more features to help make it easier to scope, hide, edit, and define variables across platforms. Dive in:

Can't get enough of variables? NEW: Even more features to help make it easier to scope, hide, edit, and define variables across platforms. Dive in:

Figma

153,497 次观看 • 2 年前

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.

CSS by T. Afif

23,199 次观看 • 1 年前

$Do more with Glass → Add it to any object, shape, or text → Round individual corners → Adjust the spread of light refraction with Splay → Apply variables from your design system$

Do more with Glass → Add it to any object, shape, or text → Round individual corners → Adjust the spread of light refraction with Splay → Apply variables from your design system

Figma

1,135,984 次观看 • 5 个月前

Build on-brand sites faster with Libraries! 🎉 Now you can share components and variables across multiple sites in your Workspace, enabling your team to build on-brand experiences quickly and manage updates effortlessly. Learn more: And we're just getting started — stay tuned for more updates at #WebflowConf

Webflow

15,911 次观看 • 1 年前

New visual editor features just dropped 🛠️ Now you can: • Tweak border radius & opacity • Undo changes with a single click • Jump straight to component code • Edit multiple components at once Next week we're coming in with a game-changer… Stay tuned...

New visual editor features just dropped 🛠️ Now you can: • Tweak border radius & opacity • Undo changes with a single click • Jump straight to component code • Edit multiple components at once Next week we're coming in with a game-changer… Stay tuned...

Base44

10,816 次观看 • 9 个月前

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Figma

160,965 次观看 • 1 年前

Some updates to connectors in Figma Make → More partners added (Amplitude, Box, HeyMarvin, DoveTail, ZeroHeight) → You can now build your own custom connectors

Some updates to connectors in Figma Make → More partners added (Amplitude, Box, HeyMarvin, DoveTail, ZeroHeight) → You can now build your own custom connectors

Figma

30,959 次观看 • 4 个月前

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

532,905 次观看 • 2 年前

A new day, a new launch here at Figma! Excited to share our updated eyedropper tool that can now grab color variables 🌈

A new day, a new launch here at Figma! Excited to share our updated eyedropper tool that can now grab color variables 🌈

Ana

42,461 次观看 • 1 年前

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.

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 次观看 • 1 年前

#Config2023 launches bridge the gap between design and development, all in Figma. → Dev Mode, a new space for developers → Variables → Advanced prototyping → Auto layout updates → Font picker → File browser redesign Plus, we previewed the future of Figma with AI and announced the acquisition of Diagram.

#Config2023 launches bridge the gap between design and development, all in Figma. → Dev Mode, a new space for developers → Variables → Advanced prototyping → Auto layout updates → Font picker → File browser redesign Plus, we previewed the future of Figma with AI and announced the acquisition of Diagram.

Figma

1,336,798 次观看 • 3 年前

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,379 次观看 • 2 年前

Modal makeover, variables edition: → Filter → Search → Expand

Modal makeover, variables edition: → Filter → Search → Expand

Figma

61,274 次观看 • 11 个月前

GitLab is now available in Stripe Projects. Developers and AI coding agents can add GitLab to a new project in seconds, with credentials and environment variables handled automatically. Run "stripe projects add gitlab/project" to get started. Learn more:

GitLab is now available in Stripe Projects. Developers and AI coding agents can add GitLab to a new project in seconds, with credentials and environment variables handled automatically. Run "stripe projects add gitlab/project" to get started. Learn more:

🦊 GitLab

14,217 次观看 • 2 个月前

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

Figma

124,356 次观看 • 2 年前

Gemini can now transform your questions and complex concepts into customizable interactive visualizations directly in your chat. Adjust variables, rotate 3D models, and explore data for a more immersive way to learn and explore in Gemini.

Gemini can now transform your questions and complex concepts into customizable interactive visualizations directly in your chat. Adjust variables, rotate 3D models, and explore data for a more immersive way to learn and explore in Gemini.

Google Gemini

5,884,018 次观看 • 3 个月前