Figma components- Text fields

What is Figma?

  1. It is a browser-based application that has access to everyone.
  2. It is the best source to work on for the team collaborative projects.
  3. It is efficient to provide vector designs, prototypes, and code hand-off.

Why use Figma?

  1. The versatility of Figma stimulates every day with something new.
  2. It has exact necessary tools available, which means ‘minimum tools, maximum outputs.’
  3. Using a feature called “Create component” provided by Figma.

What are components in Figma?

‘ Text field ’ as a component

The process to create Text field components:

  1. Create a new frame and rename it as ‘Text fields’ in the layers panel.
  2. Create a rectangle for the text field container with fixed dimensions.
  3. Now, apply an outline stroke of about 2px to the container. Allow the stroke color to remain default gray and change the fill color to white (#ffffff)
  4. Then, type the placeholder text for the container. (eg. ‘Placeholder’)
  5. Now, choose a typeface and font size for the placeholder text. (eg. Open Sans, 17pt - Regular)
  6. Place this text above the text field container.
  7. Align the placeholder text and text field container according to the requirements. (left, right, center)
  8. Select both the layers and click on the ‘create component’ button or click ‘Ctrl + Alt + K’ or ‘⌥ Option -⌘ Command-K.’
  9. Rename the component as ‘text-field/primary/(style)’.
Output- text field process

Defining Styles to Text fields

1. Default Style

Text field- Default

2. Focused Style

Text field- Focused

3. Filled Style

Text field- Filled

4. Error Style

Text field- Error

5. Disabled Style

Text field- Disabled
Example of Sign Up form- MentorPower Software

Figma Live View

Variation of text fields- Figma live view

--

--

UX/UI Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store