Загрузка видео...

Не удалось загрузить видео

На главную

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

figma's profile picture

Figma

568,201 subscribers

38,494 просмотров • 1 год назад •via X (Twitter)

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 6

Фото профиля Maher Sinjary
Maher Sinjary1 год назад

💛💛💛

Фото профиля Pedro
Pedro1 год назад

Copy and paste component property to another 🚀

Фото профиля Gabriel Hörlle
Gabriel Hörlle1 год назад

Great feature!

Фото профиля Arun Kai
Arun Kai1 год назад

Been waiting eagerly for this update the past few months

Фото профиля Xyzano
Xyzano1 год назад

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

Фото профиля Steven CTO on base
Steven CTO on base1 год назад

wow

Похожие видео

#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
0:46

#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 просмотров • 3 лет назад

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.
2:55

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 год назад

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 →
0:36

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,717 просмотров • 2 лет назад

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:
0:48

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 просмотров • 2 лет назад

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. 🎛️⚡
0:33

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 просмотров • 3 лет назад

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
1:08

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 просмотров • 1 год назад

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:
0:48

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 просмотров • 2 лет назад

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
0:25

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,398 просмотров • 1 год назад

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

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

Nathan A Curtis

34,266 просмотров • 3 лет назад

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

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

Figma

61,274 просмотров • 11 месяцев назад

> 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
3:14

> 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 просмотров • 8 месяцев назад

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

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,972 просмотров • 3 месяцев назад

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

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 просмотров • 1 год назад

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

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

Figma

39,643 просмотров • 1 год назад

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

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 просмотров • 1 год назад

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

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 просмотров • 11 месяцев назад

🚀 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)
0:21

🚀 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,445 просмотров • 8 месяцев назад