3.10 Button

In the Figmaster - Lessons Figma file, open the 3.9 Button page.

Plugins in this chapter

Similayer

Step 1. Page

  1. Paste the Badge page on the canvas.
  2. Change the name of the frame and header title to Button.
  3. Readjust Menu items states.
  4. Link to 2.3 Button page in the Header's Button.
  5. Change the Component text in the Content group to Component: Size Normal.
  6. Duplicate the Component: Size Normal text.
  7. Change the new copy's text to Primary.
  8. Change its text style to Heading/S.

Step 2. States - Size Normal

Part 1. Primary

  1. Delete each Badge component in Wrapper groups.
  2. Change the text label in each Component Wrapper:
  3. Primary to Default.
  4. Danger to Hover.
  5. Info to Focused.
  6. Success to Pressed.
  7. Warning to Disabled.
  8. In the Assets panel, find the Button and drop it in each Wrapper.
  9. In the Variants panel, change the State for each Button component to match its Component Wrapper's label.
  10. Select each Wrapper in Component Wrapper.
  11. Press CTRL + D two times to duplicate the Wrappers to the bottom.
  12. Select the second row of Wrappers and press Enter to select all button components inside.
  13. In the Variants panel, change their Content property to Icon Text.
  14. Select the third row of Wrappers and press Enter to select all button components inside.
  15. In the Variants panel, change their Content property to Icon Only.

Part 2. Secondary

  1. Duplicate the Primary heading.
  2. Move it below the Component States group with the Down Arrow key.
  3. Change its text to Secondary.
  4. Duplicate the Component States group.
  5. Move it below the Secondary heading with the Down Arrow key.
  6. Select all Wrappers and press Enter to select all button components inside.
  7. In the Variants panel, change their Type property to Secondary.

Part 3. Outlined

  1. Duplicate the Secondary heading.
  2. Move it below the Component States group with the Down Arrow key.
  3. Change its text to Outlined.
  4. Duplicate the Component States group.
  5. Move it below Outlined heading with the Down Arrow key.
  6. Select all Wrappers and press Enter to select all button components inside.
  7. In the Variants panel, change their Type property to Outlined.

Part 4. Danger and Text

Repeat the action for Danger and Text Buttons.

Step 3. States - Size Big

  1. In the Layers panel, select the Group layer (Header + Content > Content > Group).
  2. Duplicate it with CTRL + D. The new Group will be created below.
  3. Having the new Group selected, drag it outside the Button page.
  4. In the new Group copy, change the heading from Component: Size Normal to Component: Size Big.
  5. Open the Similayer plugin. The Figmaster plugin will close, but you will find the instructions for this step in Figma too.
  6. Select the Button / Primary / Default inside the Group outside the page (the first one in the top left corner).
  7. In the Similayer plugin UI, select the Limit selection within root frame checkbox (bottom right corner).
  8. In the left panel, find the Other variants property and click on it.
  9. Press the Select layers button. All button variants within the Group frame will be selected.
  10. In the Variants panel, change the Size property to Big.
  11. Select the Group and cut it CTRL + X.
  12. Paste it inside the Button page in the Content group under Group.

Summary

Awesome work! The methods you just learned in the last three chapters should help you practice creating documentation for the rest of the components. Next, open the Figmaster Design System and try to recreate some of the documentation pages by yourself. Recreating Card, Checkbox, Dropdown, and Input pages will be a great practice.

PreviousNext