We’re excited to release the Tiled plugin for Figma to make building microapps easier than ever. With the plugin, you'll be able to sync screens, create adaptive frames, and link hotspots. Now you can sync with Tiled to quickly distribute your microapps, gain powerful insights, and make the iteration process seamless.
Using the plugin
Step 1: Install the plugin
Download the plugin and open it to install. Then navigate to the "Plugins" tab in the top nav and choose Tiled Plugin. The plugin will open in a new window and ask you to sign in.
Step 2: Sign in and create a microapp
Select the plugin icon in the bottom left sidebar of Sketch. 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.
Once you’re signed in, you’ll see two dropdowns: Library and Microapp. Use the Library dropdown to connect your Figma file to your desired existing Tiled Library. Use the microapp dropdown to connect your Figma file to an existing Tiled microapp or create a new one. If you create a new microapp, be sure to select the correct adaptive version to match your frame size.
When creating a new microapp, you will name your microapp, select the adaptive format size of your microapp, and decide what category your microapp will live under within your Tiled Library. Once you have created your microapp the plugin will take you back to the main screen with your new microapp information populated.
Step 3: Design in Figma
Now that your microapp is connected, you can quickly add frame sized for Tiled and design your microapp as you normally would in Figma. Note that frames the size of your adaptive format will sync as Tiled screens, and odd-sized frames will sync as assets.
Then, use hotspots to link pages (only hotspots, not links sync to Tiled). Links between pages will sync to Tiled as hotspots, while all other links (such as those on or to scrolling sections or external URLs) 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 to. You'll have the option in the plugin to choose either only your selected frames or all the frames on your sketch page. As you continue designing, you can always sync again to update either individual pages or your entire microapp. Subsequent syncs will not alter changes like page order or asset placement made in Tiled — they'll just update your microapp to reflect changes you made in Figma.
Step 5: Publish
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 it with your customers.