Behind the feature: The multiple lives of multi-edit

Every now and again, we ship a feature that makes us wonder how we ever got along without it. That’s certainly the story with multi-edit, which simplifies how you edit multiple objects across Figma. Now that it’s here, multi-edit feels like a natural part of Figma, but it deviates from an industry-wide norm on how selections work, and working out the details took time. Multi-edit had multiple lives before we were able to finally switch on that feature flag. Now that it’s live, we wanted to share how it came to be. Vice President of Product Sho Kuwamoto and Product Designer Nikolas Klein take us down the long road of refining multi-edit, and explain why building second-nature features should be a first order of business.

Ready to test it out? Try these shortcuts:

• ⌘ Command + ⌥ Option + A to select all matching objects.
• Shift drag to select specific matching objects
• Select multiple text objects and hit enter to multi-edit text.
• Select a component set and hit Q to enter multi-edit mode for variants.

Explore the playground file for more.

The philosophy behind multi-edit

Sho K.

One of the things I love about working at Figma is that we get to question the foundations of how design tools should work. Sometimes these questions lead to big new features, and sometimes they lead to lots of small improvements. Multi-edit is the rare example of a feature that does both.

We first came up with the idea for multi-edit in 2019. We were in the midst of designing the variants feature, and there were so many thorny issues that we decided to clear our calendars and do a two-day-long design summit to sort it all out. A lot of the important pieces fell into place right away, but one of the core issues we were wrestling with was the amount of repetitive editing we were asking people to do. As you know, editing variants can become tedious, and we were tossing around various mechanisms to make this process easier, but none of them felt right.

Then, we had a simple insight: What if you could enter a mode where all of your edits would magically happen to all the variants at once? And in fact, wouldn’t you want to do this in other places, too? Aren’t there lots of times when you want to edit a bunch of designs at once?

We sketched it out on a whiteboard and called it multi-edit.

Hibernation

After that initial spark, the multi-edit idea spent a lot of time in hibernation. We couldn’t start coding right away because we had to work through the core ideas. The answers might seem obvious in hindsight, but they weren’t obvious at the time.

We started out thinking of multi-edit as a powerful new mode that lets you edit lots of things at once—kind of like how multi-selecting text in an advanced text editor works.

Once we started trying to nail down how multi-edit would actually work, we were faced with the reality that Figma already kind of lets you multi-edit by selecting multiple objects. There are just a few problems:

1. It’s hard to select the things you want to edit.
2. Once you have them selected, some of the edits don’t work very well.

For example, it’s easy to change the color of multiple objects, but it’s hard to resize them. It’s easy to change the font or size of multiple text nodes, but it’s hard to change the text itself.

A look into Figma product thinking (Config Europe)

Multi-edit was always part of our overall plan, yet we had other work to prioritize. I even hinted at it during a talk in 2020!

So we stopped thinking of multi-edit as a mode and ended up asking ourselves fundamental questions like “How should selection work anyway?”

We were also delayed by the practicalities of software development. The truth is that no matter how good a feature idea may be, there are often other things that have to be done first.

So we sat and let that multi-edit idea stew…for a very long time.

The slumber and awakening

Sometimes, when you don’t work on a feature idea right away, it loses steam and fades away. Yet, the idea of multi-edit remained surprisingly popular at Figma.

I think it’s partly a matter of philosophy. At Figma, we believe it’s our job to help you make changes to designs quickly, and you have to be able to do that whether you have structured your designs ahead of time or not.

When you look at Figma, almost every feature that helps you structure your file has a free-spirited cousin feature for the times when you want to keep things loose. You can use styles and tokens to change your colors quickly, but if you want to leave things unstructured, you can use the selection colors feature to make mass edits. You can use auto layout to group things into stacks and move them quickly, but if you want to leave things unstructured, you can use the smart selection feature to reorder things quickly. When it came to editing, you could use components to edit multiple copies of an object quickly, but if you wanted to leave things unstructured, we just didn’t have a great alternative!

What were you supposed to do? Copy and paste and click on things a hundred times? Components needed an unstructured spiritual cousin, which is why we needed something like multi-edit.

Tom Lowry, Director of Advocacy at Figma, was one of the big internal champions. Nikolas Klein, one of our designers, prototyped a version of multi-edit during one of our Maker Weeks, and I prototyped another version along with Software Engineers Naomi Jung and Joanna Chen. With each experiment, our understanding of what we needed to build and how it needed to integrate with the rest of Figma grew deeper.

Bringing multi-edit to life

Nikolas K.

In 2023, it felt like the time was finally right to awaken multi-edit from its slumber and bring it into the limelight. I was thrilled. When we began imagining multi-edit, I was in my first year as a product designer at Figma. In the five years since, we had made a lot of key decisions regarding how multi-edit could work, functionally and philosophically. We had working documents and prototypes made with various collaborators. From my vantage point, we had tuned the design, like you would a guitar. So, building multi-edit felt like it would be a straightforward task. (Famous last words.)

Wait, we can change the selection mechanics?!

The first challenge was solving for the core selection mechanics when editing multiple layers. Figma, like many other design tools, would draw one big aggregate bounding box around all selected items, allowing you to edit them as if they all belonged together in a group. This is great for operations within the same frame, but it really breaks down when interacting with objects across frames or variants, such as resizing a logo that is visible in all screens.

