Creating a Color System in Figma | 3 Easy Methods
Вставка
- Опубліковано 6 сер 2024
- Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!
👉 howtodesignbetter.com/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 👇
howtodesignbetter.com/bundles
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 👇
howtodesignbetter.com/design-...
For website designers & freelancers 👇
howtodesignbetter.com/web-des...
My Figma Mastery video course 👇
howtodesignbetter.com/figma-m...
----------------------------------------------
Connect with me 👋
Instagram - / uiadrian
Twitter - / uiuxadrian
Linkedin - / adrian-kuleszo
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! - Навчання та стиль
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
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.
Glad I could help Siva! Thanks 😊
Thanks for this walkthrough! It's helpful to understand these approaches for generating tints and shades in Figma.
Great work Adrian, I was looking for how to make an effective color system and you covered most of it.
Brilliant! Thank you for sharing
Great! Thanks!
Amazing!Thank you
Another super useful tutorial ! Thank you so much, keep going ! 🤩🙏
Thanks a lot! I’ll start posting more very soon 😁🙌
Keep making this content bro, it really helps
All your contents are valueable
Just wow its the perfect video about creating a color design thank you, sir
Adrian, you rocks man!!
Wiiiiiiiii thanks! I needed this!! 😄❤
Glad I could help Rahul! 👋
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.
Thank you for sharing
Um tutorial muito bom!!! Foi passado mais de uma solução para a criação de paletas e bem explicadas, muito bom!
Simple and educative 💯
Thanks a lot! Glad you liked it 🤝
Thanks for the simple sweet tutorial
My pleasure! :)
Thank you so much Adrian!!!
My pleasure brother! 🙌
Excellent. I'm following you..🧡
Thank you adrin for joining on UA-cam and share your knowledge 😊
Having a lot of fun for sure! 😊
Nice!
Thanks a lot mate!
No worries! 😁
Thanks bro
Cool...👍🏻 I'm more interested what primary color stands for in design. I usualy use accent color as accent, buttons, some text, icons... 🤔
Genius teachings
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!
Yes, that’s a great idea! I’ll start planning a typography tutorial ✌️
It will be great to include two or three fonts and show how to make font styles with them in projects when you need different font families. Maybe you can use the tailwind scale and token exports? 🙂
Typography next! And naming files with handoff in mind. Thanks
Adrian is amazing!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Good evening Adrain. What is the plugging you used for the Auto method? 🙏🏻
This tutorial is really helpful Adrian 😀Also please make tutorial on full website landing page prototype
For sure, there are a ton of prototype tutorials lined up for the next few weeks :)
Great 😃
Yes please create a style guide video 😅
Hi Adrian,
Great video to begin with color systems! One thing bugs me a little bit. Basically, my primary color's saturation begins with the value of 80 so when I create color system based on your tutorial, it allows me to change the saturation level only for the next two colors. Is there any rule of thumb which says that a color saturation can not be the same as the previous one? Should I simply decrease the S/L value from 10 to 5 for instance?
This is my RGB: #C51617
Thank GOD for plugin automations 😩 😩 😩 Watching you manually create the 1st color palette system made my soul hurt 😅
Can you elaborate how to choose a primary color?
Positive: Great content!
Not positive: Sound only comes from left side in this video.
Do you have Full course in Udemy?
🎯 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
Brother can you make video for spacing
For sure! I will think of one for the next week
Hi❤, where's the follow up video..!!?
The video is good but the audio is only played on my left ear.
Don't waste time. Skip to 00:31
My dude, now I know why my Android phone only offers me only those ugly-ass pastel toned color schemes... I'll keep my distance from Material Design 3 color system, for sure, god damn
I used to have a great dark themed UI with a vibrant orange as accent, I miss that a lot as it's my favorite overall scheme. Now I have this dark theme with this lame-ass baby blue barely bright enough, as the orange tends more to a brown. What a pity
Thank you soo much sir for sharing with us
Of course! Happy to share 😊✌️