How to create a Figma color library

Flash tutorial: How to create a Figma color library

October 3, 2018

Premise: Figma handles modern styles as symbols, even colors, characters, effects are a Master like for symbols, no longer a ruse of masks and masks to change the colors inside your libraries.
1️⃣New project -> 1st page: Colors

2️⃣ Draw squares and colors:
2.1 Main text color (dark gray or black) (Main)
2.2 Primary color
2.3 Secondary color (if the brand has it)
2.4 A very light gray almost white
2.5 A white off
2.6 Four-state colors: red, yellow, green, light blue (error, warning, success, information)
👉Go to the website It will help you extrapolate a complete palette starting from your colors.

3️⃣ Enter the main color in, take the following colors and color other squares on the table:
3.1 Get 3 lighter variations of the Main Color (to have a main active, a secondary and a color for the disabled)
3.2 Get 3 lighter variations of the primary + one more saturated (for the buttons of any link, default, hover or disabled)Now you should have a result similar to that of the photo

4️⃣ Click on the color, on the right in Figma and click on the four squares before + in FILL, click + and create the style, assign a name to the color and continue in this way for all the selected colors.

5️⃣Click anywhere in the project and on the right side you will see all the styles created, put them in order (it is optional but it is more beautiful ahaha)

6️⃣ By clicking on the book at the top right, enable the library so you can use it in other projects