Figma Ad Resizer Plugin
A custom Figma plugin that intelligently copies layout from a guide frame to multiple ad sizes — using a SafeZone system to anchor elements correctly across wildly different aspect ratios.
Ad production at scale has a dirty secret: resizing the same creative across 15+ formats is almost entirely manual. You move the logo, nudge the headline, pray the product shot still looks right. This plugin — built for a Crocs campaign — automates that entire pipeline inside Figma using a SafeZone-based layout system that understands intent, not just coordinates.
How the SafeZone system works
The core idea is a named rectangle layer called SafeZone that lives inside each frame. The guide frame’s SafeZone defines which elements should be constrained to the safe content area. Each target frame’s SafeZone defines where that content should land in its specific format — with appropriate margins for a 9:16 Story, a 1.91:1 banner, or a 300×600 display unit. Elements inside the guide’s SafeZone get anchor-aware repositioning: a bottom-right logo stays bottom-right, a centered product shot stays centered, a top-left badge stays top-left. Elements outside (backgrounds, bleed elements) scale to fill the full frame. When a constrained element is too large for the target’s SafeZone, it scales down uniformly rather than clipping or overflowing.
Wide format adaptation
The trickiest case is applying a square or portrait guide to a wide landscape target — a 1:1 social post becoming a 1.91:1 display banner, for example. V1.3 introduced a split-SafeZone layout that kicks in automatically when the guide aspect ratio is ≤ 1.1 and the target exceeds 1.5. Text elements move to the left half of the SafeZone, left-aligned; image elements anchor to the right half, centered. Text boxes switch to HEIGHT auto-resize so wrapped copy grows the container instead of clipping. It’s the closest thing to automated art direction I’ve built.
What this unlocks
The immediate win is time: what used to be an hour of manual resizing per creative becomes a single plugin operation. But the deeper implication is design system thinking applied to paid media. By encoding layout intent — not just pixel positions — into the Figma file structure, you can add a new ad size to a campaign without touching the guide. The plugin also ships with an AI tips feature via OpenRouter that can surface layout suggestions. The same SafeZone approach could extend to: email template systems where header modules adapt across mobile and desktop, localization workflows where RTL languages need mirrored layouts, or any design system where components need to live in containers of unpredictable proportions.
- Role
- Design Engineer
- Tools
- Figma Plugin API TypeScript OpenRouter API