Figma: Exposing nested instances, Preferred values, and more
Hello again! 👋 Wow, it’s been a busy few months, but I haven’t forgotten about this newsletter! Since my last publish, I’ve joined the talented team at Webflow, helping to build out the company’s design system. It’s a big challenge, but the opportunity has been everything I could hope for, and this team has already taught me so much. In other news, I’m also getting married this week! We’ve been engaged for four years and have had to plan and cancel multiple weddings, but I’m so excited that the month when my fiancée and I will finally be married has arrived!OK, now for the main topic. Let’s dive into Component Properties! 🎉At this year’s Config conference, Figma announced a wonderful new feature called Component Properties. It didn’t take long for many design systems designers, including myself, to adopt this new way of building components and variants within Figma, as the feature began to allow for far more instance customization while reducing overall complexity.In case you haven’t tried Component Properties out yet, along with variants, they’re an additional way to create and organize components that scale within Figma. If you’re interested in reading more, I wrote in detail about the different types of component properties in an earlier newsletter. When previously working with variants, each variant had to exist visually and therefore be represented on the canvas. This requirement meant that if you wanted a button with three variant states (default, focused, hover) to support the addition of an icon, six buttons were required: three with icons and three without. Not only was this a bit tedious, but as components become more complex, this way of building can quickly become overwhelming as variant sets can soon become overwhelmingly large. Component Properties helped with just this! Boolean Component Properties can now represent the icon’s true or false state. To take it a step further, a Text Component Property can also exist so that any designer can edit the button’s label directly within the Properties Panel on the right.As great as the newest feature was, I couldn’t help but feel something was also missing: showing nested Component Properties.When building components, it’s become a common practice to nest instances within components so that the smaller pieces begin to make up the larger ones. It’s often made sense to use Component Properties within those smaller components to easily allow for things such as toggling between light or dark mode or quickly adjusting a layer’s visibility, and then to use them on the larger component, too. The inability to surface all the available options within a component risked creating a challenging experience for the designer consuming the component, as it wasn’t clear what those available options were without deep-clicking every instance within.With today’s beta launch from the Figma team, that problem has now been solved! To understand exactly what’s changed, let’s take a look at an example.Let’s Try It: Exposing Nested InstancesIn the example above, I have a StatusBar component from iOS, and within this component are two nested instances: _StatusBar-time and _StatusBar-battery. When selecting the StatusBar component, Figma only shows the variant properties available for the component itself and none of the ones associated with either of those nested instances. As mentioned earlier, without clicking on each instance, a designer would never know that there are properties that can (and perhaps should) be adjusted. » Read More
Like to keep reading?
This article first appeared on joeyabanks.substack.com. If you'd like to continue this story, follow the white rabbit.