正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 1 年前 •via X (Twitter)

艺术科学技术教育

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 ⏰

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.

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...

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:

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 次观看 • 3 个月前

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 次观看 • 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! ....

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 次观看 • 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.

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

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! ⚡

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 🧑‍💻

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

luis.

12,061 次观看 • 1 年前

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 次观看 • 8 个月前

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 次观看 • 10 个月前

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 次观看 • 2 年前

@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 次观看 • 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. 🎛️⚡

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 次观看 • 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.

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 年前

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 次观看 • 1 个月前

🖋️ 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 次观看 • 1 年前