Streamlining Your Design Workflow with Figma's Multi-Edit Feature
In the world of design tools, Figma has consistently evolved, introducing innovative features that enhance productivity and creativity. One such is the introduction of multi-edit, a powerful tool that allows designers to seamlessly select and edit matching objects across their designs.
Prior to the multi-edit feature, working with multiple elements in Figma could be a cumbersome process. Selecting and modifying objects, aligning them and updating their properties often required intricate manoeuvring and a deep understanding of the tool's underlying structure. With multi-edit, Figma has revolutionised the way designers approach their workflows, making it easier to collabourate, iterate and refine their designs.
Let's consider explore how the core capabilities of Figma's multi-edit can streamline your design process.
Identifying Matching Objects
The foundation of multi-edit is the concept of "matching objects": layers that share the same name, whether they are frames, groups, shapes or text. These matching objects can differ in size, appearance and even nested content, as long as the parent-level layer names are identical. Figma provides a helpful visual cue to identify matching objects - by holding the Shift key while an object is selected, the tool highlights all matching layers within the current page, making it easy to spot potential candidates for multi-editing.
Selecting Matching Objects
Once you've identified the matching objects, there are three primary ways to select them:
- Using the new "Select all matching layers" button in the top toolbar, which becomes available when an object is selected.
- Leveraging the keyboard shortcut Command + Option + A (Mac users) or Ctrl + Alt + A (Windows users), which mimics the traditional "Select all" functionality but targets matching objects.
- Clicking outside a frame and dragging inward while holding the Shift key. This method selects the original object and all matching objects within the frame.
Editing Matching Objects: The Basics
With the matching objects selected, designers can now take advantage of the multi-edit capabilities to enhance their design process. Here are some of the fundamental editing features:
- Scale: When scaling a selection of matching objects, Figma ensures that the adjustments are relative to their respective frames, preserving the original positioning of the elements.
- Alignment: A common frustration in the past was aligning multiple selected objects, which often resulted in them being stacked on top of one another. With multi-edit, designers can now align the selected objects relative to their frames, ensuring that proper positioning is maintained.
- Transformations: Figma's multi-edit feature allows for both absolute and relative transformations, such as setting a specific X and Y position or applying a calculation-based adjustment (e.g. increasing the width of each button by 24 pixels).
- Re-parenting Nested Frames: One of the most powerful aspects of multi-edit is the ability to move selected matching objects in and out of frames and groups, enabling designers to experiment and restructure their designs with ease.
- Copy and Paste: The multi-edit update has also enhanced Figma's copy and paste functionality.
- Designers can now copy a series of frames and paste them directly into a matching set of frames, retaining the original positioning of the elements.
Editing Matching Objects: The Advanced Features
While the basic editing capabilities are impressive, Figma's multi-edit feature also includes several advanced functionalities that offer further improvements to the design experience.
Multi-edit Text: Updating text content across multiple matching text layers was quite a challenge before multi-edit. Now, designers can simply select the matching text objects, click the new multi-edit text icon (or press Enter) and start typing. All the selected text layers will instantly update to reflect the changes. Additionally, you can apply or create text styles and adjust properties such as line height, all while working with the multi-edit selection.
Multi-edit with Auto Layout: One of the most exciting aspects of multi-edit is its integration with Figma's powerful Auto Layout feature. Suppose you had several objects, such as images, within various designs and you want to apply Auto Layout to organise them into a grid. Before multi-edit, this would have resulted in a single, large frame with Auto Layout applied, which was unlikely to be what you wanted. Now, with multi-edit, you can apply Auto Layout to each cluster of matching objects with just a tap or by using the Shift + A keyboard shortcut.
Furthermore, if any ordering or visibility adjustments need to be made to one object across designs within an Auto Layout frame, you can select that object and then, with all matching objects selected, make the necessary changes. The multi-edit selection can locate matching objects within the design, regardless of the parent frame's ordering and direction settings, making the entire process seamless.
Multi-edit Components: Transitioning from the exploratory phase of a design to building a robust component library can be a challenging task. Figma's multi-edit feature introduces an extremely useful new capability - the ability to select matching objects and swap them for instances of a new component. To use this feature, you should first select the object that you want to turn into a component. Then select any matching objects and with a simple right-click or the Command + Option (or Alt) + K keyboard shortcut, Figma automatically swaps each selection out for an instance of the newly created component. While this feature is extremely powerful, there is one limitation worth noting. Currently, Figma does not yet preserve differences in content when creating the component, even if the layer names are identical. For example, if two matching buttons are selected and one says "Contact Us" and the other says "About Us," Figma will reference and use the content of the leftmost selected item when creating the component.
Multi-edit Variants: For designers working extensively with component sets, Figma's multi-edit feature includes the ability to edit variants seamlessly. When component properties were first introduced, Figma included the option to select all matching elements across variants within a component group, making it easy to adjust properties like ordering or visibility.
With the multi-edit update, this functionality has been further enhanced. Designers can now enter a "multi-edit variant mode" by pressing the Q key. While in this mode, any changes made to one of the variants, such as adjusting text, adding an icon, or modifying size, are instantly applied to all variants within that component group. (Be careful not to accidentally press Command or Ctrl + Q, to avoid the risk of accidentally quitting your workspace). This is particularly useful when working with elements that need to be consistently present across all variants, such as an icon. Instead of copying and pasting the icon into each variant, you can now simply bring it in or make the necessary edits in one variant and the changes will propagate across the entire component set.
Mastering the Shortcuts
Figma understands the importance of keyboard shortcuts in enhancing productivity and the multi-edit feature comes with a set of helpful shortcuts to streamline the design workflow:
- To select all matching objects, use Command + Option + A (Ctrl + Alt + A on Windows).
- To select specific matching objects, begin dragging outside a frame while holding Shift.
- To edit the content of multiple text layers, with all matching objects selected, press Enter and start typing.
- Press Q to toggle the multi-edit variant mode on and off.
Unleashing the Power of Multi-Edit
Figma's multi-edit feature represents a significant leap forward in design tool evolution, empowering designers to work with greater speed, flexibility and precision. By streamlining the selection and editing of matching objects, this update has the potential to transform the way designers approach their projects, from the exploratory phase to the final product. So whether you're aligning elements, updating text content or building robust component libraries, the multi-edit feature provides a seamless and intuitive interface, allowing you to focus on the creative aspects of your work without getting bogged down by tedious, repetitive tasks.
As you integrate the multi-edit feature into your design workflow, expect to experience a newfound sense of efficiency and the ability to iterate your designs with greater ease. It’s a testament to Figma's commitment to enhancing its product that it continues to expand what's possible in the world of digital design.
Related Training Courses
Graphic Design
Useful Resources
- Figma Multi-edit playground Learn how to select matching layers, resize them, batch edit text boxes etc
- Multi-Edit in Figma: A 2024 Tutorial Tutorial from Pierluigi Giglio
- Figma's Multi-edit: A powerful new way to work Tutorial from UX News
- Multi-edit for editing objects across multiple frames and components Article from AlternativeTo magazine
- Figma's new multi edit tool Article by TD Sunshine on DesignWhiz