Exposing Nested Instances, Setting Preferred Values, and Creating Simplified Instances in Figma

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…