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.

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

35,704 subscribers

14,413 views • 1 year ago •via X (Twitter)

Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

8 Comments

vijay verma1 year ago

Join here

RTTS2 years ago

Testing Salesforce presents unique challenges due to its complexity, scalability and customizability. RTTS can plan, design & automate a successful testing process for you.

Diego Abel1 year ago

@figma Great video thumbnail!

vijay verma1 year ago

@figma Thanks 🙌

koko1 year ago

@figma I signed up long time ago and didn’t get invite 🦦

vijay verma1 year ago

@figma So, many request. I pick randomly. Will try to send in next batch. You can DM your email

Ana1 year ago

@figma Niceeeee

design.ronit1 year ago

@figma Ohhhh lovely man🔥🔥🫡

Related Videos

I'm building a Figma plugin to generate design system variables/tokens 🛠️ After sharing the first demo, it grew too big, making it hard to manage and add new features. So, I restarted the project and cleaned up the code to make it easier to handle. Here’s detailed demo - It generate variable from preset and all alow to customize. Now, Just working on UI before final release I’ve already shared test version, who signed up. Let' me know if you wanna test.

I'm building a Figma plugin to generate design system variables/tokens 🛠️ After sharing the first demo, it grew too big, making it hard to manage and add new features. So, I restarted the project and cleaned up the code to make it easier to handle. Here’s detailed demo - It generate variable from preset and all alow to customize. Now, Just working on UI before final release I’ve already shared test version, who signed up. Let' me know if you wanna test.

vijay verma

22,021 views • 1 year 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. ✨

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

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 …

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

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

Have you ever wanted a more granular view of how your styles are used in your design? Coming soon to my Figma Plugin, Design Lint 2.0 is a styles overview. Each style and its layers are selectable, making switching styles or finding styles being used incorrectly a breeze.

Have you ever wanted a more granular view of how your styles are used in your design? Coming soon to my Figma Plugin, Design Lint 2.0 is a styles overview. Each style and its layers are selectable, making switching styles or finding styles being used incorrectly a breeze.

Daniel Destefanis

15,419 views • 3 years 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!

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

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,664 views • 1 year 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,547 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

96,430 views • 5 months ago

This Figma plugin will save you 90% of the time needed to build a design system in Figma!

This Figma plugin will save you 90% of the time needed to build a design system in Figma!

Jan Mraz

24,218 views • 1 year ago

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

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.

49,425 views • 1 year 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

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

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

141,258 views • 2 years ago

Working on color generator feature for design system Figma plugin, that creates all color shades based on a base color you pick or given hex. Different algorithms to generate more harmonious or complementary colors for your next design system project. Soon…

Working on color generator feature for design system Figma plugin, that creates all color shades based on a base color you pick or given hex. Different algorithms to generate more harmonious or complementary colors for your next design system project. Soon…

vijay verma

10,196 views • 1 year ago

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Replit ⠕

524,579 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,497 views • 1 year 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,291 views • 2 years ago

Excited to share Animate it Figma plugin! ✨ I made this plugin to quickly create animated smart components that I use most of the time—like rotate, zoom, slide, and more. It generates a set of components based on animation presets. Check here

Excited to share Animate it Figma plugin! ✨ I made this plugin to quickly create animated smart components that I use most of the time—like rotate, zoom, slide, and more. It generates a set of components based on animation presets. Check here

vijay verma

11,931 views • 1 year ago

Built a new Figma plugin I call "Magic Messages". It generates entire conversations using ChatGPT and renders them using our design system at Discord. You can set a topic, # people talking, and # of messages. This way we can generate content for our designs more easily.

Built a new Figma plugin I call "Magic Messages". It generates entire conversations using ChatGPT and renders them using our design system at Discord. You can set a topic, # people talking, and # of messages. This way we can generate content for our designs more easily.

Daniel Destefanis

130,093 views • 3 years ago