Mar 30, 2021
Figma components- Text fields
What is Figma?
Figma is one of the fastest and influential tools used for web design. The three things that attracted me towards Figma are:
- It is a browser-based application that has access to everyone.
- It is the best source to work on for the team collaborative projects.
- It is efficient to provide vector designs, prototypes, and code hand-off.
Why use Figma?
Figma imparts various tools and plugins to use that helps to build responsive interfaces and also customize the projects.
- The versatility of Figma stimulates every day with something new.
- It has exact necessary tools available, which means ‘minimum tools, maximum outputs.’
- Using a feature called “Create component” provided by Figma.
What are components in Figma?
Figma provides us with a great feature called the “Create component” that allows us to build customized libraries of reusable elements. Figma components give designers the advantage to design any interface effortlessly by saving time. Also, when a component updates in the central library, those changes will apply across all designs. Hence, it helps the design to be consistent and more efficient.
I have created few components for one of my projects, and I would like to tell you how I achieved it.
‘ Text field ’ as a component
Text field, commonly known as an input field, allows users to insert, edit and select text in a particular container. We have often seen these text fields residing in forms, but they can also appear in other places, like dialog boxes and search bar.
The process to create Text field components:
- Create a new frame and rename it as ‘Text fields’ in the layers panel.
- Create a rectangle for the text field container with fixed dimensions.
- 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)
- Then, type the placeholder text for the container. (eg. ‘Placeholder’)
- Now, choose a typeface and font size for the placeholder text. (eg. Open Sans, 17pt - Regular)
- Place this text above the text field container.
- Align the placeholder text and text field container according to the requirements. (left, right, center)
- Select both the layers and click on the ‘create component’ button or click ‘Ctrl + Alt + K’ or ‘⌥ Option -⌘ Command-K.’
- Rename the component as ‘text-field/primary/(style)’.
Note:
1. Can change the fill color and stroke color according to the requirements.
2. Can put icons, prefix text, suffix text, quotes, labels, etc., besides the placeholder text.
Defining Styles to Text fields
In Figma, we can specify different styles to a particular component. It helps us to change the state of the component while designing or prototyping interfaces. After defining the Figma component styles, we can achieve harmony in all wireframes and create multiple text field variations.
1. Default Style
In the image above, we can see that the default state has a container of white color and a gray stroke around it containing the right amount of space for “Placeholder Text.” The container has a definite width and height of 225 x 48(in pixels), a standard size for text fields (it can vary according to the design requirements). After creating the text field by the process mentioned earlier, we can rename it as ‘text-field/primary/default.’
2. Focused Style
Focused style occurs when any user is about to enter placeholder specifications in the text field. The container will leave its default property, as shown in the image above. We can create a focused style by changing the properties of the default component. Either we can apply a box-shadow to the container or change the color of the outline stroke. Ultimately rename the component as ‘text-field/primary/focused.’
3. Filled Style
The filled text field shown above is the output after the user has inserted text in the container. The placeholder text becomes black with no other decorations to it. The container becomes steady as it was in the default state. We can rename this style as ‘text-field/primary/filled.’
4. Error Style
Error word itself means “a mistake.” Therefore, if the user enters a wrong entry, the container will turn red, indicating a mistake while entering a particular specification. Error state also helps the user to check on the specification written and re-enter it correctly. We can achieve this style with just a minimal update by changing the default stroke color to red. Finally, rename it as ‘text-field/primary/error’.
5. Disabled Style
This state occurs when a specific field is restricted or cannot have any input from the user. It has a very light color, rarely visible, showcasing neutral fill to it. Eventually, we can rename it ‘text-field/primary/disabled.’
Note:
1. The colors and dimensions of these styles can vary according to requirements.
2. The form of the container can be changed according to the design.
Figma Live View
About Me
I am a UX/UI designer possessing an analytical character towards web design. Exploring new techniques and outcomes of improving user experience is the vital interest I desire. I have been attempting various tools like Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Adobe After effects, Adobe XD, Figma, Invision Studio, and Fontlab used for graphic and web designing. I cherish working on various projects like illustrating, poster making, developing fonts, publication design, signage design, wireframing, prototyping, and many more. I found that these projects’ learnings are very supportive in web design as everything is linked to each other somehow. It has been great for me to drown deep into this field as each day is becoming worthwhile spending time in the process.
To know more about me or my projects, you can find me on,
Behance: behance.net/salonishah27
Linkedin: linkedin.com/in/salonishah27
Website: www.salonishah.in
