Tiled Plugin for Figma

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 and create adaptive frames. 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: Download and Install the Figma plugin

  Download the Tiled Figma 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. 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. 

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.