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.

🎉Variable modes are here! This latest update helps supercharge your scalable design systems. Now you can create sets of variable values that can easily be switched and applied throughout your site – unlocking responsive design across devices, efficient theming, and fewer variables to manage overall.

Webflow

157,721 subscribers

21,365 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Ty Hughey1 year ago

omg this is it!! 💙

Reown1 year ago

AppKit is the full-stack toolkit to build onchain app UX 🪄 ✅ Social, Email, and Wallet Login ✅ Embedded Wallets ✅ Crypto Swaps ✅ On-ramp Integrate with just 20 lines of code across 10+ languages for all EVM chains and Solana. Onboard millions of users for free today.

Jacob Miller1 year ago

Congrats on launching!

Aaron Matthew Kaiser1 year ago

Oh wow! Looks like this also make light/dark mode theming super easy as well.

Espinosa1 year ago

Yes yes yes!!

Abi Rana1 year ago

Wow just amazing….

Luke Netti1 year ago

This is an awesome feature. Excited to start using it to make sites even faster.

Bernardo Lickfold1 year ago

Can’t wait to try this!

Miguel Ochoa1 year ago

Dropping the game chargers huh? All right!

Mark Fa'amaoni1 year ago

Ha ha! I was just thinking about all of the wasted real estate on the variables page the other day. I should have known you had plans for it LOL 😆 Excellent!!!

Related Videos

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

Webflow

20,742 views • 2 years ago

We partnered with Anthropic so you can use the Webflow connector directly in Claude 🙌🏽 Instead of stopping at ideas or recommendations, Claude can now take real action in Webflow. Here are some of the things you can do with Claude + Webflow: - Bulk update CMS content across collections - Run SEO, content, and usability audits (and apply the fixes) - Clean up design systems with consistent variables, classes, and naming 👉 Learn more:

We partnered with Anthropic so you can use the Webflow connector directly in Claude 🙌🏽 Instead of stopping at ideas or recommendations, Claude can now take real action in Webflow. Here are some of the things you can do with Claude + Webflow: - Bulk update CMS content across collections - Run SEO, content, and usability audits (and apply the fixes) - Clean up design systems with consistent variables, classes, and naming 👉 Learn more:

Webflow

38,684 views • 3 months ago

Just hit publish on a new guide! It's called "Variable mapping and design system structure" and you can grab it here: It's hopefully a way to provide some guidance on how to structure your variables and collections according to how your system is set up

Just hit publish on a new guide! It's called "Variable mapping and design system structure" and you can grab it here: It's hopefully a way to provide some guidance on how to structure your variables and collections according to how your system is set up

luis.

69,440 views • 2 years 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

My newest Figma plugin: Variable Visualizer! Manage your variable tables in an interactive canvas—see in the video how you can add a new mode in seconds. Design system nerds, this one's a must try👇and let me hear from you👂 #FigmaPlugin #DesignSystems

My newest Figma plugin: Variable Visualizer! Manage your variable tables in an interactive canvas—see in the video how you can add a new mode in seconds. Design system nerds, this one's a must try👇and let me hear from you👂 #FigmaPlugin #DesignSystems

Mr. Biscuit

18,436 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,495 views • 1 year ago

🐣Tiny update: Variable Control, a new event action that allows you to easily control dynamic variables.

🐣Tiny update: Variable Control, a new event action that allows you to easily control dynamic variables.

Spline

23,041 views • 2 years ago

This is how a top designer uses Figma variable modes to manage a design system for 50+ sports brands Designers should copy this workflow to scale their Figma design systems 👀 Watch the full video on Sneak Peek: Cornelius Hegeman shows how the Jump design team built a Figma design system to manage 50+ brands 👇

This is how a top designer uses Figma variable modes to manage a design system for 50+ sports brands Designers should copy this workflow to scale their Figma design systems 👀 Watch the full video on Sneak Peek: Cornelius Hegeman shows how the Jump design team built a Figma design system to manage 50+ brands 👇

Jayneil Dalal

29,057 views • 3 months ago

Created AI Chatbot Design using Figma Make, and converted it into Responsive using Variables & applied Light/Dark Modes. Comment Figma to get Source file & Tutorial. (Must be Follow so I can DM) #crm #dashboarddesign #figma #uidesign #uiuxdesign

