Figma’s new Components make editing multiple design instances incredibly easy

Figma, the interface design app with real-time collaboration chops, is adding a new tool to its arsenal today. It’s called Components, and the idea is to make it much easier to replicate and modify design elements.

Creating a Component is just like any other object, but duplicating it is when the fun starts to happen. Rather than just a simple static copy, duplicates create another active instance of that component. That means changes that you make to one instance component will apply to all in real time.

Where things really get interesting, however, are with overrides. Applying an override allows you to modify specific elements without altering every other instance. But importantly, doing so doesn’t break the chain that binds the instances together – other changes will still apply across all of your instances. If you want to go back and make a change to the original shape, it will apply to all your instances, even if you’ve started to modify the duplicates otherwise.

You can use this process to nest different changes. If you want to work with one of your overridden components, you can simply create another instance of that one. But the basic chain of command still applies all the way back to your first component. And as with other Figma objects, you can still apply constraints to components that make it easy to move them around and modify for different screen sizes while keeping everything nice and tidy.

Speaking to Components lead designer Rasmus Andersson, the idea takes a cue from components in software engineering (Rasmus has design and engineering credits at Spotify, Facebook, Dropbox, and more). Where designers often have to endlessly modify copies of objects over and over again, Components work like their software counterparts – easy to replicate and modify as needed. Their usefulness only becomes more apparent as the interfaces grow more complex.

Take this Mac facsimile, where you can see Components at work allowing a designer to make changes to multiple versions of a calculator app, despite their different sizes.

It makes editing interfaces both easier and more consistent. In this theoretical Address Book, a designer can modify a single asset across multiple device interfaces, but still make changes specific to individual devices as needed.

Andersson tells me this is just the beginning. In the future, Figma is looking to create shared components that can be used by anyone on the team, allowing you easily apply share changes without having to re-upload a modified file copy.

It’s just another way Figma has been trying make design just a little more logical and intuitive. For more on how to create Components and what they can do, check out Figma’s blog post at the link below.