Iโll never build a form in @figmadesign the same way againโฆ
It took me countless tries, but I think Iโve finally created a system that is flexible and doesn't result in variant overload ๐ช
Here's a 5 step walkthrough ๐
01 โ Create a "FormContent" component
This most likely combines text + icons
I'll create a handful of variants that give me flexibility around where/how my icons are displayed
Pro tip: Use an `IconWrapper` component so you can resize icons using variants
02 โ Create a "FormChild" component
This is simply an auto-layout wrapper around my FormContent that dictates the base size + padding.
We'll use these to create many types of subcomponents!
03 โ Create your form subcomponents
The three examples I have:
โข Input
โข Select
โข Text Area
๐ All of these can be created from our single FormChild component with some simple auto layout tweaks
This is the level where I define states like error/disabled/etc.
04 โ Now it's time to build out our "Form" component!
To do so, we add a "top" and a "bottom" auto layout around our "Input" component that includes things like labels, button text, helper text, character counters, etc.
Then create a variants map to turn on/off each piece ๐
05 โ Assemble your UI
You can easily swap out your "Input" with a "Select", a "Text Area" or anything else you've defined at your subcomponent level!
Any changes you want to make to an individual element's state happens at that same subcomponent level.
Benefit #1
Separating input "state" from all of the different layout options our forms can have radically simplifies our end variants matrix.
You'll never end up with 100+ variants at the form level. And the subcomponent states are repeatable and easy to manage
Benefit #2
This system is ridiculously flexible because you can add/tweak any number of subcomponents and they'll slide perfectly into the larger "Form" component and its existing variants.
Think how easy it would be to add a side-by-side "Select" component?
Obviously, there are a ton of implementation details that can't be communicated in a thread (but I did my best ๐ )
So I've created a full lesson (walkthrough + 15 min video) available through https://www.figma.academy
0:000:00
In general, this system speaks to the benefits of strategically building out each individual piece of the puzzle.
Assembling many nested components (vs. diving right into the "Form") means less variants, less manual work, and more flexibility ๐ช
If you found this useful and want to pass along the inspiration...
Click into the first tweet and share the thread with another designer ๐
Enough of you have asked about the โIconWrapperโ component...
This is what Iโm referring to! Allows you to change your icon sizes even when theyโre nested in another component ๐