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.

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

35,839 subscribers

10,486 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

6 Comments

vijay verma1 year ago

Last week released documentation v2 🚀 Check here

Joshua Guo1 year ago

@figma 🔥

Eric Alm1 year ago

@figma Or you can't update/change colors from a predefined system like Tailwind?

Zu Nguyen1 year ago

@figma Are these scales unified or as separated scale? Ex: color-blue-500 will have same lightness/contrast with other 500 scales

vijay verma1 year ago

@figma Scale generator have options to shift contrast, if it not matching with existing one.

Eric Alm1 year ago

@figma Super cool plugin Vijay! But how do I update a base color? So that all the shades update with it, after having done the first creation?

Related Videos

Say hello to Colors 🔥 Generate AI images with your own color palettes Pick your HEX codes or use a pre-made color palette, and get results that match your projects No more off-brand images, just the shades you actually want

Magnific

42,065 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,282 views • 2 years ago

Need help deciding which color palette to use for your designs? Designer Milan Maheshwari's Spectrum plugin can help with that. You can instantly generate color palettes and apply them to illustrations, images, interfaces, and more.

Need help deciding which color palette to use for your designs? Designer Milan Maheshwari's Spectrum plugin can help with that. You can instantly generate color palettes and apply them to illustrations, images, interfaces, and more.

Figma

94,041 views • 3 years ago

You can now generate Themes/Design Systems directly from your Figma import or any link. Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.

You can now generate Themes/Design Systems directly from your Figma import or any link. Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.

Pietro Schirano

42,888 views • 9 months ago

Check Designs: Keep every file synced to your design system with → Variable & style suggestions → Color contrast suggestions → Library mismatch detection → Detached component detection

Check Designs: Keep every file synced to your design system with → Variable & style suggestions → Color contrast suggestions → Library mismatch detection → Detached component detection

Figma

95,335 views • 5 months ago

【 Your Perfect Schedule, Your Colors. 】 A color-customizable schedule design for Vtubers. » Release Date: 29th March.

【 Your Perfect Schedule, Your Colors. 】 A color-customizable schedule design for Vtubers. » Release Date: 29th March.

shiina | aeru studio (hiatus)

99,718 views • 1 year ago

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

Matt

78,106 views • 8 months 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

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 • 8 months ago

Color contrast accessibility tools are now available in the Figma color picker! Grateful for the chance to design this, and I hope it helps contribute to more design in the world being made more inclusive. Let us know what you think!

Color contrast accessibility tools are now available in the Figma color picker! Grateful for the chance to design this, and I hope it helps contribute to more design in the world being made more inclusive. Let us know what you think!

Billy Sweeney

92,518 views • 1 year ago

Introducing Colors Panel! Now you can change or remove any specific color, or choose a color theme to completely transform your images. Available now on Grok Imagine Web.

Introducing Colors Panel! Now you can change or remove any specific color, or choose a color theme to completely transform your images. Available now on Grok Imagine Web.

Dogan Ural

18,880 views • 2 months ago

Did you know you can grab any color name, RGB value, or hex code on your screen with your Stream Deck? 🎨 Using the Color Picker plugin, just hover your mouse over a color, press the key, and then paste the value anywhere. Here's how easy it is to set up:

Did you know you can grab any color name, RGB value, or hex code on your screen with your Stream Deck? 🎨 Using the Color Picker plugin, just hover your mouse over a color, press the key, and then paste the value anywhere. Here's how easy it is to set up:

Elgato

29,821 views • 4 months 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 • 9 months ago

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

179,614 views • 4 months ago

Created this lil color generator over the weekend. There are so many algorithms to choose from for generating beautiful color palettes. Also, You can get the output as CSS, JSON, or Tailwind tokens. Check it out with sound on :)

Created this lil color generator over the weekend. There are so many algorithms to choose from for generating beautiful color palettes. Also, You can get the output as CSS, JSON, or Tailwind tokens. Check it out with sound on :)

vijay verma

182,675 views • 1 year 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

Texas AG Ken Paxton Eviscerates Democrat Senate Opponent James Talarico’s Repeated Attacks Calling Whiteness a ‘Virus’ and Claiming White Men are the Greatest Threat to the Nation: “If he believes that, why the Hell is he running? He just disqualified himself. I couldn’t disagree with him more. I don’t think skin color should be a measure of character… Any of our great leaders would have disagreed no matter their skin color, it’s not based on skin color or hair color or eye color, it’s based on character. It’s based on how you treat people. It’s based on your belief system and how you implement that. I could not disagree with him more.”

Texas AG Ken Paxton Eviscerates Democrat Senate Opponent James Talarico’s Repeated Attacks Calling Whiteness a ‘Virus’ and Claiming White Men are the Greatest Threat to the Nation: “If he believes that, why the Hell is he running? He just disqualified himself. I couldn’t disagree with him more. I don’t think skin color should be a measure of character… Any of our great leaders would have disagreed no matter their skin color, it’s not based on skin color or hair color or eye color, it’s based on character. It’s based on how you treat people. It’s based on your belief system and how you implement that. I could not disagree with him more.”

Benny Johnson

67,769 views • 8 months ago

With this Figma plugin, you can publish a responsive live website based on your desktop design!

With this Figma plugin, you can publish a responsive live website based on your desktop design!

Jan Mraz

12,652 views • 2 years ago

🎉 Just released RampenSau v1.0.0 on npm and GitHub! 🎢🐷 After some Easter weekend coding, the color palette generation library is now stable with improved docs and APIs. Generate beautiful color ramps for your data viz, design work, or generative art!

🎉 Just released RampenSau v1.0.0 on npm and GitHub! 🎢🐷 After some Easter weekend coding, the color palette generation library is now stable with improved docs and APIs. Generate beautiful color ramps for your data viz, design work, or generative art!

David Aerne

20,611 views • 1 year ago