2.3 Button

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

Introduction

Buttons are clickable items used to perform an action. In this chapter, we'll create buttons. Lots of them! I bet you've made buttons in Figma previously, but I want to show you my way of doing this. You'll learn how to create button states and variants quickly.

Level up! In this chapter, I will skip the common keyboard shortcuts we have used in the previous lessons. I bet you remember them now. If not, check the keyboard shortcuts sections at the bottom to recall them.

Plugins in this lesson

Similayer

Button: Size Normal

Step 1. Base

Standard procedure. First, we will create the base for our button component. Then, we'll duplicate it to create states and different variations. Let's go!

Part 1. Text Only Button

  1. Create a text layer with a Button text inside.
  2. Apply the Text M/Medium style.
  3. Group it and apply the Auto Layout.
  4. Rename it to Button / Text Only / Normal.
  5. Change the Auto Layout settings to:
  6. Padding Right and Left: 16 px.
  7. Padding Top and Bottom: 6 px.
  8. Alignment: Center - Center.
  9. Spacing between items: 4 px.
  10. Apply the Corner radius of 4 px.
  11. Apply the colors:
  12. Primary / Main to Button's background.
  13. Neutral / 10 to Button's text.
  14. Apply the Effect: Shadow 1.

Part 2. Icon Text Button

  1. Duplicate the Button 32 px to the bottom.
  2. Rename the new copy to Button / Icon Text / Normal.
  3. In the Assets panel (ALT + 2) search for Icon / BellSimple.
  4. Drop the Icon inside the Button on the left.
  5. Resize the Icon to 16x16 px.
  6. Change the Icon's color to Neutral / 10.

Part 3. Icon Only Button

  1. Duplicate the Button / Icon Text / Normal 32 px to the bottom.
  2. Rename the new copy to Button / Icon Only / Normal.
  3. Remove the text layer from the latest copy.
  4. Resize the Icon, so it's 20x20 px.
  5. In the auto layout settings:
  6. Change the padding to 6 px (all sides).

Step 2. Button States

Great job! We have the base ready. Time to create states for our buttons.

Part 1. Default state

  1. Select all buttons and align them to the left (ALT + A).
  2. Having them selected, press CTRL + R to open the Rename modal.
  3. Click in the Rename to input and press the Current name button.
  4. Then type in / Primary / Default so you will have $& / Primary / Default in there. Press Enter.
  5. Select all three buttons and duplicate them 48 px to the right.

Part 2. Hover state

  1. Select three new buttons on the right.
  2. In the Selection colors panel, change the Primary / Main color style to Primary / Hover.
  3. Having all three buttons selected, open the Rename modal.
  4. In the Match (optional) field, type in Default.
  5. In the Rename to field, type in Hover and press Enter.
  6. Duplicate these three buttons 48 px to the right.

Part 3. Focused state

The Button with a focused state needs to be grouped because we need to add an outline stroke. Since the Outlined Button will have a stroke itself, we need an extra group so we can have two strokes.

  1. Select three new buttons on the right.
  2. Remove the shadow effect.
  3. Open the Rename modal.
  4. In the Rename to field, type in Button and press Enter.
  5. Select the first Button on the top and group it.
  6. Apply the auto layout.
  7. Change its name to Button / Text Only / Normal / Primary / Focused.
  8. Select the second Button and group it.
  9. Apply the auto layout.
  10. Change its name to Button / Icon Text / Normal / Primary / Focused.
  11. Select the third Button and group it.
  12. Apply the auto layout.
  13. Change its name to Button / Icon Only / Normal / Primary / Focused.
  14. Select all three Focused buttons.
  15. Set their Corner radius to 5 px.
  16. Having them three selected, apply 3 px Primary/Focus Outside stroke.

Part 4. Pressed state

  1. Select three Hover buttons.
  2. Duplicate them 48 px to the right of the Focused buttons.
  3. In the Selection colors panel, change the Primary / Hover color style to Primary / Pressed.
  4. Having all three buttons selected, open the Rename modal.
  5. In the Match (optional) field, type in Hover.
  6. In the Rename to field, type in Pressed and press Enter.
  7. Remove the Shadow 1 effect.
  8. Duplicate these three buttons 48 px to the right.

Part 5. Disabled state

  1. Select three new buttons on the right.
  2. In the Fill panel, change the color style to Neutral/30.
  3. In the Stroke panel, add a 1 px Neutral/40 Inside stroke.
  4. In the Selection colors panel, change the Neutral/10 color style to Neutral/60.
  5. Having all three buttons selected, open the Rename modal.
  6. In the Match (optional) field, type in Pressed.
  7. In the Rename to field, type in Disabled and press Enter.

Step 3. Variants

Part 1. Secondary Button

  1. Select all 15 buttons.
  2. Duplicate them 64 px to the bottom.
  3. Open the Rename modal.
  4. In the Match (optional) field, type in Primary.
  5. In the Rename to field, type in Secondary and press Enter.
  6. Select all new buttons.
  7. In the Selection colors panel, change all Primary colors (excluding Primary/Focus) into Primary / Surface.
  8. Select all Secondary - Default Buttons.
  9. In the Selection colors panel, change the Neutral/10 style to Primary/Main.
  10. Select all Secondary - Hover and Focused Buttons.
  11. In the Selection colors panel, change the Neutral/10 style to Primary/Hover.
  12. Select all Secondary - Pressed Buttons.
  13. In the Selection colors panel, change the Neutral/10 style to Primary/Pressed.

