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

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

На главную

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

disco_lu's profile picture

luis.

66,164 subscribers

49,425 просмотров • 1 год назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля 👨‍🍳 Alexandre Broudin
👨‍🍳 Alexandre Broudin1 год назад

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

Фото профиля luis.
luis.1 год назад

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 Designer
🐸 Tama - Multimedia Designer1 год назад

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

Made in @abroudin ™️

Фото профиля jenn
jenn1 год назад

oh my god thank you for this

Фото профиля Nasir Uddin
Nasir Uddin1 год назад

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

Фото профиля Juan Arreguin
Juan Arreguin1 год назад

Is there one for colors?!!! 👀

Фото профиля mihai
mihai1 год назад

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

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

Awesome

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

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

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

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

13,889 просмотров • 1 год назад

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:
0:36

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

24,438 просмотров • 3 месяцев назад

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

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

luis.

58,777 просмотров • 3 лет назад

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! ....
1:47

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

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.
0:42

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

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

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! ⚡
0:51

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

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

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

luis.

12,061 просмотров • 1 год назад

I made this tool 4 years ago for helping with customer support emails. Instead of typing, it allows you to compose an email by dragging from predefined blocks with variables. So you only write your blocks once, and then you only combine them with drag and drop into an email. You can also save a set of email blocks as a template. When you choose that template, it lets you fill the variables of the template like a form, and then send it. We only use it internally and now with all the gpt stuff going on it seems pointless to release it. or is it? 🤔
0:54

I made this tool 4 years ago for helping with customer support emails. Instead of typing, it allows you to compose an email by dragging from predefined blocks with variables. So you only write your blocks once, and then you only combine them with drag and drop into an email. You can also save a set of email blocks as a template. When you choose that template, it lets you fill the variables of the template like a form, and then send it. We only use it internally and now with all the gpt stuff going on it seems pointless to release it. or is it? 🤔

kitze the 🐐

72,423 просмотров • 3 лет назад

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

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

Jan Mraz

17,169 просмотров • 9 месяцев назад

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!
0:43

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

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
1:05

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

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

@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!) :-)
0:22

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

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

95,573 просмотров • 2 месяцев назад

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.
2:31

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