Ok. So I'll not be the first one here to draw your attention to the new features that Figma announced at Config2022. It was back in early May, after all.

Figma launched around 15 new features at Config, including improved Auto-Layout (gotta love that Absolute Positioning option), Variable Fonts, and Dark mode (finally). Still, the big one that got everyone's attention was the new Component Properties feature, which I'll focus on in this article.

Now. Some folks think Component Props (to give them their snappier title) are the best thing to happen to Figma since, well, Figma, and others who think it's a half-baked, backwards-step from what was available previously.

Me? Well, after spending nearly two months working with this new feature (hence the delay between the Config announcement and this article), I've now decided its time to voice my opinion and share with you my thoughts on their pros and cons, as well as give you some handy tips to follow for when you decide to integrate them fully into your workflow.

Let's dive on in…

---

Don’t always be dazzled by shiny, new features.

I’ve always found, and with more than a few years doing this designing thing, that even when our design tool of choice brings shiny new gifts, they’re not always as life-changing as they might seem (at least in their first iteration).

That’s how I found the new Component Props feature in Figma.

Don’t get me wrong. Figma is onto something really good here. They’re working on making larger design files (especially design systems) much easier to work with, but that’s not to say the old method was a chore. It wasn’t and worked perfectly fine, just with a few extra steps needed, but there’s not a massive chasm in time saved between ‘before component props’ and ‘after component props’.

As with any new key feature that a design tool brings, I feel that you shouldn’t get swept away with the hype when looking at the first iteration of a new feature like Component Properties, or you may be a little disappointed.

We can all get dazzled by that new shiny, shiny feature and assume it crushes all those other methods we used previously, but this is rarely the case, and that’s how it feels for me currently with this first iteration, but saying that, the foundations have been laid by Figma and there’s now something to be built, and improved upon.

---

Bye, bye to that ocean of Variants.

One thing the new Comp Props (let’s shorten that name from here on in) reduces massively is the number of Variants required in your design file.

Buttons, for one. No more do you need a Variant for a Button with a left icon, one with a right icon, and just a regular button with text. You can strip things right back to just the one variant and control the changes required simply by using the Boolean feature of Comp Props making for a much lighter file.

The downside of this is that for someone new jumping into your design file, they don’t have a visual aid out-of-the-box to see all the different variants (text button, button with left icon, right icon etc...) they’re flying blind.

This is not an absolute deal-breaker, but this is one of those times where detailed documentation within your Figma file is needed more than ever. Just having examples of the variants in use can help a newcomer to your file easily understand what their options are when choosing a Component, and this is something I’ll be looking at improving with the next version of my Design System.

---

Are Component Props taking the fun away from our design tools?

Ok. I appreciate the benefits Comp Props bring to the party and how powerful they could become as this new feature matures.

But.

As much as I love the accessibility and time-saving that they bring. Everyone loves a simple toggle switch to show/hide an icon, right? I feel, and this may be the grumpy old designer in me coming out, that having an Inspector Panel full of Toggles and Text Fields to control my designs is taking away a little of the manual control and the fun of getting low-down and dirty on a design file.

It starts to make things feel like the settings screen on a video game more than a design tool, and there’s this disconnect happening more and more, flick a few switches and here’s your new design! Where’s the fun in that?

Right. I’ll snap out of grump mode now. Let’s return to our regular broadcast...

---

Finding a balance between using Text Properties and doing it the old way.

Throughout the past couple of months, I've tried to find a balance between when and when not to use the Text properties feature of Comp Props.

And it took me a little while to try and find some balance, especially when working on my own design system, something that I knew would be used by many different kinds of users.

The Text Properties feature of Comp Props is handy, in moderation. No doubt. But again, like many of the new features, it's about striking the right balance.

I think the Text Props work best for short snippets of text, think Button Labels, Placeholder text in an Input Field. To quickly scan down the list of text properties in the Inspector panel and make a text edit here and there without having to click into the actual text layer does seem more fluid.

But. And whilst working on my Design System, I completely skipped the Text Props feature for components with a block of text consisting of 3, 4, 5 or more lines of text.

Why?

Well, and this is just my personal opinion. I felt that having large chunks of text editable in the Inspector panel A; fills up in the Inspector panel more than it needs to be, B; editing large pieces of text in a teeny-tiny text area in the Inspector is not the right way to be doing things, straining your eyes to see if you've misspelt a word, and C; you basically can't apply style edits. Want to bold that one word in that paragraph? You can't do it so that freedom is also removed.

Text Props. Nice feature. But, use it for short snippets of text. Please do the right thing for larger passages of text and edit them manually on the Canvas.

---

How I kept the Inspector panel from looking like toggle switch hell.

So when I first jumped into using the new Comp Props feature (and yes, I was caught up a little with the new shiny, shiny object syndrome), the results when modifying some of my existing Components were a shit show, to say the least.

My Inspector Panel, with its scrolling mess of (toggle) switches and Labels, looked like the cockpit controls of a Cessna.

It was an unmanageable mess of many Instance swap, Text, and Boolean properties.

Like a kid with a new toy, I got way too excited and started slapping Comp Props on every element inside of a Main Component.

It was only when I looked at the results in the Inspector Panel that I had to re-evaluate how I was going to use these Props correctly.

It’s all about showing restraint.

For example, with the Data Table Components in my Design System and the Data Cells (with their many instances/variants included) nested inside of the Data Table, I could have had the Cells applied at the Parent (Data Table) level and tweaked everything via Comp Props from there. Bad, bad idea. This would have made for an Inspector panel with 15+ different Comp Props to scroll through. Not cool.

As helpful as Comp Props are, when you start dealing with 15 options in the Inspector I feel the cognitive effort required to scan through these and understand what’s exactly doing what to your design on the canvas increases significantly.

When you’re working with smaller Components, Comp Props rock, but when you start working with larger components such as Data Tables and their various Data Cell instances, things can become a mess if they’re not implemented correctly.

So I tried to strike a balance between still enjoying the fruits of what Comp Props had to offer while keeping the Inspector panel manageable and easily scannable for another user.

And referencing the Data Table/Cell Components that I previously mentioned, I separated these into different Variant Groups. The Data Table Components (Header and Rows) and the Table Cells, and then nested the Cells inside of the Data Table Components. Are you still with me?

Of course, doing it this way does require the user to click into the Parent Component and select the Table Cell. But it also keeps the Inspector panel much lighter on options and more easily scannable than if I’d just start slapping Comp Props on one large component (Data Row & Cell).

Try to think practically and avoid that toggle switch hell when you can.

---

Ok. So how are Comp Props at this moment in time? In a few words - They’re pretty amazing.

For large-scale design systems (where I think they work best), they allow users a level of accessibility and ease of use that wasn’t there previously.

Of course, Version 1.0 of any new feature like this isn’t going to be the absolute best it can be; this rarely, if ever, happens. But it will improve from the already excellent foundations that have been laid.

It’s still early days for Component Properties. Give Figma time to refine things. They’ll improve on what is already a super-helpful and time-saving feature, and I can’t wait to see how it shapes up, even if I still feel a bit grumpy about the hands-on control it’s taking away from us ;)

By the way, if you want to save yourself hundreds of design hours (and see Component Properties in action), my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

Thanks for reading the article,
Marc.