Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

🎉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 görüntüleme • 1 yıl önce •via X (Twitter)

Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

10 Yorum

Ty Hughey profil fotoğrafı

Ty Hughey1 yıl önce

omg this is it!! 💙

Reown profil fotoğrafı

Reown1 yıl önce

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 profil fotoğrafı

Jacob Miller1 yıl önce

Congrats on launching!

Aaron Matthew Kaiser profil fotoğrafı

Aaron Matthew Kaiser1 yıl önce

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

Espinosa profil fotoğrafı

Espinosa1 yıl önce

Yes yes yes!!

Abi Rana profil fotoğrafı

Abi Rana1 yıl önce

Wow just amazing….

Luke Netti profil fotoğrafı

Luke Netti1 yıl önce

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

Bernardo Lickfold profil fotoğrafı

Bernardo Lickfold1 yıl önce

Can’t wait to try this!

Miguel Ochoa profil fotoğrafı

Miguel Ochoa1 yıl önce

Dropping the game chargers huh? All right!

Mark Fa'amaoni profil fotoğrafı

Mark Fa'amaoni1 yıl önce

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

Benzer Videolar

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 görüntüleme • 2 yıl önce

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,709 görüntüleme • 4 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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,451 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

🐣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 görüntüleme • 2 yıl önce

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,309 görüntüleme • 3 ay önce

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,640 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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,157 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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,243,403 görüntüleme • 2 ay önce

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,267 görüntüleme • 29 gün önce

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

633,782 görüntüleme • 3 ay önce

/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,093 görüntüleme • 1 ay önce

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,909 görüntüleme • 3 ay önce

You can now drag to adjust values in Design Mode.

You can now drag to adjust values in Design Mode.

v0

34,175 görüntüleme • 1 yıl önce