Every microapp has its own asset library which contains images and videos that can be used in your microapp. Typically, microapp designers create microapp pages in a design tool like Adobe XD, Figma or Sketch. When artboards from these tools are synced to Tiled the artboards are saved as png's within your microapp assets panel. For more information on syncing check out Syncing with Plugin Overview. You can find the asset library in the Assets Panel of the Microapp Builder in the bottom right corner:
You can sort the assets in this panel by clicking on Name or Date. Additionally, you can enter the name of the desired asset to locate it in the Assets Panel.
Add Assets to the Assets Panel
Supported File Types.pdf .gif .jpg .jpeg .png .svg .mp4 .mov
If you experience issues uploading your assets, ensure the file name only contains alphanumeric characters and try to re-upload your asset.
Files can be added to the Assets Panel by any of the following methods:
- Syncing your designs with a Plugin. Read more.
- Drag and drop your images or videos from your computer to the Assets Panel.
- Click the + icon under the search bar to access the Open dialog. Navigate to the location of your files on your local machine and select the files you want to add to the Assets Panel.
Asset Size Considerations
Tiled has no maximum file size for assets or microapps. However, if you are making a large microapp, especially with images or videos larger than 10 MB a piece, the performance of your microapp may be impacted by the size of the asset. For best performance, Tiled recommends keeping the total size of your microapps under 300 MB and compressing your assets where possible.
For optimal video performance, Tiled recommends that the size of individual video assets does not exceed 10 MB and that the total size of all video assets is not greater than 50 MB. Additionally, Tiled recommends the following:
- Compress all of your videos before they are imported into Tiled.
- Ensure that videos used as backgrounds and motion graphics do not exceed 10 MB.
- If using longer/larger videos in your microapp, do not turn on the Autoplay setting to accommodate load times.
If your microapp exceeds these recommendations, Tiled recommends that the microapp is downloaded to a local device for viewing to mitigate some of the lagging and loading issues that your viewers may experience.
Delete an Asset from the Assets Panel
To delete an asset from the Assets Panel, right-click the asset and select Delete.
Any asset deleted from the Assets Panel will be removed from your microapp. Deleting an asset can be undone with the hotkey ⌘Z.
Use Asset Libraries
Before you start using assets from the asset library in the builder, you must have at least one asset in your asset library. Follow these links to learn how to create a new Tiled asset library and upload assets and How to create an Adobe CC asset library and sync content.
1. In the Assets Panel click the other tab called Libraries.
2. You will see all of the assets from your asset libraries appear in the list. You can filter by asset library and search for assets by name.
3. When you identify an asset you wish to use in your microapp, drag and drop the asset from the Libraries panel to a page, page state, or overlay. You will now see the asset appear in the Assets tab in addition to the Libraries tab.
⚠️ IMPORTANT NOTE
If an asset library asset is being used in a microapp and is later deleted from the asset library, the microapp will remain unaffected. The asset will remain listed in the asset panel's 'Assets' tab but no longer in the ‘Libraries’ tab.
If an asset library asset is being used in a microapp and is later updated in the asset library, the user is required to publish in order to see the asset updated in their microapp. If the user does not publish after the asset is updated, the draft version of the microapp will appear updated but the published version will be unaffected.