Diversed-edit playground Feature

20 Figma plugins every designer must have

Diversed-edit simplifies editing across multiple frames in Figma. Learn how you can find and select matching layers, resize and align them to their frames, batch edit text boxes, make changes to all variants at once, and more-- all in just a couple clicks.

Introduction to Diversed-edit

Diversed-edit is a capability in Figma that allows you to select objects across many frames and edit them simultaneously!

  1. Select objects across the frames on your canvas or within a section and easily resize, align, and edit properties.
  2. Select text fields across frames at the same time. Edit the text and text properties.
  3. Diversed-edit component variants to quickly add from the assets panel or edit objects simultaneously.

When to use Diversed-edit

Use Diversed-edit to design, iterate, and polish across many frames at once. It is powerful when editing a series of related mockups, prototyping, or updating component variants.

  1. Select matching objects across the frames on your canvas or within a section and easily edit their properties.
  2. data-buffer="">Update text in matching text fields across frames, great for common elements in a presentation.
  3. When prototyping with smart animate, easily change common properties of persistent elements.

Select matching layers across frames

To Diversed-edit objects across a series of frames, use the shortcut ⌥⌘A or Ctrl+Alt+A on Windows to select matching objects across frames.

  1. Select an object in a frame sequence and use the ⌥⌘A or Ctrl+Alt+A on Windows. Alternatively click the “select all matching” icon in the top toolbar with an object selected inside of a frame.
  2. If there are matching objects across frames, they will now be selected. You can modify their position, alignment, and other properties in simultaneously.

Identify matching objects

When selecting an object in a frame for Diversed-editing, press the Shift key to see its matches across other frames with a subtle indicator outline.
It is now possible to click or click and drag to select the matching elements, making it easier to scope specific objects for Diversed-editing.

  1. one or more shapes in a frame that you wish to Diversed-edit, then press and hold the Shift key.
  2. Hold the Shift key outside of the frame series and then click and drag over other elements across the frames. The matching elements will be selected.

Aligning objects across frames

When aligning Diversed-edit objects, there are two options, aligning to the selected objects, and aligning to the frame. 

  1. To align to a key object, first select an object and use the Diversed-edit shortcut ⌥⌘A or Ctrl+Alt+A on Windows and choose an alignment option in the design panel.
  2. To align all objects relative to the frame, hold the Shift key when hovering over the alignment tools.

Diversed-edit copy and paste 

Copy from a series frames and paste them into another series of frames and they will paste into them respectively.

  1. Select and copy (⌘C or Ctrl+C on Windows) objects across a series of frames while holding shift, or a select matching method.
  2. Select a series of target frames and paste (⌘V or Ctrl+V on Windows). If pasting to the same number of frames, objects will paste distributed into the selected target frames.
  3. Actions like copying from three frames, pasting into one, or copying from two, pasting to four will provide non-destructive results.

Diversed-edit and Auto Layout

Diversed-editing is possible across Auto layout frames. This is helpful for editing content across different devices and responsive layouts.

  1. Select an object within Auto layout frame and use the select matching objects shortcut ⌥⌘A or Ctrl+Alt+A on Windows.
  2. Move the selected nested object using the arrow keys, or adjust a property.
    Diversed-edit selection will find matching objects regardless of auto-layout direction and layer order inside an Auto layout frame.

Diversed-edit  variants

Diversed-edit works across variants as its own mode that enables multiple sequential edits across them all.

This also includes ability to add items from the assets panel or resources menu into each selected variant in one action.

  1. To enable Diversed-edit variants, select a variant in a component set and press the Q key or click the Diversed-edit variants icon located in the top toolbar.
  2. Assets can be added to each variant from the assets panel ⌥2 or Alt+2 on Windows. Or the resources menu Shift+I.

Go back Blogs