In one solution, we proposed a “multi-bound mode,” a new option that would change how selection bounds are drawn. This would allow users to make relative edits like you’d expect. This didn’t feel right, though, and after a lot of back and forth, we realized we could do something much more fundamental: Instead of adding a new mode, we could change the existing behavior for every selection—rethinking how editing worked across Figma.

While agreeing on an approach felt like a breakthrough, we were still a long way off—perhaps even further, due to the breadth and complexity of our new scope—from shipping multi-edit. In the years that followed, we would discover all the interdependencies of this approach, and tune them one by one.

At first, we wanted to draw multiple selection bounds around every single object, even within the same frame. But we quickly realized that traditional selection mechanics have served designers well for decades. Finding the right balance between the familiar and the new, we opted for a middle ground: showing multiple bounding boxes for each set of objects selected at different levels of the designs.

Looking at all selections through a multi-edit lens

Now that we had multiple bounds, we needed to make sure that every potential action would work as expected within each hierarchy. We listed out every task where you might select in Figma—no small feat, given that many operations in Figma require some form of object selection. For each instance, we adjusted how it behaved with multi-edit to align with workflows. Because multi-edit touched so many operations, stakes were high. Our engineering team, including Akshay Subramanian, Jung Woo Lee, and an intern at the time, Emily Louie, were amazing partners in allowing us to prototype and adjust behaviors quickly.

One of the more obviously broken behaviors was aligning elements across frames. When selecting elements across frames organized horizontally, aligning to the top or bottom vertically works. But, when aligning elements to the left or right horizontally, those elements move to the same position on the canvas, meaning they often get stacked or disappear from the intended frame entirely.

To fix this, we updated align elements to be relative to each frame. Aligning elements now works by taking the smallest value in the direction you’re aligning to, and applying this value to all objects relatively within each frame.

We also made a special rule to align objects on the canvas with the closest object inside a frame, breaking our own rules of “aligning relatively for each hierarchy” to keep allowing existing workflows.

Selecting the right amount of matching objects

With all of this done, multi-edit was already feeling like a major improvement. Editing objects across frames was much more intuitive. Next, we needed to make it as easy as possible for users to get into those states faster.

Some of our users noticed this functionality, too—like Tom and Aravindh—and wondered why it didn’t extend elsewhere.

As we all know, designers often duplicate frames where the same layer is repeated across multiple copies. We took the matching rules from smart animate and the selection behavior from component properties to let users “select all matching layers” (⌘ Command + ⌥ Option + A) everywhere else, too.

But we soon realized that selecting all matches was too much. Our users often want to make changes to only some of the frames. So, we added an additional option: holding shift highlights any matching layers, and users can drag to only select other matching objects. This new behavior happens when you start your drag outside of a frame. If you start your drag inside of a frame, we preserve the previous behavior of adding to or removing any object from your selection.

Keeping a mode for variants

Finally, we circled back to the spark that ignited this journey years ago: variants. When managing variants, there’s often a need to edit all of them collectively. To streamline this process, we introduced a feature that keeps multi-edit on, allowing users to remain in this state while editing variants.

Even though our original breakthrough was to think of multi-edit as not a mode, a mode proved to be a necessary feature for unlocking efficiency. Bulk actions like quickly selecting the next element, or creating a button label text layer across all variants needed a dedicated space for where this could all happen.

Fine tunings

Seeing all these decisions and micro-adjustments come together is incredibly satisfying. Being able to apply this level of detail and care is not only what brought me to Figma six years ago, but is what keeps me here today. Multi-edit gave us an opportunity to polish up some behaviors, as well as introduce a few small, but notable visual improvements. Here are a few of my favorites:

Knowing when it’s ready

Sho K.

Multi-edit is the feature which has had the longest gap between initial idea and launch. Over those years, we kept picking it up and putting it down, and we kept polishing and iterating on it. It feels like a rock that we have been tumbling in a rock tumbler until it is shiny and smooth.

One of the odd things about this process is that as we refined multi-edit, it almost started fading away. We’ve been living with multi-edit internally for months now, and we’ve kind of stopped noticing it—until we switch back to the production environment, and we realize how inefficient things were before!

There’s a part of me that wants to keep refining, because every day, we find new things that could be better when dealing with multiple objects. The change to how we align objects across frames is something we discovered and implemented just a few weeks ago. My guess is that we’re going to keep making these discoveries after we launch.

I also have a nagging fear about things we might have broken. We’ve changed a lot of subtle behaviors, and there’s always the potential that we’ve made something worse for folks who depend on a certain way of working. We’ve done a ton of testing, of course, and we’ll respond quickly to any issues that arise, but it’s nerve-wracking to make deep changes, knowing that millions of people depend on Figma to do their daily work!

And yet, I’m also incredibly excited. Multi-edit is something we’ve been dreaming about for almost five years now, and it feels great to show you how it works. I hope these changes resonate with you, and as you encounter things that you think should work differently, please send us your feedback so we can make it even better.

Ready to get started? Check out our playground file to start exploring multi-edit.