Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
Daily Design #10
Working on creating variable and responsive components with Figma's new auto layout and variable features.
Text fields! One of the most utilized components, and definitely one of the most complicated to make. My goal was to put all of the variations that we have for the fields, labels, and the container itself into one variable component.
The field component itself includes several sub-components; The Field Box, The label, the description, and the prefix/suffix icons.
Within the label, it was built to be flexible enough for the designer to choose if it is labeled "optional" and even have a Show/Hide link for passwords. It also has all of the necessary states.
Within the field itself, the designer can choose to include icons inside the field (a common request and use case). The text within the field also flows off the edge of the field rather than going onto another line (single line fields do this).
The entire component is also 100% responsive (width) as well and works well inside an auto-layout stack.