Thread by @ridd_design

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 figma.academy

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 😊

https://twitter.com/Ridderingand/status/1430999115270279173

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 👇

https://twitter.com/ridderingand/status/1426980974961643521