Loading video...

Video Failed to Load

Go Home

We built a simple internal migration tool that moves your Figma styles to Variables 🚀 IN SECONDS

Lewishealey's profile picture

Lewis Healey

1,027 subscribers

49,841 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

16 Comments

Replit Design's profile picture
Replit Design3 years ago

@figma We have one of those too! it's called @omarabdulrahim_

Lewis Healey's profile picture
Lewis Healey3 years ago

Credit to @jeffebauer & @lorvsso for the wicked work 🔥🔥

Jay Kadam's profile picture
Jay Kadam3 years ago

@figma Any plans of publishing this to the community? 👀

franchujavier's profile picture
franchujavier3 years ago

@figma @carmenansio

Kwame.Fr£mpong🇬🇭🇬🇧's profile picture
Kwame.Fr£mpong🇬🇭🇬🇧3 years ago

@figma Is it available to download?

Choice Alex's profile picture
Choice Alex3 years ago

@figma Great work 🔥, does this mean all the styles used in the file are now variables

Iked! (33.3%)'s profile picture
Iked! (33.3%)3 years ago

@figma Wait, this migrates existing styles and remaps elements to the respective variable?

Yugandhar Bhamare's profile picture
Yugandhar Bhamare3 years ago

@figma Would like to try this out. Any plans to make it public? 🥺

Jade Jiang's profile picture
Jade Jiang3 years ago

@figma KILLING IT 🔥 So handy

Josh Harwood (Find me on Bluesky 🦋)'s profile picture
Josh Harwood (Find me on Bluesky 🦋)3 years ago

@HonzaTmn @figma Wow, that looks great! 🔥

aaoa's profile picture
aaoa3 years ago

@figma Just publish the damn plug-in in the community Lewis! 👀 No hate keeping!

Vasanth 🇮🇳's profile picture
Vasanth 🇮🇳3 years ago

@figma That's a great one!

fredherrera's profile picture
fredherrera3 years ago

@figma Tell me more given I’m stuck in Atlassian

Edward 𝕏's profile picture
Edward 𝕏3 years ago

@figma Will try that ! Will it update the applied styles to the new variables too ?

Lewis Healey's profile picture
Lewis Healey3 years ago

@ufointernet @figma It will indeed!

Yann-Edern Gillet's profile picture
Yann-Edern Gillet3 years ago

@figma Very impressive 🤯🔥

Related Videos

Let Claude create your Figma variables in seconds! 🤯
0:20

Let Claude create your Figma variables in seconds! 🤯

Jan Mraz

13,577 views • 4 months ago

I built a Figma plugin that extracts local styles (tokens and variables) and generates DESIGN md and SKILL md files that you can integrate with any AI tool 💻 open-source under MIT license 🤖 works with all major AI tools 🚀 local algorithm without API calls
3:12

I built a Figma plugin that extracts local styles (tokens and variables) and generates DESIGN md and SKILL md files that you can integrate with any AI tool 💻 open-source under MIT license 🤖 works with all major AI tools 🚀 local algorithm without API calls

Zoltán Szőgyényi

96,430 views • 5 months ago

242 variables added in Figma via Claude Code in 2 seconds Imagine doing this manually lol I built a Figma x Claude Code CLI 🔗👇
0:48

242 variables added in Figma via Claude Code in 2 seconds Imagine doing this manually lol I built a Figma x Claude Code CLI 🔗👇

Sil

26,965 views • 7 months ago

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,550 views • 1 year ago

Sharing a great tool here: The Genome Color Tool Is allows you to generate a colour palettes based on your brand, and then import those into Figma as styles You can then combine this with another plugin to spin variables up and save a tonne of time ⏰
2:12

Sharing a great tool here: The Genome Color Tool Is allows you to generate a colour palettes based on your brand, and then import those into Figma as styles You can then combine this with another plugin to spin variables up and save a tonne of time ⏰

luis.

22,050 views • 3 years ago

🚀 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,851 views • 11 months ago

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 views • 1 year ago

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.
0:43

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.

Meng To

32,205 views • 2 years ago

Boost your post on X in under 90 seconds. Simple. Fast. Built for results. 🚀
1:15

Boost your post on X in under 90 seconds. Simple. Fast. Built for results. 🚀

Nate Esparza

38,354 views • 2 months ago

