Adobe XD plugin

How to use this template

Is this your first time using Tiled Templates? We’ll show you around!

1. Downloading

Start by downloading the file for the design tool of your choice. Inside this folder, alongside the design file you will find the fonts used in this microapp, make sure to download these before opening the design file. You will also find a collection of assets used in the microapp such as videos, gifs, or images that you will later add to your microapp inside the Tiled builder.

2. Make it your own

Once you’ve opened the file, simply update the colors, logos, copy, images, and other content with your own. We’ve made it easier to make quick changes throughout the entire document and provided you with a variety of page layouts and UI elements to use. Follow the directions inside of the design file and you’ll have a brand new custom microapp in no time!

3. Sync or Upload Your Designs to Tiled

Download our Tiled plugins for Adobe Xd or Sketch and sync your designs to Tiled instantly. To do this, select an existing microapp in your library from the dropdown menu inside the plugin or create a new one. Select the artboards you wish to sync to Tiled and select ‘Sync’. Refresh the Tiled builder tab in your browser and you will see all of your page designs have synced. 

If you are using another design tool (ie. Figma, Adobe Illustrator, Adobe InDesign, Powerpoint, Slides etc.) export your pages in the format of JPEG, PNG, or another image format. Open your microapp in the Tiled microapp builder and simply drag-and-drop your exported images into the builder. Your images will now live in the Assets panel in the bottom right corner. Add new pages to your microapp and place your designs on the blank canvas’.

4. Begin Assembling

Once you’ve added your pages to Tiled, begin layering interactive Tiles on top of your designs. You can add things like hotspots, images, galleries, videos, and more. For more information on building follow these tutorials here.