HTML5 banner production often starts with a Figma link that looks complete but leaves the implementation rules hidden. The frames show where elements ended up, yet they may not explain which image crop is approved, whether a headline can wrap, when legal copy appears, which CTA state is final, or how the composition should adapt from a square unit to a leaderboard.

A useful Figma handoff makes those decisions visible before animation begins. It gives the developer enough structure to build the campaign accurately without treating every size as a screenshot that must be traced.

Create one frame for every real deliverable

Name each Figma frame with the campaign, market or language, dimensions, and version. campaign-en-300x250-v03 is more useful than Desktop 14 because the frame name can follow the creative into review links, source folders, ZIP names, and the final handoff manifest.

Use the exact placement dimensions. Do not place a 300 x 250 design inside a larger presentation frame and expect production to infer the crop. The developer needs to inspect the real canvas edges, safe areas, and available text width.

For a multi-size campaign, include every approved layout. A single master frame plus a list of dimensions is not enough when the set contains materially different shapes. At minimum, show the square or rectangle master, the narrowest wide unit, and the tallest unit before full resize production starts.

Sysco

Sysco300 x 250
Make each Figma frame correspond to one trafficked banner size. A compact product-led frame needs explicit boundaries for photography, headline, brand, and CTA. The production file should show the actual 300 x 250 composition rather than a scaled presentation mockup.

Keep copy editable and identify its hierarchy

Live text tells production more than flattened artwork. It exposes the font family, weight, size, line height, letter case, alignment, wrapping, and the exact approved words. It also makes copy revisions and localization safer because the developer can compare text rather than rebuild it from an image.

Label the copy by role, not by layer order:

  • Primary message.
  • Supporting line or offer.
  • CTA label.
  • Brand or product name.
  • Legal or mandatory copy.

If a line break is required, say so. If production may reflow the headline to protect readability in a narrower size, document that freedom. A manual line break that looks deliberate in one frame can become a hidden constraint when the same message moves into portrait or leaderboard formats.

Do not convert ordinary copy to outlines unless the visual treatment genuinely requires it. Outlined text is harder to revise, localize, and audit against an approved copy deck. When a display wordmark must be artwork, keep the accessible text value and font decision in the handoff notes.

Show how images may crop

Figma masks can hide a risky assumption: the supplied image may only contain the pixels visible in the approved frame. The HTML5 developer then has no room to adapt the crop for another aspect ratio or animate the image without exposing an empty edge.

Provide the full-resolution source image and mark the protected subject area. Note whether production may:

  • Reposition the image inside its mask.
  • Scale it beyond the approved master crop.
  • Use a different crop for tall or wide formats.
  • Remove a secondary image in constrained sizes.
  • Retouch or extend the background.

Those permissions are creative decisions. Recording them once is faster than asking for approval after each resize has already been built.

Honda

Honda320 x 480
Hand off the image outside the mask and document the permitted crop range. Portrait automotive layouts depend on usable image area beyond the first approved crop. Production needs the source photography and a clear subject-safe zone to preserve the vehicle, message, and CTA across motion states.

Export source assets, not a flattened banner

A full-frame PNG may be helpful as a visual reference, but it should not be the main production asset. Export the pieces that need to behave independently: logo, product cutout, background, icon, texture, and any approved artwork text.

For every asset, confirm:

  • The source layer is final and named clearly.
  • Transparency is intentional.
  • The export includes enough resolution for the rendered size.
  • Vector artwork does not contain accidental clipping masks or hidden layers.
  • Logos and icons use an approved color variant.
  • Photography is not repeatedly compressed before production.
  • Font files or approved fallbacks are supplied separately from Figma.

Avoid exporting the same visual in several unexplained formats. If both SVG and PNG versions exist, identify which one production should use and why. The final choice still needs to respect the platform’s file-weight and rendering rules.

Describe motion as states and beats

Figma prototypes can communicate direction, but they rarely define a complete banner timeline. A transition between two frames does not automatically specify first paint, dwell time, easing, overlap, loop behavior, or the stopped final state.

Write a short motion outline beside the design:

0.0s  Brand cue and image visible
0.4s  Headline enters
2.2s  Offer replaces headline
4.2s  CTA and logo settle on final frame
6.0s  Hold; no further loop

The exact timings can remain open when production owns animation craft. What matters is the story order and the acceptance criteria: which elements enter together, what must remain visible, whether the unit loops, and what the viewer sees after motion stops.

For complex sequences, add one Figma frame per meaningful state instead of duplicating every tiny transition. Name the states 01-intro, 02-message, 03-offer, and 04-final so the design, GSAP timeline, review comments, and backup image can use the same vocabulary.

Separate campaign rules from size exceptions

The handoff should make global decisions easy to distinguish from local layout fixes. Brand treatment, message order, CTA copy, destination behavior, and final-frame requirements usually belong to the whole campaign. A shorter headline wrap, alternate crop, reduced motion distance, or removed decorative element may belong to one constrained size.

Keep shared rules on a small campaign notes page. Put size-specific exceptions beside the affected frame. This avoids two costly mistakes: applying a one-size compromise everywhere, or rebuilding the same campaign rule independently in every unit.

Malabar

Malabar300 x 600
Document what changes by size and what must remain consistent. A tall retail unit may use different image movement and vertical spacing while preserving the same campaign hierarchy. The Figma handoff should separate those format choices from the message and final-frame rules shared by the set.

Add a production-ready handoff gate

Before development starts, review the Figma file with the same questions production will need to answer:

  • Does every deliverable have a correctly sized and named frame?
  • Is all approved copy live, final, and matched to the right market?
  • Are mandatory line breaks and flexible wraps identified?
  • Are full source images and crop permissions available?
  • Are logos, vectors, fonts, and product assets supplied in production form?
  • Is the motion order clear enough to build a timeline?
  • Is the final frame explicitly marked?
  • Are CTA destination and ClickTag requirements documented outside the visual mockup?
  • Are platform limits, backup-image rules, and delivery dates attached to the brief?
  • Are unresolved decisions named with an owner instead of hidden in comments?

This gate does not need another elaborate document. A short notes page inside Figma plus a linked spec matrix is enough when it gives design, production, account teams, and ad ops the same source of truth.

A structured Figma file protects the creative

Good handoff structure does not reduce design freedom. It protects the approved idea while the campaign becomes code, motion, multiple sizes, localized variants, and platform-ready ZIPs.

When frames match deliverables, copy stays inspectable, assets retain useful source area, and motion intent is explicit, the developer can spend time on polish instead of inference. The result is a banner set that looks like the approved design and behaves like a production system.