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

  • @newyonface3700
    @newyonface370011 ай бұрын

    That was very help, Thanks alot Chetan. can't wait for the next part.

  • @GraveRave
    @GraveRave9 ай бұрын

    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.

  • @macakuaya
    @macakuaya11 ай бұрын

    Best video in youtubeto explain this!

  • @phunut6041
    @phunut60419 ай бұрын

    Thank you so much

  • @aartibandekar9520
    @aartibandekar9520Ай бұрын

    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

    @DesignPilot

    Ай бұрын

    1. You can keep the neutral colors the same. Not a problem. 2. You want to test your brand colors for accessibility

  • @aartibandekar9520

    @aartibandekar9520

    Ай бұрын

    @@DesignPilot thank you so much!

  • @blakiplops
    @blakiplops7 ай бұрын

    another way of doing this is by using an app like palettte and following the hsl curves to glean the missing colours.

  • @abdulrahmaniliyas5691
    @abdulrahmaniliyas56918 ай бұрын

    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.

  • @theafrotainer
    @theafrotainer8 ай бұрын

    Great job Chethan. can we get access to the figma file?

  • @DesignPilot

    @DesignPilot

    8 ай бұрын

    Https://learnproduct.design/designsystems

  • @VKumar914
    @VKumar91411 ай бұрын

    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

    @DesignPilot

    11 ай бұрын

    Your brand color has nothing to do with neutral colors.

  • @koushiknath8700
    @koushiknath87007 ай бұрын

    Hi Chetan vi.what about monochomatic color for ux ui design?light and dark mode?

  • @DesignPilot

    @DesignPilot

    7 ай бұрын

    What do you mean?

  • @koushiknath8700

    @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

    @DesignPilot

    7 ай бұрын

    @koushiknath8700 Well neutral colors has nothing to do with accent and brand colors

  • @Alexanderussell
    @Alexanderussell11 ай бұрын

    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

    @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

  • @ooogabooga5111
    @ooogabooga511110 ай бұрын

    xd sorry, so you already know tailwind.

Келесі