As a follow-up to my previous video on setting up guides in Figma, I wanted to take a step back and walk you through my process when creating a new design for a website mockup. One of the very first things I do is create my color palette and set up my color styles. This makes the design process easier and helps transition seamlessly from Figma to the web.
Step 1: Organize Your Figma File
When starting in Figma, by default, you’ll have just one page. I like to create two separate pages: one for my Working Design and another for Assets. This keeps my design page uncluttered and allows me to store my color palette, logos, and other assets on the separate Assets page.
Step 2: Create Your Color Palette
On the Assets page, start by creating a frame using the F key. This will be the space where you lay out your color palette. For my designs, I prefer to use circles to represent different colors.
I typically start with a Primary Color, a Secondary Color, and a range of Neutrals. For example, I might use my brand colors:
- Primary Color:
#F115A26 - Secondary Color:
#3FA9F5
Step 3: Generate Tints and Shades
To expand on your color palette, use a tool like Make Tints and Shades. Enter your hex code, and it will generate 10 tints and 10 shades for you.
Once you have your tints and shades, you can duplicate your primary color and start pasting in the hex codes for darker and lighter variations. Use Option + Shift to duplicate your circles and Command + D to repeat the last action.
For example, you might want a darker version of your primary color, a middle tone, and a very light color. Repeat this process for your secondary color.
Step 4: Add Neutrals
For your neutral palette, you’ll need a range from black to white. While using Make Tints and Shades, you can input #000000 for black and use the tints to generate a gradient of shades from black to white. I prefer to add more options in between, like #808080 as a middle hue, to give a more gradual transition from black to white.
Now, create your neutral color circles, starting with a light gray, then a medium gray, dark gray, and so on.
Step 5: Create Global Color Styles
Now that your palette is set, it’s time to save these colors as global styles. Select your first primary color, go to the Fillpanel on the right, and click the four dots. At the top of the pop-out panel, click the Plus sign to create a new style. Name it something intuitive like “Primary Color” and hit Create Style.
Repeat this process for all your colors, naming them based on their role in your design. For example:
- Primary Color: “Primary Color”
- Darker Primary: “Primary Dark”
- Lighter Primary: “Primary Light”
- Neutral: “Light Gray,” “Dark Gray,” etc.
Step 6: Use Color Styles in Your Design
Once your styles are set, switch back to your Working Design page. Now, when creating design elements like buttons or cards, you can easily apply your color styles. For example, select a button and set the background to “Secondary Dark” and the text to “Secondary Extra Light.”
The best part of using global color styles is that if you need to change a color, you can do so once, and it will update across your entire design. For instance, if you decide that your dark blue button isn’t working, simply edit the “Secondary Dark” style, and all elements using that style will automatically update.
And that’s it! You’ve now set up global color styles in Figma, which will help streamline your design process and make your workflow more efficient as you transition from Figma to the web.