Created AI Chatbot Design using Figma Make, and converted it into Responsive using Variables & applied Light/Dark Modes. Comment Figma to get Source file & Tutorial. (Must be Follow so I can DM) #crm #dashboarddesign #figma #uidesign #uiuxdesign

Harshil Acharya

48,257 views • 2 months ago

See more values, not just variable names in Dev Mode → Access variable collections → Variable details → Suggested variables

See more values, not just variable names in Dev Mode → Access variable collections → Variable details → Suggested variables

Figma

39,633 views • 1 year ago

Passkeys make signing into your favorite sites and apps feel as simple as unlocking your phone. You can now create and store passkeys in Google Password Manager, making it easy to use passkeys across all your computers and Android devices.

Passkeys make signing into your favorite sites and apps feel as simple as unlocking your phone. You can now create and store passkeys in Google Password Manager, making it easy to use passkeys across all your computers and Android devices.

Chrome

29,331 views • 1 year ago

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵

Here is a quick walkthrough of everything new in Stitch: 🎨 The AI-native canvas can hold and reason across images, code, and text simultaneously. The new agent manager helps you design in parallel. (PS … light mode!) 🧠 A smarter design agent now understands your entire canvas context. You can swap images, generate product briefs, or mix mobile and desktop screens on the same canvas. 🎙️ You can vibe design with your voice (in Preview). Stitch can ‘see’ your canvas and your selected screens. You can ask for design critiques, variations, or navigate your canvas. ⚡️ Instant prototypes. Just hit the play button to see a prototype or preview your app in seconds. Stitch can imagine the next screen based on your mouse click. 📐 DESIGN.md and consistency. Every new design automatically starts with a cohesive design system which vastly improves consistency. The new DESIGN.md file can be used to export or import your design rules. Walkthrough video👇 Details for each major improvement 🧵

Stitch by Google

486,830 views • 2 months ago

With this Figma plugin, you can publish a responsive live website based on your desktop design!

With this Figma plugin, you can publish a responsive live website based on your desktop design!

Jan Mraz

12,626 views • 1 year ago

Also, if you missed it earlier this week, in Figma Draw, you can now manually type in variable width stroke values, tab through variable width stroke nodes, and multi-select and edit them by holding shift when selecting.

Also, if you missed it earlier this week, in Figma Draw, you can now manually type in variable width stroke values, tab through variable width stroke nodes, and multi-select and edit them by holding shift when selecting.

miggi from figgi

17,741 views • 10 months ago

Grok Imagine just got a HUGE update You can now create your own custom templates Just upload your image and you can do: → Photo to Video → Photo to Style Edit → Photo → Edit → Video No design skills needed This is your own personal AI creative studio Create nearly unlimited templates with full control over your workflow and style

Grok Imagine just got a HUGE update You can now create your own custom templates Just upload your image and you can do: → Photo to Video → Photo to Style Edit → Photo → Edit → Video No design skills needed This is your own personal AI creative studio Create nearly unlimited templates with full control over your workflow and style

X Freeze

1,241,952 views • 1 month ago

Design is trapped in canvases. Open Design 0.8.0 changes that. Your assets, systems, prototypes, exports, and workflows can now become plugins agents can use. From canvas-first to agent conversation. Everything becomes a plugin. Try it now👉

Design is trapped in canvases. Open Design 0.8.0 changes that. Your assets, systems, prototypes, exports, and workflows can now become plugins agents can use. From canvas-first to agent conversation. Everything becomes a plugin. Try it now👉

Open Design

129,478 views • 12 days ago

Cursor can now create new components and frontends in Figma using your team's design system.

Cursor can now create new components and frontends in Figma using your team's design system.

Cursor

632,747 views • 2 months ago

/custom-skills-are-now-in-make-so-you-can-create-and-call-repeated-workflows Note: you can create and manage your own skills now. Sharing skills with your team and org is coming soon.

/custom-skills-are-now-in-make-so-you-can-create-and-call-repeated-workflows Note: you can create and manage your own skills now. Sharing skills with your team and org is coming soon.

Figma

65,712 views • 28 days ago

omg.. Google vibe design is here you can now talk to agents to design and edit anything

omg.. Google vibe design is here you can now talk to agents to design and edit anything

el.cine

1,129,280 views • 2 months ago

You can now drag to adjust values in Design Mode.

You can now drag to adjust values in Design Mode.

v0

34,175 views • 11 months ago