Component architecture in Figma

Last year I published the article “Building flexible components in Figma”. Since writing that article, Figma has added improvements which expand on the many ways you can structure components by allowing you to nest components within others, and easily swap component instances, and so I thought it was a good time for an updated look at components in Figma.

One of the best things about Figma’s component system is that you can access the layer stack of every instance of a component. This can have a huge impact, across the span of an entire design system because it can help keep components contained and reduce the number of components required.

Another recent update introduced drag and drop instance swapping. This can take place locally within your file, or straight from your shared team library (a separate Figma document). Being able to do this can have a huge impact how you structure your components.

Here are a few ideas on how you can maximize modularity, and in some cases, reduce the number of components required.