Figma to Storyteq Plugin

What is Figma?

Figma is a powerful design tool primarily used for interface design, vector graphics, prototyping, and collaboration. It's widely appreciated for its collaborative features, which allow multiple users to work on a project simultaneously in real-time. Most creative teams work with either Figma or Photoshop.

With the Figma to Storyteq Plugin you can turn your Figma designs into Storyteq dynamic editable ads. The Figma to Storyteq Plugin enables designers to effortlessly export their Figma designs into Storyteq, turning static visuals into dynamic and customizable ad templates.

Streamline your workflow and scale content production with ease.

1. Efficient Export – Quickly send your Figma designs to Storyteq in just a few clicks.

2. Dynamic Template Creation – Convert static designs into adaptable templates ready for automation with Storyteq’s Ad Engine.

3. User-Friendly Interface – Intuitive, seamless integration between Figma and Storyteq.

Set up a free Figma account

• You can create a free Figma account with your private e-mail.

• Figma offers a web and desktop application with consistent features across devices.

How it works

1. Design in Figma – Create your visuals as usual.

2. Export via Plugin – Use the Figma to Storyteq Plugin to send Figma designs to Storyteq.

3. Customize in Storyteq – Modify and manage your dynamic templates for automated content creation.

Delivering Figma Projects

As a rule of thumb, keep in mind that we import all properties whenever we support the same ones in Template Builder. The ones that are not there in our Template Builder, we support through import, as best as we can.

To achieve an export of the Figma design as smoothly as possible, there are several delivery specs for Figma Projects. Keep this information in mind during the design process and when using the Plugin:

Layers

• Effects not existing in Template Builder

  • Figma effects that are not supported in Template Builder will be skipped from importing.

  • If you ‘flatten’ the layer in Figma (e.g. make it a vector) the layer will be rasterised and has all effects baked in.

• Figma background color

  • Adjust Figma page background color in Template Builder editor.

• Layers with multiple color fills

  • Layer with multiple color fills will be imported as one layer with a mixed fill, as Storyteq supports one fill per layer.

• Blend modes

  • Blend modes are available in Storyteq, but need to be set manually after import - for now.

Image and shape layers

• Strokes

  • A shape or text with stroke set to ‘inside’ or ‘outside’ in Figma → will be transformed to stroke set to ‘center’ in Storyteq.

  • Recommendation: set strokes to 'center' in the Figma file from the start.

• Crop

  • If images are set to ‘crop’ in Figma, the import result is better.

  • Double-click an image, enter edit mode, set to crop, and adjust boundaries.

• Shape filled with image

  • A shape filled with image in Figma → will be translated into an image layer + a shape layer in Template Builder (e.g. not the desired result)

  • A shape filled with image as a group in Figma → will be translated into a vector shape of the image in the desired shape, with transparency around it.

  • Recommendation: create a group from shapes filled with an image.

Text layers

• Letter spacing

  • If the letter spacing property is set to pixels in Figma → this will be translated to percentages in Storyteq.

  • Recommendation: set letter spacing to percentages

• Line-height for text layers

  • If the auto-layout property is set in Figma → this will be translated to default values in Storyteq.

  • If the line-height property is set to pixels in Figma → this will be translated to percentages in Storyteq.

  • Recommendation: set line-height to percentages