Synced objects are assets that, when edited, will update across every layout variant or page they are included on. For example, let's say you're building a microsite with a consistent navigation bar across multiple pages. Then, you want to update the included logo. If your navigation bar is a synced object, you can replace the logo on one page, and the update will sync across all other instances of the navigation bar pages across every page.
Or, let's say you're using the same CTA across all buttons on your microsite, and you want to change the wording. With synced objects, you only need to update the button once, and the CTA changes will sync across all other instances.
What objects can be synced?
Textboxes
Images
Videos
Shapes
Hotspots
How to create a synced object:
Select the desired asset on the canvas
Select the "Sync Object" option in the bottom right corner of the Layers Panel
Once completed, the new sync object's bounding box will become green when it is selected on the canvas, and it will have a "Synced Object" icon next to its name in the Layers Panel.
How to create a synced object using multiple assets:
It's important to note that synced objects are incompatible with standard groups in Studio. Instead, when you create a sync object, you essentially create a "synced group" that contains the assets. So, if you want to create a synced object consisting of multiple assets (for example, navigation bars, buttons, etc.), ensure the assets aren't grouped, then:
Select all the assets you want to include in the synced object
Select the "Sync Object" option in the bottom right corner of the Layers Panel
Synced objects are similar to standard groups in the Layers Panel and on the canvas; however, we still only refer to them as synced objects (instead of synced groups for those with multiple assets) since they function the same regardless of how many individual assets they include.
How to rename a synced object:
Select the synced object
Double-click on its name in the Layers Panel
Edit the name
Press Enter to save the name change
How to edit a synced object:
Double-click on the synced object on the canvas or in the Layers Panel
Note: a green bar stating "Editing synced object" will appear above the canvas
Select the asset within the synced object you want to edit
Make the desired edits
Select the Exit button on the green synced object bar
As mentioned, any edit made to the synced object will be updated across every layout variant, page, and instance in which it is included.
It is important to note that only edits made within the synced object will update across instances, as in, edits made while the green "Editing synced object" bar is visible. Resizing, rotating, or changing the opacity of a synced object as a whole will not sync across instances.
This allows for greater flexibility when using synced objects across multiple variants (i.e., resizing the synced object to fit a mobile canvas without affecting its size on the desktop canvas).
Synced objects FAQs:
Can synced objects have states?
Yes, the individual assets within a synced object can have multiple states. The sync object will operate similarly to a standard group with the "Use group as trigger" function toggled on.
Can interactions be applied to synced objects?
Yes, interactions can be applied to the entire synced object or an individual asset within it (i.e., a hotspot within a navigation bar synced object). With the former, the interaction target can be any asset on the canvas. With the latter, the interaction can only target other assets within the synced object.
Do interactions that are applied to synced objects sync between instances?
Only interactions targeting other assets within the synced object will sync across instances.
Can a synced object be the target of an interaction applied to a different asset on the canvas?
Yes, the object state as a whole, not an individual asset within, can be the target of an interaction applied to a different asset.