Present section Demo of Figma Plugin. This will print and document all variables and styles. I'm building a plugin to generate design system variables/styles from presets. Already shared test version, who signed up. Coming soon...
0:27

Present section Demo of Figma Plugin. This will print and document all variables and styles. I'm building a plugin to generate design system variables/styles from presets. Already shared test version, who signed up. Coming soon...

vijay verma

14,413 views • 1 year ago

I'm really excited about our new Figma feature, variables. So, I built a new plugin I call "Find Variables" to help you find where they're being used across your design. It will be free and open source once it's published to Figma community!
0:32

I'm really excited about our new Figma feature, variables. So, I built a new plugin I call "Find Variables" to help you find where they're being used across your design. It will be free and open source once it's published to Figma community!

Daniel Destefanis

75,900 views • 3 years ago

What if you could generate all your colors, typography styles, sizes, radii, and more as variables and tokens with just one click? No manual setup, in few minutes go from blank page to a solid design system foundation. With option to present everything nicely for dev doc and more. With this Figma plugin, it’s actually that simple. ✨
1:46

What if you could generate all your colors, typography styles, sizes, radii, and more as variables and tokens with just one click? No manual setup, in few minutes go from blank page to a solid design system foundation. With option to present everything nicely for dev doc and more. With this Figma plugin, it’s actually that simple. ✨

vijay verma

26,263 views • 8 months ago

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,247 views • 3 years ago

Moodboarding is 90% copy-pasting and 10% taste. Open 30 tabs → copy/screenshot → drag into Figma → resize → align → delete half → repeat We built a Figma plugin that does the 90% in seconds.
1:03

Moodboarding is 90% copy-pasting and 10% taste. Open 30 tabs → copy/screenshot → drag into Figma → resize → align → delete half → repeat We built a Figma plugin that does the 90% in seconds.

Hüseyin Gayıran

20,625 views • 3 months ago

🚀 Just designed a Responsive AI Chatbot Dashboard in Figma complete with Light/Dark Modes & Variables for all 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) #figma #uidesign #designsystem #ai
0:23

🚀 Just designed a Responsive AI Chatbot Dashboard in Figma complete with Light/Dark Modes & Variables for all 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) #figma #uidesign #designsystem #ai

Harshil Acharya

222,655 views • 1 year ago

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 views • 1 year ago

What if I told you that you can quickly present and document all your Figma tokens, variables, and styles in this layout—without any manual effort? I'm coding this new layout to automatically detect everything from design system and organize in different template …
0:42

What if I told you that you can quickly present and document all your Figma tokens, variables, and styles in this layout—without any manual effort? I'm coding this new layout to automatically detect everything from design system and organize in different template …

vijay verma

25,239 views • 1 year ago

Introducing 🌈getcolors; a tool that extracts your color codes in seconds just by uploading an image in any file format, + an unlimited library of curated color palette for your next design project. for Contra x #figmamakeathon built entirely with Figma make Try it yourself - link below
1:07

Introducing 🌈getcolors; a tool that extracts your color codes in seconds just by uploading an image in any file format, + an unlimited library of curated color palette for your next design project. for Contra x #figmamakeathon built entirely with Figma make Try it yourself - link below

ZΛRΛ

23,533 views • 7 months ago

Make a yin-yang symbol with the shape builder tool in Figma in 22 seconds. In Figma Design, you can press the M short key with selected objects to access the shape builder tool. Option or alt click to subtract away.
0:22

Make a yin-yang symbol with the shape builder tool in Figma in 22 seconds. In Figma Design, you can press the M short key with selected objects to access the shape builder tool. Option or alt click to subtract away.

miggi from figgi

52,774 views • 1 year ago

Designers can finally cook 🧑‍🍳 🔥 Introducing Tempo's Figma Plugin 🔥 We've built the most powerful Figma to App plugin, turning your designs into fully functional apps in seconds, not days. 👩‍🎨 Real Figma data ➡️Real Code 🚀 Fast & Accurate conversion Check it out👇
0:29

Designers can finally cook 🧑‍🍳 🔥 Introducing Tempo's Figma Plugin 🔥 We've built the most powerful Figma to App plugin, turning your designs into fully functional apps in seconds, not days. 👩‍🎨 Real Figma data ➡️Real Code 🚀 Fast & Accurate conversion Check it out👇

Tempo (YC S23)

53,630 views • 1 year ago