Help / Import design from Figma to Foldwrap

Most Foldwrap campaigns start from approved Figma frames. The plugin brings them in as an editable, already-animated creative; copy and paste covers the single elements that change later.

Import frames with the plugin

  1. In Figma, select the frames to import — one frame, or every frame of every size. Several frames of the same size become scenes that play one after another.
  2. Open Actions → Plugins & widgets and run Foldwrap — Animated HTML5 Banner Ads, or install it from the Figma Community.
  3. Check the sizes the plugin lists and how many frames it found for each.
  4. Click Import, then Open in Foldwrap.

Each size becomes a variant of one creative, with the layer names you gave it in Figma and automatic animation already applied. If the creative is not in a campaign yet, the editor offers + Add to campaign named after your Figma document — see Campaigns.

Want to see it first? The Figma plugin walkthrough follows one three-size campaign with a two-minute video.

Before you import

A few minutes in Figma saves cleanup on every size:

  • Import final or near-final frames. Every correction after import has to be repeated per size.
  • Keep changing copy as live text. Headlines, prices and CTAs you will edit later should stay text, not outlines.
  • Name the layers you will animate or reuse. CTA, logo, price read better on the timeline than Rectangle 12, and consistent names across sizes let Copy motion from another size match elements between them.
  • Keep groups shallow. Deeply nested groups and very large layer counts are the most common cause of an inaccurate import.

Warnings in the plugin

The plugin checks the selection before import and says so when it finds:

  • Unsupported node types — the named Figma layer types may import inaccurately.
  • Levels of nesting — groups nested more than a few levels deep. Flatten or ungroup what does not need its own structure.
  • Complex structure — a very large number of layers. Simplify, or flatten decorative groups with the flat prefix below.
  • Fonts — a font Foldwrap does not have. Upload it under custom fonts, or re-import with Freeze text appearance.

You can still import with a warning; compare the result with the frame before you build other sizes on it.

Freeze text appearance

Leave Freeze text appearance off to keep text editable. Turn it on only when a font must look pixel-identical and you do not need to change the words: text is exported as vector shapes, so it can no longer be edited as text.

Icon fonts are always exported as shapes, whatever the setting — as live text they would render as blank boxes in a web banner.

Control how groups are imported

Vector logotypes usually arrive as a group of many shapes — letters, a symbol, outlines. The plugin detects such groups and flattens them into one SVG, which keeps the banner's file count and weight down.

Rename a layer in Figma to override that decision. Start the name with:

  • flat … — always flatten the group into one shape. Useful for logos and decorative clusters.
  • keep … — keep the group structure, for example to animate its parts separately.
  • omit … — skip the layer entirely. Useful for guides, notes and placeholders.

Renaming logo to keep logo is enough to keep its parts separate.

Copy individual elements from Figma

For quick revisions — a new product shot, a replaced logo — you do not need to re-import the frame.

  1. Select an object in Figma.
  2. Right-click and choose Copy as SVG or Copy as PNG.
  3. Paste it into the Foldwrap editor.

Foldwrap places the element in the open creative, ready to position and animate.

Video shows copying one element from Figma and pasting it into Foldwrap

Figma and Foldwrap are not kept in sync: changing the Figma file later does not update creatives you already imported. Make production edits in Foldwrap, and paste replacements for changed assets.