Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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's profile picture

Figma

568,814 subscribers

318,717 görüntüleme • 2 yıl önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

aparently profil fotoğrafı
aparently2 yıl önce

Can we please separate color and opacity so I can use variables independent from opacity? 🙏

Alex Einarsson profil fotoğrafı
Alex Einarsson2 yıl önce

Great news! ❤ Most useful for me is probably applying color variables to effects (even though it was a bit hard to find)

Nicholas Jenner profil fotoğrafı
Nicholas Jenner2 yıl önce

When are we getting typography variables?

Sula Yang profil fotoğrafı
Sula Yang2 yıl önce

CHRISTMAS CAME EARLY Y'ALL!!!!!!! ♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️

kyle profil fotoğrafı
kyle2 yıl önce

another update closer to font properties... 🙏

Austin Robinson profil fotoğrafı
Austin Robinson2 yıl önce

Nested instance variables praise the lord!

Dima Groshev profil fotoğrafı
Dima Groshev2 yıl önce

This is awesome! I'll definitely implement it in my Design System.

Tregg 🤘 profil fotoğrafı
Tregg 🤘2 yıl önce

Sick lets go

Omzzz profil fotoğrafı
Omzzz2 yıl önce

Amazing! Typography variables when? 👀 Also variable export and import would be huge. That way we can play around in one file and then move to main when ready.

Fabian B. profil fotoğrafı
Fabian B.2 yıl önce

Still no variables, not even color styles for gradients 😄 that’s such a pain! Still great updates though.

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

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

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

Figma

38,494 görüntüleme • 1 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

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

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.
0:29

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.

CSS by T. Afif

23,199 görüntüleme • 1 yıl önce

Do more with Glass → Add it to any object, shape, or text → Round individual corners → Adjust the spread of light refraction with Splay → Apply variables from your design system
0:29

Do more with Glass → Add it to any object, shape, or text → Round individual corners → Adjust the spread of light refraction with Splay → Apply variables from your design system

Figma

1,135,984 görüntüleme • 5 ay ö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
1:00

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

New visual editor features just dropped 🛠️ Now you can: • Tweak border radius & opacity • Undo changes with a single click • Jump straight to component code • Edit multiple components at once Next week we're coming in with a game-changer… Stay tuned...
0:40

New visual editor features just dropped 🛠️ Now you can: • Tweak border radius & opacity • Undo changes with a single click • Jump straight to component code • Edit multiple components at once Next week we're coming in with a game-changer… Stay tuned...

Base44

10,816 görüntüleme • 9 ay önce

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025
0:39

Auto layout just got more powerful with Grid → Format in a gallery, card or bento layout → Items can span multiple cells #Config2025

Figma

160,965 görüntüleme • 1 yıl önce

Some updates to connectors in Figma Make → More partners added (Amplitude, Box, HeyMarvin, DoveTail, ZeroHeight) → You can now build your own custom connectors
0:25

Some updates to connectors in Figma Make → More partners added (Amplitude, Box, HeyMarvin, DoveTail, ZeroHeight) → You can now build your own custom connectors

Figma

30,959 görüntüleme • 4 ay önce

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇
0:32

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

532,905 görüntüleme • 2 yıl önce

A new day, a new launch here at Figma! Excited to share our updated eyedropper tool that can now grab color variables 🌈
2:19

A new day, a new launch here at Figma! Excited to share our updated eyedropper tool that can now grab color variables 🌈

Ana

42,461 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.
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

#Config2023 launches bridge the gap between design and development, all in Figma. → Dev Mode, a new space for developers → Variables → Advanced prototyping → Auto layout updates → Font picker → File browser redesign Plus, we previewed the future of Figma with AI and announced the acquisition of Diagram.
0:54

#Config2023 launches bridge the gap between design and development, all in Figma. → Dev Mode, a new space for developers → Variables → Advanced prototyping → Auto layout updates → Font picker → File browser redesign Plus, we previewed the future of Figma with AI and announced the acquisition of Diagram.

Figma

1,336,798 görüntüleme • 3 yıl önce

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇
0:48

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,379 görüntüleme • 2 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

GitLab is now available in Stripe Projects. Developers and AI coding agents can add GitLab to a new project in seconds, with credentials and environment variables handled automatically. Run "stripe projects add gitlab/project" to get started. Learn more:
2:06

GitLab is now available in Stripe Projects. Developers and AI coding agents can add GitLab to a new project in seconds, with credentials and environment variables handled automatically. Run "stripe projects add gitlab/project" to get started. Learn more:

🦊 GitLab

14,217 görüntüleme • 2 ay önce

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →
1:20

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

Figma

124,356 görüntüleme • 2 yıl önce

Gemini can now transform your questions and complex concepts into customizable interactive visualizations directly in your chat. Adjust variables, rotate 3D models, and explore data for a more immersive way to learn and explore in Gemini.
0:59

Gemini can now transform your questions and complex concepts into customizable interactive visualizations directly in your chat. Adjust variables, rotate 3D models, and explore data for a more immersive way to learn and explore in Gemini.

Google Gemini

5,884,018 görüntüleme • 3 ay önce