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.
Users can select multiple objects in 2 ways:
From the component 'Layers' in the lefthand panel
Directly on the device frames
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.
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.
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.
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.
It is! However, updates will only be made to each component's current state. See Editing Multiple States for more info.