3.4 Color

In the Figmaster - Lessons Figma file, open the 3.4 Color page.

Step 1. Page

  1. Drop the Documentation Page component from the Assets panel on the canvas.
  2. Select it and Detach instance (CTRL + ALT + B).
  3. Rename it to Color.
  4. Inside the Menu, select the Typography item.
  5. Change its State from Active to Default.
  6. Inside the Menu, select the Color item.
  7. Change its State from Default to Active.
  8. Inside the Header, change the Page title text to Color.
  9. Select the Button inside the Header.
  10. Hide it.
  11. Below, in the Content group, change the Group title text to Color Styles.
  12. Duplicate the Color Styles text layer (CTRL + D).
  13. Change the copy's text to Neutral.
  14. Change the text style of the Neutral text to Heading/S.

Step 2. Table

Part 1. Base

  1. Grab the Table component from the Assets panel.
  2. Drop it inside the Group frame in the Header + Content frame.
  3. Select the Table and Detach instance (CTRL + ALT + B).
  4. Redesign the Table, so it has 4 Columns and 1 Table Row. Look at the screenshot in Figma.
  5. Select the Table and set its Resizing (width) property to Fill container.
  6. Rename the Table headers in the following order (from left to right): Style name, Hex code, Sample, Usage.

Part 2. Sample Cell

  1. Select the Table cell under Sample Table Header.
  2. Detach instance (CTRL + ALT + B).
  3. Create the rectangle inside this Table cell with the following properties:
  4. Size: 20x20 px.
  5. Corner radius: 6px.
  6. Fill: FFFFFF.
  7. Stroke: 1 px Inside with the color set to #000000 15%.
  8. Layer Name: Sample.
  9. Delete the text layer inside the Table Cell.

Part 3. Rows

  1. Select the whole Table Row.
  2. Duplicate it, so there are ten rows in total.
  3. Select the Divider under the Table Header Row.
  4. Duplicate it, so it's between each Table Row.

Step 3. Neutral Styles

OK, time to document our styles!

  1. Change the text of the first Table cell on the left in the Table Row to Neutral/10.
  2. In the next table cell on the right, change the text to FFFFFF.
  3. In the next table cell on the right, change the color fill to Neutral/10.
  4. In the last table cell, change the style of the text to Neutral background, white text.
  5. Repeat the action for the rest of the fields in the table and document all Neutral color styles. Remember that we have descriptions for each Neutral color style, and you can find them in the style properties. If you are stuck, you can check the solutions file.

Continue to the next step after you finish documenting all neutral styles.

Step 4. Primary Styles

  1. Select the Neutral title above the Table.
  2. Duplicate it.
  3. Move it below the Table with the Down Arrow key.
  4. Change its text to Primary.
  5. Select the Table and duplicate it.
  6. Move it below the Primary title with the Down Arrow key.
  7. Remove the Usage Table Header and all Table cells below it (we don't need to explain usage here because our style names suggest the usage).
  8. Remove the Table Rows, so there are 6 in total.
  9. Change the text of the first Table cell on the left in the Table Row to Primary/Main.
  10. In the next table cell on the right, change the text to 4F31E4.
  11. In the next table cell on the right, change the color fill to Primary/Main.
  12. Repeat the action for the rest of the fields in the table and document all Primary color styles. If you are stuck, you can check the solutions file.

Step 5. Remaining Styles

Repeat the action for the rest of the styles using the method from Step 4.

Great work! Let's continue to the next chapter.

PreviousNext