2.11 Radio Button

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

Introduction

In this chapter, you will create a Radio Button component. Radio buttons are used when you have a group of mutually exclusive choices, and only one selection from the group is allowed. This chapter will be very similar to the 2.5 Checkbox, so if you feel you can do it by yourself, go to the Figmaster Design System, open the Radio Button page, and recreate it here in the Lessons File. If not, follow the instructions below.

Step 1. Radio Button - Off

  1. Create an ellipse (O to open the ellipse tool) with the following properties:
  2. Size: 20x20 px.
  3. Fill color: Neutral/10.
  4. Stroke: 1 px Neutral/50 Inside.
  5. Group it and change the group into a frame (Dropdown in the top right corner of the Figma UI).
  6. Rename it to Radio Button.
  7. Group it again and add an auto layout.
  8. Rename it to Radio Button / Off / Default.
  9. In the auto layout properties, set the Spacing between items to 8px.
  10. Alignment should be set to Left - Center.
  11. Duplicate it 32 px to the right.
  12. Change the copy's name to Radio Button/ Off / Hover.
  13. Change its stroke color to Primary / Main.
  14. Duplicate it 32 px to the right.
  15. Change the copy's name to Radio Button / Off / Focused.
  16. Change the corner radius to 40 px.
  17. Add a 3 px Main/Focus Outside stroke.
  18. Duplicate the Radio Button / Off / Default 32 px to the right of the Focused state.
  19. Change the copy's name to Radio Button / Off / Disabled.
  20. Change the Fill color to Neutral/20.
  21. Change the Stroke color to Neutral/40.

Step 2. Radio Button - On

  1. Duplicate all checkboxes 32 px to the bottom.
  2. Open the Rename modal.
  3. In the Match (optional) field, type in Off.
  4. In the Rename to field, type in On and press Enter.
  5. Create an Ellipse (O) with the following properties:
  6. Fill color: Primary/Main.
  7. Size: 10x10 px.
  8. Copy the ellipse.
  9. Paste it in the center of each Radio Button - On frame.
  10. Change the color of this ellipsis to Neutral/50 inside the Radio Button / On / Disabled.

Step 3. Component and variants

  1. Select all Radio Buttons.
  2. Create multiple components.
  3. Having the component selected, press the Combine as variants button.
  4. Rename Property 1 label to Checked.
  5. Rename Property 2 label to State.
  6. Rearrange the states to Default, Hover, Focused, Disabled.
  7. Select all Focused components.
  8. In the Stroke panel, add 3 px Outside stroke with Primary/Focus color style.

Step 4. Radio Button with Label

Create a Radio Button + Label component following the methods we used in Step 5 in the 2.5 Checkbox chapter.

You're doing fantastic! In the next chapter, you will do everything by yourself. I know you are ready!

PreviousNext