Importing Assets to the Builder

In this lesson
  1. Overview
  2. File types
  3. Sizing best practices
  4. Drag and drop into Tiled

Overview

If you’re designing microapps in a print design or presentation tool such as Adobe Indesign, Powerpoint, Google Slides, or Canva, you’ll need to export your designs to drag and drop into the builder and create pages in your microapp. You’re also able to add additional assets, such as images for galleries, videos, and gifs that can be placed in tiles.

If you’re designing in Adobe XD or Sketch, use our plugin to save time (link).

File Types

You can import images to the builder using PNG, JPEG/JPG, and PDF file types, so you can design your microapp in any tool that supports these exports. When exporting files, make sure you use the same file name each time so that Tiled can auto-update your microapp as you update with new versions.

You’re also able to add gifs and videos in MOV and MP4 files to the assets panel.

Sizing Best Practices

One of the main ways to negatively impact microapp performance is by uploading assets at the wrong size. Assets that are too small or not appropriately sized for the microapp page often cause blurriness. To prevent this, make sure to set your document size to match the dimensions shown for your adaptive version.

You can choose from four sizes to build your microapps:

  • Desktop Wide:  16:9 aspect ratio (3840x2160p)
  • Desktop Standard:  8:5 aspect ratio (2048x1280p)
  • Tablet: 3:4 aspect ratio (2048 x 2732p) (can be oriented portrait or landscape)
  • Mobile: 9:16 aspect ratio (1080x1920p) (can be oriented portrait or landscape)

Tiled has no maximum file size for uploaded assets or final microapps, so you are free to make microapps as expansive as you wish — but if you’re making a very large microapp, you’ll need to be aware of issues with loading and lagging that come with this. We see best performance with microapps under a total size of 300 MB.

Video is the main way microapps become large and bloated. We suggest compressing all videos before importing them into Tiled. If possible, try to use videos under 10 MB, especially for backgrounds and motion graphics. If you plan to have longer videos in your microapp, it’s best not to set these on autoplay to accommodate load time. We recommend keeping the total size of all videos in a microapp under 50 mb.

To compress videos, we like using Handbrake. We even made a tutorial to help you use it.

Drag and drop assets to Tiled

Once your assets are ready to go, you can simply drag them over your window to upload them to the builder. They’ll appear in the assets panel on the right sidebar, where you can grab them and drag onto the canvas to place as page backgrounds or in tiles. To add an asset as a background, create a new page and drag your asset over the blank canvas or background box in the right sidebar.