How to make a little design system with Figma (colors)
Tags: design, figma, tooling, tutorial
Published: 2022-01-29 01:27:59

Content:
1. [Create the shapes](#1-create-the-shapes)
2. [Create a component](#2-create-a-component)
3. [Create reusable colors](#3-create-reusable-colors)
4. [Choose the base colors](#4-choose-the-base-colors)
5. [Choose the main colors](#5-choose-the-main-colors)
6. [60-30-10 rule](#6-603010-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7z0u3fh4vq37iulgck7.jpeg)

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

![edit shape](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2kmklwg3tm962nyzrgi.jpeg)

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

![swatch model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3vpa62t77bvmggyoory.jpeg)

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

![crate layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o2udn1jv3606etor54s.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jafiuld8dr4b7o4caxe.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vtolq3gzkbipwxy8zs2.jpeg)

A component in Figma looks:

![component in figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zifxfgyz7m99v4p5xz6s.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieqkgx2tnbeerwxmqvj9.jpeg)

Also each instance can be individually modified.

![variant changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmjjo6trt41dpeemp7jz.jpeg)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byowavs7htdz6b5hn5gw.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ousi65tuf3l33wb9lw5.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml7hsioi4elhwaekfho5.jpeg)

## 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](https://webaim.org/resources/contrastchecker/) to get it.

Black and while are base color in my palette.
![base component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avewoc76t753t09pw94j.jpeg)

for the other colors I used [maketintsandshades.com](https://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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcvi8he1qq75104it6kw.jpeg "maketintsandshades.com")

My basic gray scale:

![gray scale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq0hqq6411qvf9h28xrl.jpeg)

Colors to facilitate interaction between the system and the user:

![system colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs396gbpc4ir7azjxxxt.jpeg)

## 5. Choose the main colors
Searching in colorhunt.com I found [these colors](https://colorhunt.co/palette/14285027496d00909edae1e7) that I liked.
These are all the colors for my projects:

![final palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94c8pejkgershu88xg2j.jpeg)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5ron47xqeu3ws6d1tdm.jpeg)

In my projects the proportion of colors will be:

![ my 60-30-10 rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wgod94a7fqfrxt5auao.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nixhqxhmn9jnkdkhsa2i.jpeg)

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.