Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

6 Yorum

Maher Sinjary profil fotoğrafı
Maher Sinjary1 yıl önce

💛💛💛

Pedro profil fotoğrafı
Pedro1 yıl önce

Copy and paste component property to another 🚀

Gabriel Hörlle profil fotoğrafı
Gabriel Hörlle1 yıl önce

Great feature!

Arun Kai profil fotoğrafı
Arun Kai1 yıl önce

Been waiting eagerly for this update the past few months

Xyzano profil fotoğrafı
Xyzano1 yıl önce

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 profil fotoğrafı
Steven CTO on base1 yıl önce

wow

Benzer Videolar

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

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

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

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

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

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

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

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

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

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

Figma

61,274 görüntüleme • 11 ay önce

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

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

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

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

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

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

Get your fill with the updated eyedropper, only in UI3 → Reuse styles and variables (Shift + Click) → Copy style and variable names (also hex, RGB, HSL, and HSB codes!) in raw text format → Tab through different color formats → Create a new style or variable (Shift + CMD + Click / Shift + CTRL + Click)
0:45

Get your fill with the updated eyedropper, only in UI3 → Reuse styles and variables (Shift + Click) → Copy style and variable names (also hex, RGB, HSL, and HSB codes!) in raw text format → Tab through different color formats → Create a new style or variable (Shift + CMD + Click / Shift + CTRL + Click)

Figma

111,014 görüntüleme • 1 yıl önce