Replo allows you to select multiple components and apply styling updates to all of them in bulk.

Multi-selection allows users to efficiently perform actions on multiple items simultaneously, saving time and enhancing productivity in workflows.

Selecting Multiple Objects

Users can select multiple objects in 2 ways:

1. From the component 'Layers' in the lefthand panel

2. Directly on the device frames

Selecting in the Layers Panel

To select multiple components from the Layers panel, use the following methods:

• Hold CTRL (on Windows) or CMD (on macOS) and click on individual components to select them one at a time.

• Hold SHIFT and click to select multiple components in a range.

Selecting Components in Device Frames

To multiselect items within the canvas, press and hold SHIFT while clicking on multiple elements.

When multiple items are selected, users will observe the following:

• A selection box surrounding each selected component.

• The standard pill indicator will not be displayed.

Editing Multiple Components

When you select multiple components, you can modify their shared styles in the right panel:

• The design tab will only show the style properties common to all selected components.

• If components have different values for a specific property, the value will be displayed as "Mixed."

• Other tabs such as "Config," "Actions," and "Accessibility" will not be visible.

• Canvas preview features, such as padding adjustments, won’t show live updates with multiple selections. Changes will appear only after adjustments are completed.

Editing Multiple States

If you have multiple components selected, but there are different 📄 States selected for each component, your edits will apply to the states which you have selected for each component.

For example, if you select a component, then select its Hover state, then select another component in the Default state, you'll be editing the Hover state for the first component and the Default state for the second component at the same time.

In this case, you'll see a message which says "Mixed selected states" in the editor. If you want to edit the default for all states, you can select the "Default" state for each component individually before selecting them all.

FAQ

Is it possible to edit multiple components in different states?

It is! However, updates will only be made to each component's current state. See Editing Multiple States for more info.