Part 2. Outlined Button

  1. Select all Primary (the first 15 we created) buttons.
  2. Duplicate them 64 px to the bottom below the Secondary buttons.
  3. Open the Rename modal.
  4. In the Match (optional) field, type in Primary.
  5. In the Rename to field, type in Outlined and press Enter.
  6. Select all Outlined - Default Buttons.
  7. In the Selection colors panel, change the Neutral/10 style to Neutral/100.
  8. In the same panel, change the Primary/Main to Neutral/10.
  9. In the Stroke panel, add a 1 px Neutral/40 Inside stroke.
  10. Select all Outlined - Hover Buttons.
  11. In the Selection colors panel, change the Neutral/10 style to Neutral/100.
  12. In the same panel, change the Primary/Hover to Neutral/20.
  13. In the Stroke panel, add a 1 px Neutral/40 Inside stroke.
  14. Select all Outlined - Focused Buttons and press Enter to select groups inside.
  15. In the Selection colors panel, change the Neutral/10 style to Neutral/100.
  16. In the same panel, change the Primary/Hover to Neutral/20.
  17. In the Stroke panel, add a 1 px Primary/Main Inside stroke.
  18. Select all Outlined - Pressed Buttons.
  19. In the Selection colors panel, change the Neutral/10 style to Neutral/100.
  20. In the same panel, change the Primary/Pressed color to Neutral/30.
  21. Add an Inside stroke of 1 px with a Neutral/50 color style.

Part 3. Danger button

  1. Select all Primary (the first 15 we created) buttons.
  2. Duplicate them 64 px to the bottom below the Outlined buttons.
  3. Open the Rename modal.
  4. In the Match (optional) field, type in Primary.
  5. In the Rename to field, type in Danger and press Enter.
  6. In the Selection colors panel, change the color styles accordingly:
  7. Primary/Main to Danger/Main.
  8. Primary/Hover to Danger/Hover.
  9. Primary/Pressed to Danger/Pressed.

Part 4. Text Button

  1. Select all Secondary buttons.
  2. Duplicate them 64 px to the bottom below the Danger buttons.
  3. Open the Rename modal.
  4. In the Match (optional) field, type in Secondary.
  5. In the Rename to field, type in Text and press Enter.
  6. Select all Text / Focused buttons and press Enter to select the groups inside.
  7. In the Fill panel, click on the minus icon to remove the Fill style.
  8. Select all Text buttons, EXCLUDING the Focused state.
  9. In the Fill panel, click on plus Icon and remove the style that appeared with a minus icon.
  10. Remove the stroke with a minus icon.
  11. Remove the Shadow 1 effect.

Button: Size Big

You are doing great! It's time to create Big button variants. I will show you a quick way, so we don't have to repeat ourselves!

Step 4. Big buttons

Part 1. Base

  1. Select all buttons we've just created.
  2. Duplicate them, so all new copies are 96 px below the Normal buttons.
  3. Having them all selected, open the rename modal.
  4. In the Match (optional) field, type in Normal.
  5. In the Rename to field, type in Big and press Enter.
  6. Having them all selected, press Enter three times.
  7. Change their Text style to Text L/Medium.
  8. Having all Big Buttons selected, press CTRL + X to cut them.
  9. In the Pages panel on the left, create a Big Buttons page.
  10. **Open **the page and Paste Big buttons on the canvas.

We had to move our Big Buttons to a different page because the plugin would also select Normal Buttons and we don't want that.

Part 2. Plugin

Remember that the Figmaster will close after you open the Similayer plugin. You will find the instructions in Figma too.

  1. Open the Similayer plugin.
  2. Select the Button / Text Only / Normal / Primary / Default (the first one on the top left).
  3. In the Similayer plugin UI, in the left sidebar, and find the Padding property and click on it.
  4. The press Select layers button.
  5. The plugin will close, and all buttons (excluding Icon Only) will be selected.
  6. In the Auto layout panel, change their Top and Bottom Padding to 8 px.
  7. Repeat the action for Icon Only buttons where their padding (all sides) is set to 10 px.
  8. Select all Big buttons and cut them CTRL + X.
  9. Paste them and move 96 px below the Normal buttons on the 2.3 Button page.

Step 5. Components and variants

  1. Select all buttons.
  2. Click on Create multiple components in the Component dropdown menu at the top center of Figma UI.
  3. Click on Combine as variants in the Variants panel.
  4. Rename the Property 1 label to Content.
  5. Rename the Property 2 label to Size.
  6. Rename the Property 3 label to Type.
  7. Rearrange the Types with your mouse in the following order: Primary, Secondary, Outlined, Danger, Text.
  8. Rename the Property 4 label to State.
  9. Rearrange the Types with your mouse in the following order: Default, Hover, Focused, Pressed, Disabled.

Fantastic job! You've just created a button component with a lot of variants! As you can see, we've used some tricks to save our time on repetitive tasks. Using the Selection colors panel, Rename modal, and plugins make our job easier. Keep that in mind! Let's proceed to the next chapter.

PreviousNext