![Design Systems with React & Storybook](https://static.frontendmasters.com/assets/courses/2020-05-12-design-systems/thumb.webp)
Check out a free preview of the full Design Systems with React & Storybook course
The "Creating a Color Palette" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:
Emma demonstrates how to create an account on Figma, the design tool for the course, and how to create a monochromatic color palette.
Transcript from the "Creating a Color Palette" Lesson
[00:00:00]
>> If you are following along in my speaker notes, you can go here to creating a color palette. And there's a link. It's at the end of the sentence. I've created a starter file for you to use. This is gonna be with Figma. We are gonna log into Figma.
[00:00:13]
I've created a starter file so you don't have to do all of the setup for yourself. Well, look, all the people okay, listen, [LAUGH] I didn't know that iwas there. You're gonna see on the left hand side, it's a little small. On the left hand side, we've got our different pages, okay?
[00:00:28]
What I want you to do is open Figma, I'll do this with you right now, and go to figma.com. In the top right, there's this little plus icon. Click that, it's gonna create a new project for you, okay? Once you've created a new project, go back to this template, my gosh, look at all the people, that's so cute.
[00:00:45]
We're gonna copy these artboards. These things here are called artboards, okay? I'm gonna just hit Shift and click these and hit Cmd + C, and go into my little project here. All right, in the top left, you see this page, this page drop-down here. When you expand it, there's a plus icon where you can add new pages.
[00:01:05]
I'm gonna change the name of this by just double clicking on this, and I'm gonna call this Colors. So Cmd + C on those art boards in the template here, and Cmd + V, and now you've got a copy of that on your own project. We're gonna do that with these pages here, y'all please don't create pages in the template.
[00:01:22]
I have a backup in case something goes wrong, but please don't create pages here. You're gonna create your own project, okay? So highlight those artboards, Cmd + C and Cmd + V. Let's just grab them all, so create new pages in your own project. Let's create a type scale, typography page, typography is a hard word to spell.
[00:01:44]
We've got buttons, We've got text fields, And then we've got modsls which there's nothing in, so we're just gonna create a page called modals. Okay, this is what it's gonna look like. This is mine, okay? So, if you notice I've left these gray, and that's because you're gonna fill them in with your own color palette.
[00:02:15]
I chose this dark blue. It's a little boring, but you can choose a fun palette. So I'm gonna have you go to coolors.co C-O-O-L-O-R-S.co. Okay, this is a color scheme generator. So when you're there, click this big blue button that says start the generator, and I'm gonna have you choose a monochromatic palette just so this goes a little bit easier.
[00:02:38]
So if you go actually to this little settings wheel here, it's a little small. If you click Settings, there's actually a monochromatic option. So turn on that toggle, it's only gonna give you monochromatic color palettes. And then you can actually press the space bar to look through some of these different color palettes.
[00:02:56]
If you find a color that you like, like let's say I like this purple, you can click it, it'll lock it. So it'll keep that one and just generate new palettes based on that shade. So what I'm gonna have you do is just find one that you like.
[00:03:08]
You can go back and change this later if you want. Let's say I wanna choose, That one's a little brIght. I'm gonna choose this one.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops