Build microapps faster

We’re excited to release the Tiled plugin for Adobe XD to make building microapps easier than ever. With the plugin you'll be able to sync screens, create adaptive artboards, and link hotspots. And team feedback submitted through the Tiled App will be visible in XD as well. Now you can sync with Tiled to quickly distribute your microapps, gain powerful insights and make the iteration process seamless. 

Download the Tiled plugin

Using the plugin

Step 1: Install the plugin

Update to the latest version of Adobe XD and download the Tiled plugin.

Step 2: Sign in and connect a microapp

Select the plugin icon in the bottom left sidebar of XD. Choose Tiled from your list of installed plugins and sign in to your Tiled account.

To sign in you can use the same login information you use when logging into the web browser or one of the two single sign-on (SSO) options.

To sign in using our SSO options, select the Google or Okta button in the plugin and you will be routed to the appropriate site to get authenticated and logged in.

Once you’re signed in, you’ll see two tabs: Sync and Feedback. In the Sync tab, use the dropdown to connect your XD file to an existing Tiled microapp. 

Step 3: Design in XD

Now that your microapp is connected, you can quickly add artboards sized for Tiled and design your microapp as you normally would in XD. Note: Tiled artboards will sync as Tiled screens, and odd-sized artboards will sync as assets. 

Use the XD prototype mode to link pages. Note, Page links will sync as hotspots in Tiled, while all other links and rich media will need to be added in the Tiled builder. 

Step 4: Sync your microapp to Tiled 

Hit the blue sync button to sync your microapp to Tiled. If you have multiple adaptive sizes, select the one you'd like to sync. As you continue designing, you can always sync again to update either individual pages or your entire microapp. Subsequent syncs will not alter page order and asset placement in Tiled. 

Step 5: Publish and request feedback

In Tiled add any remaining interactions or rich media including video, galleries and embedded sites. Hit publish and distribute the microapp to your team so they can share with your customers. If your teams leaves feedback in the Tiled App, you’ll be able to see it in XD under the feedback tab. Click the target icon to zoom to the associated screen and check the box once that feedback is resolved. 

Next steps

Please share your feedback and tell us how you're using the Tiled plugin for Adobe XD. Please share your thoughts below and let's continue the conversation. 

All the best in your microapp building, we look forward to hearing from you!!