Setting Up Smart Objects

Overview

Any element on your template screens can become a Smart Object if you need it to be. The benefit of setting up a Smart Object is that once applied, any edits will automatically apply to the same element on every screen throughout your template. So it saves you from editing those elements repeatedly, and ensures a visual consistency throughout screens. If you're ready, let's get set up a Smart Object!

Instructions

1. Start by finding a template which has a repeated element throughout the screens. This could be a logo, a navigation item, or maybe a user's avatar icon.

2. Click the element and consult the toolbar appear on top of your selection.

3. Click the hexagonal icon and choose New Smart Object from the dropdown.
   

4. Give your Smart Object a name; the name will only be visible to you and other editors.
   For this example, we'll name our Smart Object "Company Avatar"

5. Click Create Smart Object

6. Now, you will be presented with the option of applying the Smart Object to other screens. This is where you can enable for changes of one element to be applied throughout your template. Click Apply to more screens for the magic to happen, or feel free to hit Skip to save and continue later.
7. After clicking Apply to more screens, you'll be presented with a loading screen, it may take a while to find all the matches depending on how many screens are in the template. After loading, a confirmation of how many screens were found with the matching element will display. Click Got it, to return to editing, or click More details to see an overview of where the Smart Object applied. 
   
   Important: In some cases the Smart Object won't be applied to a certain screen if there is no matching element, and you’ll be notified accordingly.
   
   
8. If you click More details, a side panel will appear indicating which screens the Smart Object is present on. If you wish to remove the Smart Object from a matching element on any screen, simply toggle the screen off. 
9. To return to editing, simply click the X in the upper right side of the side panel.
10. If you wish to return quickly to More details, you can access it in two ways:
    1. Click on the Smart Objects icon in the Navigation and hover over a specific Smart Object, click the three dots in the upper right side of the thumbnail and click More details.
    2. In the editor, click on an element which has a Smart Object applied to it, and click on the Smart Object icon in the toolbar. You will see the options to view More details, or to Unapply that Smart Object individually.
       
11. Lastly, if you do choose to unapply the Smart Object from a particular element, either from the More details panel or the element toolbar, you can always add it back. If it is possible to apply an existing Smart Object to an element, a blue dot will appear next to the hexagonal icon with the option to apply it. 
    

FAQ

Can I update a Smart Object?

Once a Smart Object has been applied to a screen, you can still make changes to the content within it. These edits will affect any of the other screens where that Smart Object has been applied.

I tried to apply the Smart Object but it says “Not on this screen,” what does that mean?

Smart Objects are used to replicate edits on similar elements across your template, therefore they can be applied to additional screens only if the same element exists there. If it is not, you’ll be notified that it can’t be applied. Note that sometimes elements might look similar on the surface but their HTML representation is different, for example an active navigation item, versus a non-active one.