Studio users can begin a project in various ways, including templates, importing design files, and blank canvases; however, Editor users must rely on templates either found in the Template Gallery or those created within Studio when starting a new project. So, in a way, templates act as a creative bridge between Studio and Editor, enabling non-creatives to build and edit content. Therefore, it's vital that templates created in Studio are optimized for Editor use as well.
This guide will cover useful tips and best practices for creating templates in Studio. We've separated the suggestions below into categories, including creating assets, interactions, and animations.
Creating Assets
Layers, Groups, and Organization
Avoid having excessive objects stacked on top of each other on the page. Though it is possible to reorder layers, Editor does not have a Layers Panel, so reaching objects on the "bottom" layer takes a bit more effort. Simply put, having fewer stacked objects will result in easier editing.
Use descriptive naming conventions when creating assets/modules. Doing so will make finding and targeting these assets easier within Editor's Interact Panel. (Example: Main_Section_Popup1)
If there are assets in a template you do not want to be editable in Editor (such as logos, brand assets, etc), select those assets in the Studio and uncheck the Editable box under Editor Settings in the Design tab.
Editable checkbox in the Editor Settings of Studio's Design Tab If you intend for your experience to be accessibility-friendly, use groups, not folders to organize your assets.Â
Editor users must double-click or hold Command (Control on Windows) and click on a layer to access the different assets within a group. With this in mind, avoid nesting too many groups within groups when creating templates in the Studio. This will make it easier and faster for Editor users to "click through" groups to reach specific objects.
Fonts
Since Editor users can only use fonts in a template experience that the designer activated in the Studio's Font Library, activate any necessary fonts when creating your template in Studio so they can be used in Editor.
If you've created a Desktop and a Touchscreen (mobile, tablet) variant for your template, make sure your text elements have Sync Text Content enabled to allow Editor users to update text copy on the different variants simultaneously.
Images
If you intend for Editor users to replace images included in a template but want to ensure the aspect ratio remains the same, use image masks set to the desired dimensions. Editor users can replace and scale the masked image but won't be able to change its dimensions.
Images can be synced across desktop, tablet, and mobile layouts. Synced objects reflect updates across all variants when updated. The images must be added to the initial desktop variant before a new tablet or mobile variant is created. Any new content added after a variant is created can not be synced. Learn more about creating mobile variants here.
Colors
Define your color palettes for the specific template experience (Experience Colors) or the whole account (Account Colors) in Studio, so it's easy for anyone using Editor to pick the right color when making edits to a template experience.
Interactions
When applying interactions to assets in a template, use naming conventions for those assets that reflect the interactions you applied to them. This will make it easier to find those assets in case you or other team members need to adjust/add to the interactions later on and will also help with analytics tracking.
 Editors can only add or edit four types of interactions:
Go to Page
Go to URL
Show
Hide
Since Editor cannot yet edit/add hotspots in an experience, avoid using them when including interactivity intended to be updated in Editor. Instead, add interactions directly to objects.
Animations
Use consistent animation styles throughout your templates to create visual cohesion and help establish your brand's identity. (Example: all text layers animate in from the same direction)
Remember, you can copy and paste animations between assets in an experience. To do this:
Right-click on the asset from which you wish to copy the animation in the Studio and select Copy Animations.
Then select the asset you wish to paste the animation onto, right-click on it, and select Paste Animations.
Note: You can copy and paste animations between assets using the keyboard shortcut OPTION/ALT + COMMAND/CONTROL + C or V. Please refer to this guide for a complete list of Studio's keyboard shortcuts.