2.13 Switch

In the Figmaster - Lessons Figma file, open the 2.13 Switch page.

Introduction

A switch is used to switch between two possible states quickly. They are commonly used for "on/off" states. Let's create the switch component for our design system. In this chapter, I will show you an alternative way to create variants with a label.

Plugins in this lesson

Change Text

Step 1. Switch Off Default

  1. Create a Rectangle that is 28x16 px.
  2. Set the Fill to Neutral/40.
  3. Set the corner radius to 20 px.
  4. Create an Ellipse that is 12x12 px.
  5. Move the Ellipse inside the Rectangle.
  6. Select both elements and center them Vertically (ALT + V).
  7. Press ALT + A to align the Ellipse to the left.
  8. Select the Ellipse and move it to the right 2 px (Right arrow).
  9. Select both elements and group them.
  10. Rename the group to Toggle.
  11. Apply the auto layout.
  12. Resize the group, so it's 28 px wide.
  13. In the auto layout settings, set the Alignment to Left - Center.

Step 2. Wrapper

  1. Select the Toggle.
  2. Group it and apply the auto layout.
  3. Rename it to Switch.
  4. In the auto layout panel:
  5. Direction: Horizontal.
  6. Padding (all sides): 8 px.
  7. In the Alignment and Padding menu, set the spacing to Space between (instead of Packed).
  8. Alignment (blue lines) should be set to Center.
  9. Set the group's Fill to Neutral/10.
  10. Stroke to 1 px Neutral/40 Inside.
  11. Corner radius to 4 px.
  12. Resize the group, so it's 72 px wide.
  13. Group it again and add an auto layout with the following properties:
  14. Spacing between items: 8 px.
  15. Alignment: Left - Center.
  16. Direction: horizontal.
  17. Rename it to Switch / WithoutLabel / Off / Default.

Step 3. Text Label

  1. Create a text layer with the OFF text inside.
  2. Set its text style to Text S/Regular.
  3. Text color to Neutral/90.
  4. Having the text layer selected, press CTRL + ALT + R to align the text inside to the right.
  5. Drag and drop the text inside the Switch / WithoutLabel / Off / Default on the right.

Step 4. Switch Off States

Part 1. Switch Off Hover

  1. Duplicate the Switch 128 px to the right.
  2. Rename the new copy to Switch / WithoutLabel / Off / Hover.
  3. Change the stroke color to Primary/Main.

Part 2. Switch Off Focused

  1. Duplicate the Switch / WithoutLabel / Off / Hover 128 px to the right.
  2. Rename it to Switch Focused.
  3. Group it and apply the auto layout.
  4. Rename to Switch / WithoutLabel / Off / Focused.
  5. Add the corner radius of 4 px.
  6. Add a 3 px Primary/Focus Outside stroke.

Part 3. Switch Off Disabled

  1. Duplicate the Switch / WithoutLabel / Off / Default 128 px to the right of Switch / Off / Off / Focused.
  2. Rename the new copy to Switch / WithoutLabel / Off / Disabled.
  3. Set its Fill to Neutral/20.
  4. Set its text color to Neutral/60.

Step 5. Switch On

Part 1. Base

  1. Duplicate all Switches 48 px to the bottom.
  2. Rename the layers, so the Off is replaced with On.
  3. Select all Toggle groups inside. Hold SHIFT and click on them one by one to keep all of them selected.
  4. In the auto layout panel, change the Alignment to Right - Center. The Ellipse inside the Toggle group should now move to the right side.
  5. Change the Fill of the Toggle to Primary/Main EXCLUDING the Disabled one.

Part 2. Text label

In this part, I will show you a quick way how to change the text inside multiple text layers. We will use the Change Text plugin so remember that the Figmaster will close when you open it. You will find the instructions for this part in Figma too.

  1. Select all text layers inside the Switch On groups.
  2. Open the Change Text plugin.
  3. In the New value field, type in ON and press Enter.

Magic! Imagine doing it manually for hundreds of components. 🙃

Step 6. Switch with Label

  1. Duplicate all Switches 48 px to the bottom.
  2. Rename them, so the WithoutLabel word is replaced with WithLabel.
  3. Create a text layer with Switch Label text inside.
  4. Change its text style to Text M/Regular.
  5. Change its color to Neutral/90.
  6. Copy and paste it inside each Switch / WithLabel.

Step 7. Component and variants

  1. Select all Switches and turn them into components.
  2. Combine as variants.
  3. Property 1 label should be renamed to Label.
  4. WithLabel renamed to On.
  5. WithoutLabel renamed to Off.
  6. Property 2 label should be renamed to Active.
  7. Property 3 label should be renamed to State.
  8. Rearrange states.
  9. Add focus outline to the Focused components.

Great job! Now we have only one component, and we can choose if it contains a label or not by simply switching the Label property in the instances panel! Continue to the next lesson.

PreviousNext