How to Use the Foldwrap Figma Plugin: Figma to HTML5 Banners, Step by Step

If your ad workflow starts in Figma, you can move from approved static layouts to animated HTML5 banners in minutes using the Foldwrap Figma plugin.

This tutorial follows one real campaign from Figma to finished HTML5 banners. The design is Sixty South, a fictional Antarctic cruise brand, delivered in three ad sizes. You'll see every step, from selecting frames in Figma to sending your client a review link.

It's written for freelancers and agency teams that need faster delivery and cleaner revision cycles without manual animation work. It's also a practical replacement path if you're weighing what to do about Adobe Animate's 2026 maintenance-mode status.

You can follow along with the same files:

• Figma file: Sixty South - Foldwrap Example Campaign
• Imported result: Sixty South in the Foldwrap editor

What You Get From This Workflow

1. Pixel-faithful import from Figma, every size in one go.
2. Automatic first-pass animation in Foldwrap.
3. Full timeline control for edits and client revisions.
4. Native HTML5 export ready for ad platform upload, plus a client review link.

The Campaign in Figma

The campaign has three ad sizes: 970×250, 300×600, and 300×250.

Each size has three frames, one for each message the banner should show: the trip, the price, and the booking offer. Think of them as a storyboard. Foldwrap plays them in order.

Step 1: Select Your Frames

Select the frames you want to animate. It can be a single frame, or the whole set at once. Here, all nine frames are selected.

Tip: import only final or near-final frames to reduce cleanup time in the editor.

Step 2: Run the Foldwrap Plugin

Open Actions → Plugins & widgets and search for Foldwrap. The plugin is called Foldwrap — Animated HTML5 Banner Ads. You can also install it from the Figma Community.

The plugin lists every size in your selection, and how many frames it found for each.

Leave Freeze text appearance off to keep your text editable. Turn it on only when a custom font must look pixel-perfect.

Click Import. Foldwrap uploads your layers and images, and builds the animation for you.

When it's done, click Open in Foldwrap.

Step 3: Refine in the Editor

Your banners open in the Foldwrap editor, already animated: automatic animation gives you a usable draft instead of a blank timeline.

Each size became a variant, and its three frames became scenes of a single banner. The messages now play one after another.

Switch between sizes in the Variants list. Every size keeps its own layout from Figma.

Your layers come across too. Groups, text, and images keep the names you gave them in Figma, and text stays editable.

Each layer has a bar on the timeline. Drag it to change when an element appears, and for how long.

Motion presets change the style of the whole banner, from a subtle fade to dynamic slides and bounces.

Step 4: Export and Share

When you're happy with it, click Export and choose Export all variants HTML5.

Foldwrap packages every size, and gives you a review link to share with your client.

The review page shows all of your banners side by side, fully animated. Download them one by one, or get the whole delivery package, ready for your ad platform.

That's it: from Figma to animated HTML5 banners in a few clicks.

Need to Move Single Elements Instead of Full Frames?

You can copy individual objects from Figma and paste them into Foldwrap:

1. Right-click an element in Figma.
2. Choose Copy as SVG or Copy as PNG.
3. Paste directly into Foldwrap.

See the full guide here: Import design from Figma to Foldwrap

Next Step: Scale Variations Faster

After your master creative is approved, scale it with spreadsheet data for localization, price updates, and multi-offer sets.

Read: How to scale banner ads

FAQ