Additional tips on component architecture in Figma

Instance menu

Components local to your file can also be swapped out from the instance menu. A consistent naming pattern with forward slashes helps sort your components into more manageable buckets.

Another way to swap components is to select a component and access the instance menu from the properties panel. From here you can choose a different component to swap. This works only for local components because the list is populated only from components which already exist in your document.

Using forward slashes to segment your naming scheme, will not only organize your components into groups within this menu, it will also organize your exported assets into subdirectories too.

Replacing components

Changing many instances of a frequently used component sounds like it would be daunting task, especially if spread out across many different frames. We know changing the instance is easy, the problem is finding them all. Luckily, Figma has a feature to make selections based on commonalities.

Documentation

Figma enables you to add descriptions to your main components. If you have variations in similar components, specific use cases, or even a redesigned component you are validating, this is a great place to add useful information to accompany your component which will be easily available to designers, right from the component and team library panels.

Descriptions added to your main components, appear on hover, inside the components menu.

Documentation is not only critical for designers, its equally important to consider the collaboration with the developer. Encapsulating every detail in a small description field is not possible, so try to put yourself in the developers shoes, and identify what they need to know. With so many applications becoming component centric in their structure, there is a good chance developers want to take the same approach to writing code, and want to understand the full gamut of each component and its various states that are spec’d in the design. It’s easy to fall into the trap thinking you need an elaborate style guide, documentation website, or additional tools to accomplish this, but the reality is, many small teams simply don’t have the time or resources to do this. The good news is, that is not a requirement to be successful—keep it simple and avoid complicating it.

Figma can help facilitate the developer handshake, and the collaborative nature of what that process should always aim to be. Consider the example below. A date picker component with various states. This particular component is inside a file setup to be a repository for all UI components in the design system. The components within it are shared to other files which contain the screen mockups. Rather than sending just the screens to the developer, consider sharing a link directly to your team library documents to accompany the mockups.

The main components which make up the date picker reside in a frame (named appropriately so they get grouped in the component panel). The main components are located on the left. These are the components the designers will have access to from their team libraries panel when working on screen mockups. To the right, are just instances of the main components (so you don’t have to worry about these cluttering up your team library when accessed from other files). Those instances can be assembled to illustrate various states of the component. Documentation can be as simple as adding some notes and collaborating with the developers via comments. This puts everything in one place and saves the developer from having to hunt around your various screen mockups just to understand the full scope of what they need to build.

Deleting main components

Clicking the blue link will restore your main component. Phew!

Deleting a main component could be disastrous. Imagine every linked instance of said component all of the sudden detaches and turns back into a frame! Figma has you covered. Instances will actually maintain their instance status in case you have to revert this later. This allows you to either select them all and swap them out to a different component (which exists) or, you actually restore the original main component.

Thanks for reading. If you have questions join us on Spectrum.