Tiled Plugin for Figma

With the Tiled Figma plugin, you can easily create microapps directly from Figma by adding interactive elements to your designs and synchronizing the overall experience as a microapp in Tiled.

Before getting started you will need to ensure you have a Tiled account. If you do not have a Tiled account, you can sign-up for a free account.

Step 1: Find and run the Tiled Figma plugin

Run plugins from the Figma community

• Go to the Figma community page for Tiled.
• Click the blue Try it out button in the top right corner.
• You will be redirected to a draft Figma file where you can try out the plugin. 
  • To use the plugin in a different file, click Resources in the toolbar, navigate to the Plugins tab, and select the plugin under Recents or Saved Plugins.

Run plugins from a Figma design

• Click Figma Icon in the top left toolbar.
• From the Plugins tab, search for the Tiled plugin from the Community.
• Click on the plugin to view its details.
• Click Run to run the plugin in the current file.

For additional details on running and saving Figma plugins go here.

Step 2: Sign in

Select Tiled from your list of installed plugins in the Resources tab and click Run. 

To sign in you can use the same login information you use when logging into Tiled on the web browser.

Log into the Tiled plugins with SSO

If your company leverages single sign-on when logging into Tiled, you will be authenticated the same way with our Tiled plugin. You must have SSO enabled within Tiled's account settings before using this feature.

1. Select Google or Okta button to continue your authentication in a web browser.
2. Add your company's domain. (Usually the domain associated with your work email).
3. Add your SSO login information to receive a confirmation message and a link to return to the figma file.

Step 3: Select an existing microapp or create a new microapp

Once logged in, the Welcome screen will appear and display selections to continue building an existing microapp or create a new microapp. 

• To continue building an existing microapp select an existing microapp.
  • Select the library where your existing microapp lives.
  • Select the existing microapp.
  • Select the adaptive format you want to work on first, if more than one exists.       

• To create a new microapp:
  • Select the Library the new microapp will live within.
  • Create a new microapp by clicking the + icon.
    • Name your microapp.
    • Select an adaptive format size for your microapp.
    • Select the category the microapp will live under.
  • Once your microapp has been created, the Welcome screen appears with your new microapp information populated.

Click Next to start designing and adding interactivity.

Step 4: Design and add interactivity in Figma

Now that your microapp is selected, design and add interactivity in Figma. You will notice that the plugin has contextual navigation, meaning depending on what you select in your design the plugin screen will react to help you take the next step.

You can quickly add frames sized for Tiled and design your microapp as you normally would in Figma or start from a Tiled template.

• To create new frames that are the size of your microapp, click the Create a new page CTA on the Home Screen and select the adaptive format you are building.
• To learn more about interactive tiles, select any of the tiles listed on the Home Screen and follow the steps to add interactive tiles.

Adding interactive tiles

Interactive tiles can only be created within frames that match the microapp's adaptive size. The quickest way to add interactive tiles is to select a layer within a frame. 

Once you have selected a layer, the plugin screen will update for you to select a tile to convert your layer to. After converting your tile the screen will update confirming it was converted.

Tiles can be created in Figma, but certain tiles will sync to the builder differently and need to be further configured in Tiled. Use the table below to better understand what you can do with each tile.

Step 5: Sync your microapp to Tiled 

Syncing is seamlessly tied into your existing design process, it can be done whenever you see the sync button at the bottom of your screen. Once you hit sync, any of your selected frames and assets will port over to Tiled (Note: if you have multiple adaptive sizes, they will need to be synced separately).

After a page or asset is initially synced, it can always be re-synced to update the existing version in Tiled. It’s important to note that while items such as asset size and design will be updated, things like page order or manual asset placement in Tiled will not.

To display the sync button you can:

• Select a single frame
• Select multiple frames
• Select a single layer you converted to a tile

Step 6: Publish in Tiled

After designs have been synced, you can open the microapp in Tiled from the plugin.

In Tiled, add any remaining interactions or rich media including video assets, gallery assets, and embedded sites. Hit publish and distribute the microapp to your team so they can share it with your audience.