Add, select, and edit objects across multiple breakpoints
Written by Figma Man
Updated at June 19th, 2025
- Administration – Figma Learn
- Figma Design – Figma Learn
- Get started – Figma Learn
- FigJam – Figma Learn
- Community – Figma Learn
- Help – Figma Learn
- Work across Figma – Figma Learn
- Courses, tutorials, projects – Figma Learn
- Figma Slides – Figma Learn
- Figma Buzz – Figma Learn
- Figma Make – Figma Learn
- Figma Sites – Figma Learn
Table of Contents
Figma Sites was released in open beta at Config 2025. It is currently available on all paid plans, with a limited Starter plan experience coming soon. Learn more about what’s included in the beta.
If your webpage uses more than one breakpoint, you can add, select, and edit objects across all breakpoints simultaneously.
Understanding primary and secondary breakpoints
Every new webpage starts with a primary breakpoint—usually the desktop breakpoint.
When you add additional breakpoints, any changes made to objects in the primary breakpoint cascade to the other—secondary—breakpoints. In contrast, changes made in a secondary breakpoint apply only to that specific breakpoint.
For example, if you drag a hero section into a primary breakpoint, it will immediately appear in all secondary breakpoints. If you add the hero section to a secondary breakpoint, it will only appear on that breakpoint.
This behavior applies to adding, selecting, and editing objects.
Change the primary breakpoint
The desktop breakpoint is set as the primary breakpoint by default, but you can change it at any time. This is useful if you prefer to use a different screen size as the base of your design, like when taking a mobile-first approach. Changing the primary breakpoint won’t change the order of the breakpoints in the webpage—you’ll just see the Primary label switch to the new breakpoint.
To change the primary breakpoint:
- Right-click a non-primary breakpoint in a webpage.
- Select Set as primary breakpoint.
Add an object to multiple breakpoints
What happens when you add an object to a webpage with multiple breakpoints depends on whether you add it to a primary or secondary breakpoint.
Add to the primary breakpoint
When you add an object to the primary breakpoint, it is automatically added to all secondary breakpoints.
Add to a secondary breakpoint
When you add an object to a secondary breakpoint, it is visible on that specific breakpoint and hidden in the other breakpoints. This helps maintain a shared hierarchy in the webpage.
Tip: Instead of adding and then manually tweaking a design across multiple breakpoints, you can add a responsive component that automatically matches the right variant to its corresponding breakpoint.
Select a matching object across breakpoints
Like adding an object, what happens when you select an object in a webpage depends on whether you select it in the primary or secondary breakpoint.
Select an object in the primary breakpoint
When you select an object in the primary breakpoint, Figma automatically selects matching objects in all secondary breakpoints.
Tip: If you want to select an object on the primary breakpoint without selecting its matching layers in other breakpoints, right-click the object and choose Select layer. This limits your selection to the primary breakpoint only.
Select an object in a secondary breakpoint
When you select an object in a secondary breakpoint, Figma only selects the object in that breakpoint.
Tip: If you select an object on a secondary breakpoint and want to select its matching layers in other breakpoints, click Select matching layers at the top of the right sidebar.
Edit an object across breakpoints
What happens when you edit an object across breakpoints will depend on whether the object has been previously edited on a secondary breakpoint.
When you edit an object in the primary breakpoint, Figma checks each of the object’s properties.
- If a specific property has been modified in a secondary breakpoint, an edit in the primary breakpoint will only apply in breakpoints where that property hasn’t been modified.
- If the property hasn’t been modified in a secondary breakpoint, the edit will apply across all breakpoints.
Example
Suppose you have a frame in desktop, tablet, and mobile breakpoints.
- Change the fill color of the frame in the mobile breakpoint.
- Then change the fill color in the primary (desktop) breakpoint.
Notice the updated fill color will only appear in the desktop and tablet breakpoints because the mobile breakpoint’s fill property was previously modified.
Other changes to the frame—like adjusting its height in the primary breakpoint—will apply across all breakpoints, because the height property has not been overridden in any secondary breakpoints.
Tip: If you’ve edited an object in a secondary breakpoint and want it to match the primary breakpoint version again, right-click on the object and select Reset all changes. The object will inherit edits on the primary breakpoint for all the reset properties once more.
Some things to be aware of when editing an object on the secondary breakpoints
Behind the scenes, Figma tries to keep layer organization consistent between all the breakpoints. This means there are some extra restrictions to keep in mind when editing on a secondary breakpoint:
- Deleting objects in a secondary breakpoint will just hide it. You can find hidden objects in the layers panel with the hidden icon.
- It’s not possible to move a layer into or out of other layers from a secondary breakpoint. Grouping or framing objects is not supported from a secondary breakpoint.
- You cannot move a layer out of the webpage from a secondary breakpoint.