Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

Figma

568,201 subscribers

38,494 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

6 Kommentare

Profilbild von Maher Sinjary

Maher Sinjaryvor 1 Jahr

💛💛💛

Profilbild von Pedro

Pedrovor 1 Jahr

Copy and paste component property to another 🚀

Profilbild von Gabriel Hörlle

Gabriel Hörllevor 1 Jahr

Great feature!

Profilbild von Arun Kai

Arun Kaivor 1 Jahr

Been waiting eagerly for this update the past few months

Profilbild von Xyzano

Xyzanovor 1 Jahr

Finally! So far I've had to hack it with a plugin that in recent days no longer works as well as it used to

Profilbild von Steven CTO on base

Steven CTO on basevor 1 Jahr

wow

Ähnliche 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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 →

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

318,712 Aufrufe • vor 2 Jahren

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,493 Aufrufe • vor 2 Jahren

After so much experimentation and playing around with variables in Figma, thanks to chad, I think I finally found the most *efficient and easy* way to migrate existing component libraries from styles to variables. 🎛️⚡

After so much experimentation and playing around with variables in Figma, thanks to chad, I think I finally found the most efficient and easy way to migrate existing component libraries from styles to variables. 🎛️⚡

Joey Banks

124,210 Aufrufe • vor 3 Jahren

Working with variables in Figma is so much fun! 🤩 It’s becoming clear that variables and components are essential for building any website or app today. True? #figma #designsystem #components #variables

Working with variables in Figma is so much fun! 🤩 It’s becoming clear that variables and components are essential for building any website or app today. True? #figma #designsystem #components #variables

Harshil Acharya

34,330 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

Introducing Variables! (Beta)🔸A new way to create interactive experiences in Spline. 🤹‍♀️ Numbers, Strings, Booleans 🔥 Dynamic: Time, Counter, Random ↔️ Attach variables to inputs ⚡️ Trigger events from variables 🎯 Capture object props changes Demo: Remix:

Introducing Variables! (Beta)🔸A new way to create interactive experiences in Spline. 🤹‍♀️ Numbers, Strings, Booleans 🔥 Dynamic: Time, Counter, Random ↔️ Attach variables to inputs ⚡️ Trigger events from variables 🎯 Capture object props changes Demo: Remix:

Spline

85,631 Aufrufe • vor 2 Jahren

Variables make your design consistent and flexible 🔥 Built this Light/Dark Dashboard in Figma using Variables for breakpoints. Giving away the Figma file with all variables set up. Comment 'Figma' & I will DM you the link (Must be follow so I can DM) #figma #UIDesign #process

Variables make your design consistent and flexible 🔥 Built this Light/Dark Dashboard in Figma using Variables for breakpoints. Giving away the Figma file with all variables set up. Comment 'Figma' & I will DM you the link (Must be follow so I can DM) #figma #UIDesign #process

Harshil Acharya

104,387 Aufrufe • vor 1 Jahr

Excited about incorporating Figma variables detection and display in EightShapes Specs anatomy, props and layout and spacing.

Excited about incorporating Figma variables detection and display in EightShapes Specs anatomy, props and layout and spacing.

Nathan A Curtis

34,266 Aufrufe • vor 3 Jahren

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

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

Figma

61,274 Aufrufe • vor 11 Monaten

> be a brand designer > build templates from component properties > publish in Figma Buzz for Dave in marketing > watch Dave change layouts 143 times > be relieved that assets are still on brand

Figma

15,834 Aufrufe • vor 8 Monaten

Agentic UI is LIVE 🚀 ✅ 40+ unique component sets ✅ 700+ total variants ✅ Light + Dark mode ✅ LLM-ready ✅ Style tester for UI ✅ Variables (Color, Type, Spacing)

Agentic UI is LIVE 🚀 ✅ 40+ unique component sets ✅ 700+ total variants ✅ Light + Dark mode ✅ LLM-ready ✅ Style tester for UI ✅ Variables (Color, Type, Spacing)

Alex

43,842 Aufrufe • vor 3 Monaten

Listen to Nate Headley get in depth about the kick back 🦵 and the different variables that can show up in different hitters🔥

Listen to Nate Headley get in depth about the kick back 🦵 and the different variables that can show up in different hitters🔥

108 Performance

13,764 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

v0 now supports tailwind configs and globals.css files — you can now use custom utility classes and CSS variables in your generations.

v0 now supports tailwind configs and globals.css files — you can now use custom utility classes and CSS variables in your generations.

v0

76,013 Aufrufe • vor 1 Jahr

Clerk now supports theming with CSS variables → Built-in shadcn / ui theme → Auto-syncs with your existing config See it in action👇

Clerk now supports theming with CSS variables → Built-in shadcn / ui theme → Auto-syncs with your existing config See it in action👇

Clerk

21,452 Aufrufe • vor 11 Monaten

🚀 Built this Light/Dark Dashboard in Figma for Healthcare CRM using Variables for different breakpoints. Giving away the Figma file + Tutorial (with all variables set up). Comment 'Figma' & I will DM you the link (Must be follow so I can DM)

🚀 Built this Light/Dark Dashboard in Figma for Healthcare CRM using Variables for different breakpoints. Giving away the Figma file + Tutorial (with all variables set up). Comment 'Figma' & I will DM you the link (Must be follow so I can DM)

Harshil Acharya

190,422 Aufrufe • vor 8 Monaten