Component Properties in Figma

Originally published: https://www.joeyabanks.me/component-properties-in-figma/

Why component properties?

Figma’s introduction of variants changed how many designers, including myself, approach creating components. Variants provided the ability to turn several separate but related components, into a single asset, with properties and values that can adjust at the instance level. Variants are a handy tool to help designers create extensive and customizable component libraries within the design tool, but because each variant had to visually exist and therefore be represented on the canvas to exist, much more component maintenance and overhead were required. For example, imagine you were working on a notification component with success, warning, and error states, and you wanted to include the ability to either hide or show a close button. With that component, six variants were then necessary: one for each of the three states, and each state needed both a close button is visible, and a close button is hidden option.

The complexity is manageable for something like that notification component, but it doesn’t take much to imagine just how many variants might be required for components that contain more visual items with more configurable states. Even for a component as simple as a button, tens, if not hundreds, of combinations may be…