2.8 Textarea

In the Figmaster - Lessons Figma file, open the 2.8 Textarea page.

Introduction

Text inputs enable the user to interact with and input content and data. Text area components can be used for long form entries. In the first step, I will show you how to create one. In the following steps, you will make all states for it and add labels. Let's start!

Step 1. Textarea field

This component will be done without an auto-layout feature.

Part 1. Base

  1. Press F and click on the canvas to create a frame.
  2. Make it 248 wide and 64 px high.
  3. Rename it to Textarea field / Default.
  4. Set its Fill color to Neutral/20.
  5. Set its stroke to 1 px Neutral/50 Inside.
  6. Corner radius to 4 px.
  7. Add Input Shadow effect.

Part 2. Placeholder

  1. Create text layer with a Textarea placeholder text inside.
  2. The style should be Text M/Regular.
  3. Color Neutral/70.
  4. Move it and hold CTRL and place it inside the Textarea field frame.
  5. Move it, so it's 12 px from the left and 6 px from the top inside the frame.
  6. Resize the text layer, so it's 12 px from the right and 6 px from the bottom inside the frame.
  7. Having the text layer selected, set its Constraints (top right panel in the Figma UI):
  8. Left and right / Top and bottom.

Part 3. Resizer

  1. Place the Resizer group into the Textarea field frame. You will find it in the Resources Frame.
  2. Make sure it's in the bottom left corner 4 px from the edges.
  3. Set its Constraints to Right - Bottom.

Part 4. States

Time for practice! Create the missing states: Hover, Focused, Filled, and Disabled. If you don't remember the properties for each state, jump back to the 2.7 Input chapter. They will be exactly the same as in the Input component.

Step 2. Textarea with label

Create a Textarea component with Labels and helper texts just like we did in the 2.7 Input chapter. If you are stuck, you can check the solutions file.

PreviousNext