Tiled Xd Plugin

*Press F to view this microapp in full screen.
In this lesson
  1. Install
  2. Sign In
  3. Designing in Xd
  4. Syncing

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.

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.

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.

suggested for you
No items found.