How-to guideGet a task done

Publish a Figma design to Template Builder

The Figma to Storyteq plugin publishes frames from a Figma design to Template Builder, either as a new template or as new sizes for an existing one. This guide covers opening the plugin, publishing, and finishing the template in Template Builder.

This plugin is different from the Asset Picker plugin for Figma, which places assets from the DAM into a Figma file.

Prerequisites

Before you begin, ensure you have:

  • A Figma account. A free account works, in the Figma web app or the desktop app.

  • A Storyteq account with at least the Builder role for Templates, under Adaptation Studio. The Template Builder role preset includes this. Each role’s permissions are listed in User role presets and permissions.

  • A design set up for import. Figma import reference lists how each Figma property imports, and how to set it for the best result.

Open the plugin

  1. Open a Figma design file that has at least one frame.

  2. Select the frames you want to publish.

  3. Run the Figma to Storyteq plugin:

    • In the desktop app: open the plugins menu and search for Figma to Storyteq.

    • In the web app: open the Figma to Storyteq plugin page in the Figma Community, select Open in, and choose your design file.

  4. The first time you run the plugin, sign in with your Storyteq account.

The plugin opens on an introduction screen, where you choose to create a new template or update an existing one.

Publish a new template

  1. On the introduction screen, select the option to create a new template.

  2. Follow the plugin’s steps to choose the frames and layers to publish.

  3. Publish the template. The template opens in Template Builder.

Add new sizes to an existing template

Updating an existing template adds new or changed frames to it, and keeps its dynamic properties, logic, parameters, and naming scheme.

  1. If the template is open in Template Builder in another browser tab, close that tab.

  2. On the plugin’s introduction screen, select Update Existing Template.

  3. Select the template, wait for it to load, and confirm your choice.

  4. On the Frames tab, check which frames the template already has. Frames the template doesn’t have are marked N/A in red.

  5. To add a frame, select it in Figma, then select Add Frames in the plugin. New frames are marked new in green.

  6. On the layers panel, check the new layers, which are marked with a green dot. To keep a layer’s properties, give it the same name as the matching layer in the template.

  7. Optionally, select whether to include hidden layers, and whether to add image layers to the asset library.

  8. On the final screen, clear any frames you don’t want to export.

  9. Select Update Template. The plugin shows its progress as a percentage, then opens the updated template in Template Builder.

Finish the template in Template Builder

Some properties don’t import from Figma, so check the template in Template Builder before you publish it:

  1. Set the background colour.

  2. Set any blend modes.

  3. Check any layer whose Figma effects aren’t available in Template Builder, because the import skips them.

  4. Add the template’s dynamic elements, if it’s a new template.