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

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

На главную

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

ИскусствоОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

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

Фото профиля aparently
aparently2 лет назад

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

Фото профиля Alex Einarsson
Alex Einarsson2 лет назад

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

Фото профиля Nicholas Jenner
Nicholas Jenner2 лет назад

When are we getting typography variables?

Фото профиля Sula Yang
Sula Yang2 лет назад

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

Фото профиля kyle
kyle2 лет назад

another update closer to font properties... 🙏

Фото профиля Austin Robinson
Austin Robinson2 лет назад

Nested instance variables praise the lord!

Фото профиля Dima Groshev
Dima Groshev2 лет назад

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

Фото профиля Tregg 🤘
Tregg 🤘2 лет назад

Sick lets go

Фото профиля Omzzz
Omzzz2 лет назад

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.
Fabian B.2 лет назад

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

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

#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 лет назад

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

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

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 лет назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Figma

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

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

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