Creating a Color System in Figma | 3 Easy Methods

Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!

In this video, I'm going to show you 3 easy ways to create color palettes and generate color systems in Figma. Enjoy!

Grab my product bundles below 👇

Timestamps:
00:00 - Intro
01:00 - First Method
06:10 - Adding Global Styles
08:05 - Color Palette Example
10:20 - Second Method
12:51 - Third Method
14:57 - New Bundle Deal
15:34 - Outro

----------------------------------------------

P.S. If you're interested in learning UI/UX design feel free to check out my Figma course and design ebooks!

For mobile designers 👇

For website designers & freelancers 👇

My Figma Mastery video course 👇

----------------------------------------------

Connect with me 👋

Thanks for dropping by my channel - if you enjoy what you see, feel free to subscribe and hit that bell notification, and I promise to bring you a ton of free value every week!

[wsfunk]

Thanks for this walkthrough! It's helpful to understand these approaches for generating tints and shades in Figma.

[mohammedgilani]

Great work Adrian, I was looking for how to make an effective color system and you covered most of it.

[bobdaawid]

Wow honestly this is so valuable for one video

I have been confused about ways to create a good color palette but thanks to you and this video I am not again. Thank you so much

[sivasakthiv]

I've been waiting, search for so much resources to learn how to define colors. Most of them were vague. This is it, feels like I found the right one. Big fan of your works Adrian. Lots of love.

[smileyface]

Another super useful tutorial ! Thank you so much, keep going ! 🤩🙏

[priyanshukunwar]

Keep making this content bro, it really helps

[zizou]

Just wow its the perfect video about creating a color design thank you, sir

[kuwnone]

Um tutorial muito bom!!! Foi passado mais de uma solução para a criação de paletas e bem explicadas, muito bom!

[YOGESHGARGOfficial]

Such an Informative Video, search numerous videos on Colors found very usefull. Your video clear all of my doubts. I would also like to see the video on style guide as a follow up.

[tusharsadaf]

Thank you adrin for joining on YouTube and share your knowledge 😊

[RLNDcaST]

Cool...👍🏻 I'm more interested what primary color stands for in design. I usualy use accent color as accent, buttons, some text, icons... 🤔

[joanerhabor]

Typography next! And naming files with handoff in mind. Thanks

[_Afuwa]

Good evening Adrain. What is the plugging you used for the Auto method? 🙏🏻

[chizzy]

Yes please create a style guide video 😅

[soumyajitdutta]

🎯 Key Takeaways for quick navigation:

00:00 🎨 Creating a well-balanced color palette enhances user experience and establishes brand identity.
00:27 🖌️ Different methods to create color systems based on project size, scope, and complexity.
01:07 🎨 Creating a basic color palette with primary, secondary, neutral, black, and white colors.
02:17 🎨 Organizing color shades and tints for flexibility and design variations.
06:13 🔗 Creating global color styles in Figma for efficient design consistency.
07:50 📝 Documenting color tokens and palettes for handoff and developer communication.
11:20 🌐 Automating color palette generation using Figma plugins for efficiency.
12:53 🛠️ Utilizing Material Theme Builder for automated color system creation.
14:11 🔄 Editing and updating color styles in Figma to maintain design consistency.
15:06 📚 Additional resources and design products for learning and enhancing skills.

Made with HARPA AI

[arpitaduttachakraborty]

Thank you for this tutorial Adrian... Could you create a video on how to choose a typeface or pair two typefaces together in a design? Thanks a lot!

[wilbertdune]

Can you elaborate how to choose a primary color?

[MrMyers]

Thank GOD for plugin automations 😩 😩 😩 Watching you manually create the 1st color palette system made my soul hurt 😅

[radhynesh]

Positive: Great content!
Not positive: Sound only comes from left side in this video.

[chandreshvadhel]

This tutorial is really helpful Adrian 😀Also please make tutorial on full website landing page prototype