How to Create a Neutral Color Palette for a Design System - Figma Tutorial
Фильм және анимация
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video, I'm going to dive into creating a Neutral color palette. We'll start by examining the colors used by Uber. Then, we'll organize and arrange the colors, filling in any missing spots. Finally, we'll create Figma variables for each color, ensuring easy customization in the future.
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 The Super Ultimate Guide to Design Systems: learnproduct.design/designsys...
🔗 - • Ultimate Guide to Figm...
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
01:12 Understanding Uber's Neutral Palette
02:09 Extracting Colors from Airbnb Screens
08:47 Mapping Colors with Tailwind CSS Colors
15:37 Using Material Design Palette Generator
16:19 Creating and Applying Variables to Swatches
-----------------------------------------
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #productdesign #figmatutorial
Пікірлер: 20
That was very help, Thanks alot Chetan. can't wait for the next part.
Thank you for explaining this currently taking another online course about variables, but the teacher doesn't go into depth or articulate it like you do.
Best video in youtubeto explain this!
Thank you so much
Super Insightful! Can we keep the same neutral colour palette for all our projects? Do we need to use the hue from the primary colours to get our greys? While selecting the palette how do you ensure a contrast above 4.5 and accessibility along with the brand colours? Thank you in advance!
@DesignPilot
Ай бұрын
1. You can keep the neutral colors the same. Not a problem. 2. You want to test your brand colors for accessibility
@aartibandekar9520
Ай бұрын
@@DesignPilot thank you so much!
another way of doing this is by using an app like palettte and following the hsl curves to glean the missing colours.
Nice Lecture. I tried it and it was great. but I noticed it is stored in my libraries. How do I delete it permanently in case I want to do something or make adjustments. How do I delete it from my library? Thanks for the response.
Great job Chethan. can we get access to the figma file?
@DesignPilot
8 ай бұрын
Https://learnproduct.design/designsystems
Thanks Chetan for awesome content. I have a query related to neutral color palette. How can I create neutral color palette manually my brand color is dark red #A2201C.
@DesignPilot
11 ай бұрын
Your brand color has nothing to do with neutral colors.
Hi Chetan vi.what about monochomatic color for ux ui design?light and dark mode?
@DesignPilot
7 ай бұрын
What do you mean?
@koushiknath8700
7 ай бұрын
@@DesignPilot i was reading book the practical ui by MR.Adham Dannway he has mentioned there mono color best for ui design.so what do you think about that? waiting for your reply
@DesignPilot
7 ай бұрын
@koushiknath8700 Well neutral colors has nothing to do with accent and brand colors
Chetan, can you explain why you need 10 neutral colors? Why couldn’t you just use the 6 colors you extracted for your neutral ramp?
@DesignPilot
11 ай бұрын
Good question. The way it works is, Airbnb could have selected those 6 colors only if they had the 10 colors to start with. I’m just reverse engineering because I don’t have their 10 Color palettes. Also you will need them for various states like hover and pressed and even dark mode as well. A lot of colors will be used in dark mode
xd sorry, so you already know tailwind.