2.5 Checkbox

In the Figmaster - Lessons Figma file, open the 2.5 Checkbox page.

Introduction

It's time to create a checkbox component. Checkboxes allow the user to select one or more items from a set. First, we'll create a checkbox field. Then, we'll also create a checkbox with a text label.

Checkbox

Step 1. Checkbox Inactive

  1. Create a rectangle with the following properties:
  2. Size: 20x20 px.
  3. Fill color: Neutral/10.
  4. Stroke: 1 px Neutral/50 Inside.
  5. Corner radius: 4 px.
  6. Group it and change the group into a frame (Dropdown in the top right corner of the Figma UI).
  7. Change its name to Checkbox.
  8. Group it again.
  9. Rename the new group to Checkbox / Inactive / Default.
  10. Change its Corner radius to 4 px.
  11. Uncheck the Clip content option for this frame.
  12. Duplicate it 32 px to the right.
  13. Change the copy's name to Checkbox / Inactive / Hover.
  14. Change its stroke color to Primary / Main.
  15. Duplicate it 32 px to the right.
  16. Change the copy's name to Checkbox / Inactive / Focused.
  17. Duplicate it 32 px to the right.
  18. Change the copy's name to Checkbox / Inactive / Disabled.
  19. Change the Fill color to Neutral/20.
  20. Change the Stroke color to Neutral/40.

Step 2. Checkbox Indeterminate

  1. Duplicate all checkboxes 32 px to the bottom.
  2. Open the Rename modal.
  3. In the Match (optional) field, type in Inactive.
  4. In the Rename to field, type in Indeterminate and press Enter.
  5. Create a Rectangle with the following properties:
  6. Fill color: Primary/Main.
  7. Size: 10x10 px.
  8. Copy the rectangle.
  9. Paste it in the center of each Checkbox Indeterminate frame.
  10. Change the color of this rectangle to Neutral/50 inside the Checkbox / Indeterminate / Disabled.

Step 3. Checkbox Active

  1. Duplicate all Inactive checkboxes 32 px under the Indeterminate checkboxes.
  2. Open the Rename modal.
  3. In the Match (optional) field, type in Inactive.
  4. In the Rename to field, type in Active and press Enter.
  5. Remove the stroke from all rectangles in the Active Checkboxes.
  6. Set the Fill color of Default, Hover, and Focused Checkboxes to Primary/Main.
  7. Set the Fill color of Disabled Checkbox to Neutral/50.
  8. Open the Assets Panel with ALT + 2.
  9. Search for Icon / Check and place it on the canvas.
  10. Change its size to 20 px.
  11. Change its color to Neutral/10.
  12. Copy it.
  13. Paste it in each Active Checkbox's frame.

Step 4. Focused State

  1. Select all Focused components.
  2. Press Enter to select all Frames inside.
  3. In the Stroke panel, add 3 px Outside stroke with Primary/Focus color style.

Step 5. Component and variants

  1. Select all Checkboxes.
  2. Create multiple components.
  3. Select all components and set its Auto layout's property Spacing between items to 8 px.
  4. Alignment to Left - Center.
  5. Having the component selected, press the Combine as variants button.
  6. Rename Property 1 label to Status.
  7. Rename Property 2 label to State.
  8. Rearrange the states to Default, Hover, Focused, Disabled.

Checkbox + Label

Step 5. Adding the label

  1. Select the Checkbox component with all variants inside (Variants group surrounded with a purple dashed stroke).
  2. Duplicate it 48 px to the right.
  3. Select the new copy.
  4. Rename it to Checkbox + Label.
  5. Resize the variants area, so it's 655px wide.
  6. Select all variants inside.
  7. Set the horizontal spacing between them to 144 px (top right corner of the Figma UI, where you set up the Corner radius).
  8. Create a Checkbox text label with the text tool.
  9. Set its text style to Text M/Regular.
  10. Set its color style to Neutral/90.
  11. Copy the text layer.
  12. Paste it in each Checkbox component inside the Checkbox + Label variants group.
  13. Change the color of the text layer in each Disabled checkbox component to Neutral / 60.

Awesome work! Let's move on!

PreviousNext