How component properties will make us better communicators

•

By now you’ve probably seen a few of these before/after screenshots like the one below: Pretty incredible, right? Yes, BUT...

In the example above, you’re losing the high-level picture of all the possible states this button can take. Not only that, we lose a ton of control over how our states can be combined in the design panel. So I would argue that this might be more confusing for your team...

Am I saying “don’t use component properties”?? Absolutely not :) They're incredible in many ways. But it does introduce a new type of responsibility for designers 👇

It’s now up to us to discover better ways of communicating all the potential forms our components can take. Because we can no longer rely on these huge variant matrixes to do it for us. Here's the good news though...

Variant matrixes were a cumbersome and unintuitive way to communicate state combinations to begin with lol. Component properties (booleans in particular) are going to FORCE us to come up with a better way. And THAT is something to get excited about...

What if instead of a giant matrix, our "handoff" process looked and felt a bit more like a story? For example: - Buttons have 4 states - Icons can be shown before or after - Each size has 2 types - Each type has 3 possible states - etc.

Do developers really need to see a visual representation of each individual state/property combination in order to build a component the right way? Of course not lol. I bet they were already looking for patterns vs. inspecting each individual variant to begin with...

So the question we should be asking is... What does the most effective handoff deliverable actually look like? We're not going to be able to link to a giant variant matrix anymore. So what are you going to point people towards?

Similarly, when was the last time you showed a `clicked` button state in any of your full mockups? If you're like me the answer is basically "never". So why did we spend time defining a `clicked` state across every single button size/type/breakpoint combination?? 🤔

I think it's easy to make the case that defining these massive variant sets was a poor use of time. And I'm stoked to see @figma push us towards simplicity in our components. Because it's going to force us to find more tailored ways of communicating our designs.

Grateful to never have to create one of these ever again lol And I'm excited about how component properties are going to make designers better communicators 💪