If you've already designed one or more banner frames in Figma, Bannerify can generate brand new banner frames in multiple sizes from those originals.

This is useful when you've finished one strong master size and want Bannerify to produce a first-pass set of other standard ad sizes without manually rebuilding every layout from scratch.

What this feature does

• Duplicates selected top-level Figma frames or instances into new frames.
• Lets you choose multiple standard banner sizes at once.
• Supports custom output sizes.
• Can optionally re-layout text, logos, CTAs and graphics for each new aspect ratio.
• Leaves your original source frames unchanged.

Use this as a production shortcut, not a substitute for creative review. Bannerify can get you very close quickly, and you can make any final design adjustments directly in Figma.

Step 1. Open the Generate tab

Open Bannerify in Figma, then switch from the normal Load tab to the Generate tab.

Bannerify will scan the current page for top-level Figma frames and instances that can be used as source banners.

Step 2. Select your source frames

Check the one or more source frames you want to use as the starting point.

Good candidates include:

• completed banner designs
• a strong master size such as 300x250 or 1200x628
• frames with clean structure and clearly grouped elements

Bannerify generates new frames from the selected sources; it does not overwrite the originals.

Step 3. Choose the output sizes

Enable the banner sizes you want to generate.

The Generate tab includes a set of common ad sizes such as:

• Leaderboard (728x90)
• Medium Rectangle (300x250)
• Large Rectangle (336x280)
• Skyscraper (120x600)
• Wide Skyscraper (160x600)
• Half-Page Skyscraper (300x600)
• Banner (468x60)
• Square (250x250)

If you need a non-standard size, enter a custom width and height and click Add Custom Size.

Step 4. Optionally enable smart layout

If you want Bannerify to adapt the contents of each new banner automatically, turn on:

• Auto re-layout new Figma frame content layers (BETA)

When enabled, Bannerify will try to resize and reposition the content in each new frame so it fits the target aspect ratio more naturally. It also tries to keep content closer to its original frame bias, so layouts that started top-heavy or edge-aligned are less likely to drift back toward the middle.

When disabled, Bannerify will still create the new frame sizes, but it will only resize the outer frame and leave the inner content placement closer to the original source layout.

Step 5. Click Generate

Click the Generate button to create the selected sizes.

Bannerify will create new Figma frames on the page, named from the source frame plus the output size, for example:

• Homepage Promo / Leaderboard (728x90)
• Homepage Promo / Medium Rectangle (300x250)
• Homepage Promo / Half-Page Skyscraper (300x600)

What smart layout tries to adapt

When the re-layout toggle is enabled, Bannerify will try to:

• resize and reposition text blocks
• keep headlines more readable in narrow, tall, or very short wide formats
• keep top-, middle-, or bottom-biased content closer to its original source position
• avoid shrinking the whole composition too much when the new size stays close to the original aspect ratio
• preserve spacing around wider text areas
• move decorative elements and shapes to fit the new aspect ratio
• keep grouped content together where possible
• reduce obvious overlaps and overflow

The exact result depends on the source frame structure and the aspect ratio difference between the original and target size.

When to enable or disable re-layout

Turn it on when

• you want a fast first pass for multiple new sizes
• your source banner has clearly structured content
• you want Bannerify to do the heavy lifting before final polish

Leave it off when

• you only want the new frame sizes created quickly
• you plan to manually reposition everything yourself in Figma
• the source layout is very custom and you want exact manual control

Best practices for better results

You'll get the most consistent output when your source banners are structured clearly in Figma.

Keep important elements as direct children or logical groups

For example:

• headline group
• body copy group
• CTA or button group
• logo group
• product image group

This makes it easier for Bannerify to identify what each element is doing and re-layout it sensibly.

Avoid using one giant flat frame of unrelated layers

If every element sits loose in the root frame with no logical grouping, Bannerify has less semantic information to work with.

Give long copy a sensible text box

If your banner contains long legal copy or disclaimer text, set up the text layer with a realistic width in the source frame.

If the copy needs to remain scrollable in HTML exports, see Scrollable Text Layers.

Use Sections only for multi-scene banners

The Generate feature creates new sizes from existing frames.

If you want to combine several frames into one animated banner sequence, see Multi-Scene Banners.

After generation

The generated banners are normal Figma frames. You can:

• tweak the layout manually
• animate them in Bannerify
• export them to HTML, GIF, MP4, WebM or other supported formats

If you later update the original source design, Generate a fresh batch again.

Troubleshooting tips

• If the generated layouts need too much manual correction, try turning the re-layout toggle off and resize the variants manually.
• If text-heavy sizes still need adjustment, simplify the source layout and try generating again.
• If generated banners contain too much copy for very small sizes, shorten the source copy or use scrollable or popup text patterns.
• If you want Bannerify to treat multiple frames as one banner, use Figma Sections instead of the Generate feature.

Summary

The Generate feature is the fastest way to turn one or more finished Figma banners into a full set of new banner sizes.

Select your source frames, choose your output sizes, decide whether to enable Auto re-layout new Figma frame content layers (BETA), and let Bannerify generate new frames directly on the page.