Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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 views • 2 years ago •via X (Twitter)

Arts Education Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

aparently2 years ago

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

Alex Einarsson2 years ago

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

Nicholas Jenner2 years ago

When are we getting typography variables?

Sula Yang2 years ago

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

kyle2 years ago

another update closer to font properties... 🙏

Austin Robinson2 years ago

Nested instance variables praise the lord!

Dima Groshev2 years ago

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

Tregg 🤘2 years ago

Sick lets go

Omzzz2 years ago

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.2 years ago

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

Related Videos

#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 views • 3 years ago

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 views • 1 year ago

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 views • 1 year ago

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 views • 2 years ago

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 views • 1 year ago

$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 views • 5 months ago

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 views • 1 year ago

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 views • 9 months ago

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 views • 1 year ago

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 views • 4 months ago

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 views • 2 years ago

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 views • 1 year ago

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 views • 1 year ago

#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 views • 3 years ago

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 views • 2 years ago

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

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

Figma

61,274 views • 11 months ago

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 views • 2 months ago

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 views • 2 years ago

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,883,880 views • 3 months ago