DEV Community

Jeison Daza
Jeison Daza

Posted on

How to make a little design system with Figma (colors)

Content:

  1. Create the shapes
  2. Create a component
  3. Create reusable colors
  4. Choose the base colors
  5. Choose the main colors
  6. 60-30-10 rule

Hello! On this day I will continue the series little design system with Figma. Today I will share how to create components and color palette.

1. Create the shapes

Working with UI elements as components gives us many advantages when we have to reuse them in our design.
To start we need to create simples shapes.

crate shape

We can edit the shape's properties in the right panel.

edit shape

In my case, this shapes are color swatches, they include color, contrast ratio, hexadecimal code, name and a dot for distinction.

swatch model

It's a good practice sets auto layout behavior to main parts of our shape.

crate layout

The Auto Layout option allows you to structure components or frames in such a way that they can grow automatically, making a container adapt to the size of its contents, or vice versa.

auto layout options

When set it gives us some functionality similar to display:flex in CSS. We can configure direction of the items, space between them, padding and alignment.

2. Create a component

Once we have nested our initial shape, we can create a component.

creation of component

A component in Figma looks:

component in figma

The awesomeness and power of Figma components allow us to create multiple instances of our component and modify them all by modifying the parent they came from (the parent component is marked whit four full-color diamond, while it instance is a only bordered diamond).

centralized components

Also each instance can be individually modified.

variant changes

3. Create reusable colors

To reuse colors we need set it as styles in tow steps:

First, we need to select the component part and set it the desired color.

select a color

Then, click on four-dots bottom, then on plus symbol and finally set a name to new color style. If you want to have your colors organized, follow the schema group name/item name.

create style

It is possible to edit a color style clicking on the work space to view all styles, then click on the settings icon.

edit styles

4. Choose the base colors

It's time to customize the instances. As I am making a color palette is a good practice to have into account the contrast ratio for purposes of accessibility and good visualization, I used webaim.org to get it.

Black and while are base color in my palette.
base component

for the other colors I used maketintsandshades.com, a tint and shape generator. My project is small so I only get five variations: the picked tone, two light and dark levels.

maketintsandshades.com

My basic gray scale:

gray scale

Colors to facilitate interaction between the system and the user:

system colors

5. Choose the main colors

Searching in colorhunt.com I found these colors that I liked.
These are all the colors for my projects:

final palette

6. 60-30-10 rule

This rule is for interior design to calculate the percentage of colors, but it can also be used for user interface design.

60-30-10 rule example

In my projects the proportion of colors will be:

 my 60-30-10 rule

The result of the palette is not important in itself, it's only a visual guide. The most matter is the resulting library of colors.

libraty of colors

In future posts I will show how to share and reuse these colors in others Figma projects.

And this way we come to final of this post. The next post will deal with fonts.
Thank you for reading.

Discussion (4)

Collapse
bhavyashah profile image
Bhavyashah

Quite Interesting

Collapse
jeisondaza21 profile image
Jeison Daza Author

Yes it is

Collapse
lico profile image
SeongKuk Han

60:30:10 Rule, I got something to say when I talk with designers. Thank you for sharing the good post!

Collapse
jeisondaza21 profile image
Jeison Daza Author

I'm glad you liked it