Using Tiled Plugins for XD and Sketch
- Install the plugin
- Sign in and connect to a microapp
- Sync to Tiled
- Finish in the builder
Install the plugin
If you’re designing microapps in Adobe XD or Sketch, you can use our plugins to sync your pages and assets to a microapp and get feedback in your design file. With the Tiled plugin, you can create and update pages more efficiently, link hotspots in your design tool, and feel confident your asset-sizing is optimized for Tiled.
Update to the latest version of your design tool and download our XD plugin here and Sketch plugin here.
Sign in and connect a microapp
Open the plugin in your design tool to sign in to your Tiled account. Then you’ll be able to either connect to an existing microapp or create a new one by selected the “create new microapp” option at the top of the dropdown and choosing a name and an adaptive format.
Sync to Tiled
Once your microapp is designed, you’ll be able to sync your pages, assets, and prototyping links to the builder. Hit the blue “sync” button and select the adaptive size you would like to sync to. If you have multiple adaptive formats, select the pages and assets for one format and choose “selected pages” to sync. Then repeat with the set of pages for your other format.
What will sync?
- Artboards the same page size as your microapp will automatically sync as pages
- Artboards of a different size will sync as assets that can be placed in tiles
- Prototyping links between pages will sync as hotspots. Note that prototyping links to assets will not sync to Tiled.
Finish in the Builder
In the builder, refresh your page to see your synced content and finish building your microapp by placing assets and rich media and adding additional hotspots. If you want to make an update to your designs, you can simply make changes in XD and sync again, and your pages and assets will reflect the latest version.
After you publish your microapp, your team can leave feedback on your microapp using the Tiled mobile app. To see feedback they leave directly in your design file, navigate to the feedback tab in the plugin. Click the target icon next to each item to zoom to the associated screen and check the box to resolve.