3.3 Typography

In the Figmaster - Lessons Figma file, open the 3.3 Typography page.

Introduction

It's time to document the typography styles that we use in our design system. In this chapter, we will combine the Documentation Page component and Table component.

Plugins in this chapter

Change text

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 Typography.
  4. Inside the Header, change the Page title text to Typography.
  5. Select the Button inside the Header.
  6. Hide it (in the Layer panel Eye icon 👁 or CTRL + SHIFT + H).
  7. Below, in the Content group, change the Group title text to Text Styles.

Step 2. Table

  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 9 Table Rows. 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, Font size, Line height, Sample.
  7. Select the Sample table header and all Table Cells below it. Remember that you can hold CTRL + SHIFT to keep them all selected.
  8. Resize these elements to be 480 px wide.
  9. Press Enter to select all text elements inside.
  10. Change their fill to Neutral/100.
  11. Having them selected, open the Change text plugin. Remember that the Figmaster plugin will close, but you can find these instructions in Figma too.
  12. In the New value field, type in Almost before we knew it, we had left the ground and press Enter.

Step 3. Styles

OK, time to document our styles!

  1. Change the text of the first Table cell on the left in the Table Row to Text S / Regular.
  2. In the next table cell on the right, change the text to 12 px.
  3. In the next table cell on the right, change the text to 16 px.
  4. In the last table cell, change the style of the text to Text S / Regular.
  5. Repeat the action for the rest of the fields in the table and document all text styles. If you are stuck, you can check the solutions file.

Continue to the next lesson after you finish documenting all styles.

PreviousNext