2.7 Input

In the Figmaster - Lessons Figma file, open the 2.7 Input page.

Introduction

In this chapter, we'll create an input component. First, we'll create three variants of an input field. Then, we'll use these variants to create an input with the label and helper texts.

Plugins in this chapter

Similayer

Step 1. Input field - default

Part 1. Base

  1. Create a text layer with Input placeholder text inside.
  2. Set the color of the text to Neutral/70.
  3. Set the text style to Text M/Regular.
  4. Group it and add an auto layout.
  5. Rename it to Input field / Default / Default.
  6. In the auto layout panel, set the following properties:
  7. Spacing between items to 4 px.
  8. Padding Left and Right to 12 px.
  9. Padding Top and Bottom to 6 px.
  10. Alignment: Left - Center.
  11. Set the fill color of the group to Neutral/20.
  12. Set the stroke to 1 px Neutral/50 Inside.
  13. Set its corner radius to 4 px (all sides).
  14. Add an Input Shadow effect to the group.
  15. Resize the group, so it's 248 px wide.
  16. Select the text inside and set its Resizing width property to Fill container.

Part 2. States

  1. Duplicate the Input field 48 px to the right.
  2. Rename the new copy to Input field / Default / Hover.
  3. Set its stroke color to Primary/Main.
  4. Duplicate the copy 48 px to the right.
  5. Rename the new copy to Input.
  6. Group it and add an auto layout.
  7. Set the **Resizing **(width) to Fill container for **Input **inside.
  8. Set its corner radius to 4px.
  9. Rename it to Input field / Default / Focused.
  10. Add a 3px Primary/Focused Outside stroke.
  11. Set the fill color of the group to Neutral/10 color style.
  12. Set the text color to Neutral/100 color style.
  13. Select and copy the Input field / Default / Default.
  14. Paste and move it 48 px on the right from the Input field / Default / Focused.
  15. Rename the new copy to Input field / Default / Filled.
  16. Set the text color of the new copy to Neutral/100.
  17. Duplicate the copy 48 px to the right.
  18. Rename the new copy to Input field / Default / Disabled.
  19. Set the text color to Neutral/60.
  20. Fill color to Neutral/30.
  21. Remove the shadow effect from it.

Step 2. Input field - Danger

  1. Select all default Inputs.
  2. Duplicate them 48 px to the bottom.
  3. Open the rename modal and rename them, so the middle Default word is replaced with Danger.
  4. Open the Assets panel and place the Icon / WarningCircle on the canvas.
  5. Change the Icon's color to Danger/Main.
  6. Resize the Icon, so it's 16x16 px.
  7. Copy the Icon.
  8. Paste it in each Danger Input on the right side.
  9. Set the stroke color of all Danger Inputs to Danger/Main EXCLUDING Input / Danger / Focused.

Step 3. Input field - Success

Part 1. Base

  1. Select all danger inputs.
  2. Duplicate them 48 px to the bottom.
  3. Open the rename modal and rename them, so the middle Danger word is replaced with Success.
  4. In the Selection colors panel, replace the Danger/Main color style with Success/Main color style.

Part 2. Replacing the Icon

In this part, I will show you a neat trick on how to replace Icon / WarningCircle with Icon / CheckCircle with a few clicks. This method is useful when you have hundreds of icons or components to replace, and you don't want to do it item by item. We will need a Similayer plugin for that, so the Figmaster will close after you open it. You will find the instructions in Figma too.

  1. Open the Similayer plugin.
  2. Hold CTRL and click on the Icon's vector inside the Input field / Success / Default group. Remember to select the Vector layer! In the layers panel, you should have the Vector element selected.
  3. In the Similayer UI on the left, select Fill color and Width properties.
  4. Press the Select layers button. Now, all Icon Vectors inside Success Inputs are selected.
  5. Having them selected, press SHIFT + ENTER two times to select the Icon components.
  6. In the Instances menu on the right, search for Icon / CheckCircle and select it (just like we did in the 1.7 Icons chapter where we replaced the icons).

Great job! Imagine replacing the icons in 1000 components one by one without this method. It wasn't possible when I worked on Ant Design System for Figma some time ago, and I had to do it without any tricks or plugins. 😞

Step 3. Input field - component and variants

  1. Select all Input fields.
  2. Create multiple components.
  3. Combine as variants.
  4. Property 1 should be Status.
  5. Property 2 should be State.
  6. Status values should be arranged: Default, Danger, Success.
  7. States values should be arranged: Default, Hover, Focused, Filled, Disabled.

Step 4. Input

Great job! Time to create Input components that will have a label and a helper text.

Part 1. Default

  1. Create a text layer with the following properties:
  2. Text: Input Label.
  3. Text Style: Text M/Regular.
  4. Text Color: Neutral/100.
  5. Create the second text layer 40 px below with the following properties:
  6. Text: Input helper text.
  7. Text Style: Text S/Regular.
  8. Text Color: Neutral/90.
  9. Select the Input field / Default / Default component from the variants group.
  10. Duplicate it by moving it between the Input Label and Input helper text.
  11. Group it and apply the auto layout.
  12. Rename the group to Input / Default / Default.
  13. Select all elements inside the group.
  14. Switch Resizing width property to Fill container.
  15. Duplicate the group 48 px to the right.
  16. Rename it to Input / Default / Hover.
  17. Select the Input inside.
  18. In the Instances panel, switch the State from Default to Hover.
  19. Repeat the action so you'll have five Default Inputs in total with the proper names and instances. Remember to set the color of the Disabled Input Labels to Neutral/60.

Part 2. Danger

  1. Duplicate all Input / Default groups 48 px to the bottom.
  2. Rename the new copies, so the middle word Default is replaced with Danger.
  3. Hold SHIFT and select each Input field component inside the Input / Danger groups.
  4. In the Instances panel, switch the Status from Default to Danger.

Notice that the states were replaced automatically, and we don't need to change them.

Part 3. Success

  1. Duplicate all Input / Danger groups 48 px to the bottom.
  2. Rename the new copies, so the middle word Danger is replaced with Success.
  3. Hold SHIFT and select each Input field component inside the Input / Success groups.
  4. In the Instances panel, switch the Status from Danger to Success.

Step 3. Input - component and variants

  1. Select all Inputs.
  2. Create multiple components.
  3. Combine as variants.
  4. Property 1 should be Status.
  5. Property 2 should be State.
  6. Status values should be arranged: Default, Danger, Success.
  7. States values should be arranged: Default, Hover, Focused, Filled, Disabled.

Great work! I hope you've learned some tricks out of this lesson. Remember, there is always a solution for tedious and repetitive tasks in Figma.

PreviousNext