FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
start
Read Thread
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 ๐Ÿ’ช
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 ๐Ÿ‘‡
Ridd ๐Ÿ› @RidderingandReady for a @figmadesign pro tip? Use an `IconWrapper` to nest icons in your components. That way you can always resize your icons without having to detach components, hide layers, or add additional variants. Here's how it works ๐Ÿ‘‡ twitter.com

My Notes:

Select to add to your #gallery:
Ridd ๐Ÿ›

Pro Curator beta

$99 /year$4 /month*

*life-time pricing. Don't miss out! Price will increase as features are added, but not for you!