Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Found a dream plugin for making typography scales, it creates: – Variables – Styles with variables as values – Sticker sheet on the canvas And you can build ramps based on a ratio/calculation as well, saving a tonne of time

luis.

66,164 subscribers

49,425 views • 1 year ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

👨‍🍳 Alexandre Broudin1 year ago

Thank you for the words! :) 2 updates coming: - UI redesign of the scale composition - Responsive mode, up to 5 media, half done

luis.1 year ago

Very exciting! Would also be great to be able to overwrite existing variables created from the plugin, instead of it always creating a new collection

🐸 Tama - Multimedia Designer1 year ago

Okay, for the last couple days, I struggled to resize my frame cause of the font size, and your post popped up on my timeline. What an amazing algorithm lol

Alexia 🥐1 year ago

Made in @abroudin ™️

jenn1 year ago

oh my god thank you for this

Nasir Uddin1 year ago

Just added it to my Figma! Anything that saves time with typography is a win in my book.

Juan Arreguin1 year ago

Is there one for colors?!!! 👀

mihai1 year ago

This is a nice plugin, but I prefer to set everything by hand. This way I can better feel the project and give me time to digest ideas.

luis.1 year ago

Setting by hand is great! It would be work tweaking and workshopping by hand but then automating the tokens with the plugin would still save a tonne of time

Zach Shea1 year ago

Awesome

Related Videos

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,029 views • 2 years ago

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.

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,495 views • 1 year 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...

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

13,889 views • 1 year ago

Prompts shouldn’t be static. Introducing Prompt Variables. A way to build prompts that adapt to your inputs. Think of it as a text compositor: drop dynamic variables directly into your prompt, reorder them with drag-and-drop, and create new ones instantly with an @ sign. It means a cleaner workflow, and a cleaner canvas. 👉 See it in action:

Prompts shouldn’t be static. Introducing Prompt Variables. A way to build prompts that adapt to your inputs. Think of it as a text compositor: drop dynamic variables directly into your prompt, reorder them with drag-and-drop, and create new ones instantly with an @ sign. It means a cleaner workflow, and a cleaner canvas. 👉 See it in action:

Figma Weave

23,879 views • 3 months ago

Your new favourite plugin just dropped Styles ➡ Variables, by Yann-Edern Gillet Works like a charm:

Your new favourite plugin just dropped Styles ➡ Variables, by Yann-Edern Gillet Works like a charm:

luis.

58,776 views • 3 years ago

Excited to share Kigen Design System Figma plugin✨ Over the years, I’ve helped lots of brands build their DS - mostly doing the same variables and styles repeatedly for start. I thought, why not automate this? So, for the past few months, I’ve been building, testing, and improving it. Right now, it generates colors, typography styles, sizes, radii, and more. Plus, there’s an option to present everything for documentation. Give it a try and let me know what you think! ....

Excited to share Kigen Design System Figma plugin✨ Over the years, I’ve helped lots of brands build their DS - mostly doing the same variables and styles repeatedly for start. I thought, why not automate this? So, for the past few months, I’ve been building, testing, and improving it. Right now, it generates colors, typography styles, sizes, radii, and more. Plus, there’s an option to present everything for documentation. Give it a try and let me know what you think! ....

vijay verma

66,194 views • 1 year ago

Redid the prologue skipping mechanic. Now it both looks better and more cohesive with the game's UI, as well as function better. Instead of setting the variables as if you spent time with the character whose route you played last (which is nonsensical), it asks you instead.

Redid the prologue skipping mechanic. Now it both looks better and more cohesive with the game's UI, as well as function better. Instead of setting the variables as if you spent time with the character whose route you played last (which is nonsensical), it asks you instead.

Tennis Ace VN (tennisace.bsky.social)

20,104 views • 1 year ago

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

Say hello to the latest game-changer in Supa Palette 4.0 for @Figma! Fully customizable popular color systems you can save as variables or styles. Save hours—just a few clicks and you're all set! ⚡

Say hello to the latest game-changer in Supa Palette 4.0 for @Figma! Fully customizable popular color systems you can save as variables or styles. Save hours—just a few clicks and you're all set! ⚡

Angelo Libero

29,104 views • 1 year ago

Published a plugin! It allows you to copy CSS variables from Figma in either design or dev mode 🧑‍💻

Published a plugin! It allows you to copy CSS variables from Figma in either design or dev mode 🧑‍💻

luis.

12,061 views • 1 year ago

Don’t waste time creating manual styles and variables in Figma!

Don’t waste time creating manual styles and variables in Figma!

Jan Mraz

17,169 views • 8 months ago

I'm tinkering away on a new Figma widget for design system auditing ⚙️ It scans your document and tells you: – Number of components – Components without descriptions / doc links – Components without variables / styles – Instances with overrides Hopefully published next week!

I'm tinkering away on a new Figma widget for design system auditing ⚙️ It scans your document and tells you: – Number of components – Components without descriptions / doc links – Components without variables / styles – Instances with overrides Hopefully published next week!

luis.

18,591 views • 10 months ago

BIG YCH PROJECT I'VE BEEN WORKING ON FOR A LONG TIME! You can now be on the same subway train as the giant fox! To claim a spot please DM and we can discuss further on Discord. Any kind of OC is ok! Size can be changed as well. (Not too big for the canvas pls) ✿4/4 spots open

Sensitive content

BIG YCH PROJECT I'VE BEEN WORKING ON FOR A LONG TIME! You can now be on the same subway train as the giant fox! To claim a spot please DM and we can discuss further on Discord. Any kind of OC is ok! Size can be changed as well. (Not too big for the canvas pls) ✿4/4 spots open

ida / commissions OPEN

329,546 views • 2 years ago

@ollybromham For the time, I just had a hunch how it should move and feel. I pulled some of the variables into sliders and built a little 'design tool' which allowed me to fidget around with the values and feel it out (this makes SwiftUI such a neat prototyping tool!) :-)

@ollybromham For the time, I just had a hunch how it should move and feel. I pulled some of the variables into sliders and built a little 'design tool' which allowed me to fidget around with the values and feel it out (this makes SwiftUI such a neat prototyping tool!) :-)

Alex Widua

10,819 views • 2 years 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. 🎛️⚡

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 views • 2 years ago

A big mistake I see people routinely making is NOT clearly defining a time horizon prior to an investment/trade. Your time horizon for a trade is dictated by the longevity of the variables that trigger price action. i.e. $BTC is a long term hold due to the debasement of fiat + passive ETF bid over time (the variables here take years to play out) The same can be applied to a short term trade (the variables could be fast-moving). Full thoughts below.

A big mistake I see people routinely making is NOT clearly defining a time horizon prior to an investment/trade. Your time horizon for a trade is dictated by the longevity of the variables that trigger price action. i.e. $BTC is a long term hold due to the debasement of fiat + passive ETF bid over time (the variables here take years to play out) The same can be applied to a short term trade (the variables could be fast-moving). Full thoughts below.

Miles Deutscher

52,180 views • 1 year 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

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

95,109 views • 1 month ago

🖋️ A complete reimagining of vector editing in Framer. Draw shapes and paths right on your canvas, create custom Vector Sets with variables, and, best of all, dive into vector animations starting with the stroke effect. This is just the beginning for vectors.

🖋️ A complete reimagining of vector editing in Framer. Draw shapes and paths right on your canvas, create custom Vector Sets with variables, and, best of all, dive into vector animations starting with the stroke effect. This is just the beginning for vectors.

Framer

30,304 views • 1 year ago