Yes, there actually IS a way to add layers to instances of Figma components

We’ve all been there... You’re working with a component instance, and realize you’re missing an element (a third button, another text layer, another checkbox with a label), or the order of your layers isn't right for this particular instance. Figma won't let you change those things with overrides, so what are you supposed to do? Detach? No way!

The obvious, and well documented, answer is to go back to the main component and add the extra element in. If you don’t need it in all instances, you can hide the layer and reveal it where you do need it. But that can be troublesome for a few different reasons:

What if this is a true one-off special circumstance? You don’t want to add things to the main component to accommodate a single anomaly.

Or you’ve been going back and adding so much stuff to this component that it’s become a 200 layer monstrosity! More layers means slow files and slower prototypes.

You certainly don’t want to detach from the main component; it would undermine all the hard work you put into making the main component to begin with! Even if it’s made up purely of nested instances of smaller components, detaching is a huge risk for inconsistency later down the line.

Figma’s documentation on instances says you cannot change any of the following:

• The order, or z-index, of any layers within the instance.
• Position of any layers within the component, including items in an Auto Layout.
• Any constraints applied to the layers.
• The bounds of any text layers (you can still change a text layer's resizing properties).

I'm here to show you that you can change everything on the list above using what I consider an underappreciated feature:

Component swapping.

Do not underestimate the power of component swapping. Figma’s allowance for component instances to be swapped with any other component, regardless of size, unlocks the door not only to manipulating instances in ways that overrides don’t support, but so many other things too (I’ll post more about this soon).

Let me demonstrate with a scenario:

You have a modal component with a header, a block of text for content, and a bottom bar that contains two buttons.

And of course you’re going to make and modify instances of this modal with overrides. Let’s say we’re using this modal to let folks preview a shopping cart.

You’ll notice we’ve made overrides to most things in this modal. The title has changed to read “Shopping cart”, we added some items to the cart and listed their sizes and prices, and we’ve updated the button text on both button from reading “Button 1” and “Button 2” to “Checkout” and “Keep shopping.”

But what if we need a third button that reads “Empty cart”? What then?

Now in this simple example it wouldn’t be a huge deal to add that button in at the main component level. There are only a handful of layers supporting this modal component, so we need not worry about performance.

But we’re not going to do that. We’re going to turn an 11 layer instance into a 13 layer instance using component swapping. Here’s the steps, with accompanying GIFs for you to watch along with.

Step 1

First we need to grab two instances of our button component, and place them in a frame that’s using auto-layout.

Step 2

Next we’ll make sure the space between these button instances matches the space between the buttons in our card component. In this case, 8 pixels.

Step 3

Remember, you can swap any component with another component, so the third step is to make the new frame around those buttons into a component (we’ll name it “Empty cart button for cart modal”... maybe a mouthful, but I think it’s helpful to be descriptive)

Step 4

We’ll swap our newly created “Empty cart button for cart modal” for either of our two button instances that are nested within the Modal instance. We’ll swap it “Keep shopping” for our new component.

Step 5

Last thing to do is update the button text. You could do this at the main component level, or within the modal instance. I’m going to go with the former because it’s a nice way to show off auto-layout’s alignment functionality at work.

Here’s the proof! The original, main component has 11 layers:

And actually... there’s not just 13 layers in the instance because of our tricky component swapping... there’s 24!!!

How? The same method! If you look closely at the layer structure of the main component you’ll see I’ve componentized the frame around text that is sandwiched between the bottom and top bars of the modal. That lets me swap it out for... anything! Anything at all. In this case, a frame with many nested text layers using auto-layout.

When my colleague Jay and I realized the potential of component swapping we took advantage of it everywhere. Nearly everything we built used components. In the rare moments where we needed to sculpt an instance, we could do it at any level. It worked especially well for us because we were extremely strict about our spacing guidelines, and we used auto-layout on pretty much every frame.

You may be asking, “are there downsides? Tradeoffs? What’s the catch?” There’s no catch, but like most things in life component swapping in this way can open you up to other inconsistencies. For example, what if we wanted to change the spacing between the buttons from 8 pixels to 20px?

You would update your spacing on the main Modal component:

But unfortunately that doesn’t apply to the "Empty cart button for cart modal” component, so you must update the spacing there as well:

It’s a tradeoff, and life is full of tradeoffs. For the flexibility you gain in being able to add layers to instances via component swapping, you also gain more components to manage.

Don’t let that scare you off though! With some creative thinking, there’s so much to explore in component swapping. I think this form of manipulation is a great way for me to flex my systems-thinking muscles, and it inspires me to componentize things I originally don’t think to.

Happy swapping!