正在加载视频...

视频加载失败

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

🎉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,883 subscribers

21,386 次观看 • 1 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

Ty Hughey 的头像

Ty Hughey1 年前

omg this is it!! 💙

Reown 的头像

Reown1 年前

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 Miller 的头像

Jacob Miller1 年前

Congrats on launching!

Aaron Matthew Kaiser 的头像

Aaron Matthew Kaiser1 年前

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

Espinosa 的头像

Espinosa1 年前

Yes yes yes!!

Abi Rana 的头像

Abi Rana1 年前

Wow just amazing….

Luke Netti 的头像

Luke Netti1 年前

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

Bernardo Lickfold 的头像

Bernardo Lickfold1 年前

Can’t wait to try this!

Miguel Ochoa 的头像

Miguel Ochoa1 年前

Dropping the game chargers huh? All right!

Mark Fa'amaoni 的头像

Mark Fa'amaoni1 年前

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!!!

相关视频

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,748 次观看 • 2 年前

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,712 次观看 • 4 个月前

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,445 次观看 • 3 年前

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

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

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

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

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 次观看 • 4 个月前

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,331 次观看 • 3 个月前

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

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

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

487,548 次观看 • 3 个月前

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

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 次观看 • 11 个月前

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,244,011 次观看 • 2 个月前

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

130,457 次观看 • 1 个月前

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

634,118 次观看 • 3 个月前

/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

66,291 次观看 • 1 个月前

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,130,033 次观看 • 3 个月前

You can now drag to adjust values in Design Mode.

You can now drag to adjust values in Design Mode.

v0

34,175 次观看 • 1 年前