My thoughts on the new Figma Component Properties

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).