Get in touch.

Nevermind
Thanks for reaching out! I'll be in touch soon.
Close
Yikes! Looks like the form is busted. Check back later, or try getting in touch with me on twitter
Close
Close

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

Alice threw this one into the void on
March 10, 2021
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:

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.

Button component and Modal component in Figma

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.

An instance of the modal component with overrides applied

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.

Creating two instances of button components and putting them in a frame

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.

Adjusting the spacing on the frame that contains two buttons

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)

Turning the frame containing two buttons into a component, and naming it "Empty cart button for cart modal”

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.

Swap one of the button instances in the modal instance with the newly created 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.

Adjusting the text in the "Empty cart button for cart modal” component

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

The main modal component's layers expanded to revela all 11 layers

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

Expanded layers in the modal instance with swapped components revealing 24 layers

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:

Adjusting the spacing of the bottom bar frame of the 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:

Adjusting the spacing of the "Empty cart button for cart modal" component

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!

Interested in more?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.