Banner ads are among the most common formats in digital advertising. This guide walks you through creating one in Figma, from defining the brief to exporting the finished file. It is designed for social media specialists, marketers, and anyone who wants to create their own ad creatives.
What an ad banner needs to do
Before opening Figma, make sure you understand the goal. A banner ad has three jobs:
- Catch the eye — stand out among other content in a feed or on a page.
- Hold attention for 1–2 seconds — communicate the main message before the user scrolls on.
- Prompt action — make the next step clear: visit a landing page, buy, or sign up.
That is why the visual design of a banner matters as much as its copy. Weak visual hierarchy or low contrast can cause viewers to miss even a strong offer.
Why Figma works well for ad banners
Figma is a strong choice for banner design because:
- It runs in the browser, so there is nothing to install.
- Its free plan is sufficient for solo projects.
- It is easy to work on multiple formats at once, with several frames in one file.
- Auto Layout makes it faster to resize and rearrange elements.
- You can easily share a file with colleagues or clients for review and edits.
Choose the format before you start
Choose the format before you begin. Resizing a finished banner for another size is harder than designing in the right proportions from the start.
| Format | Size (px) | When to use it |
|---|---|---|
| Instagram post | 1080 × 1080 | Square format for the feed |
| Instagram Stories / Reels | 1080 × 1920 | Full-screen vertical |
| Facebook / Instagram Ads | 1200 × 628 | Landscape ad placements |
| Versatile portrait | 1080 × 1350 | Works well in feeds and can be adapted for Stories |
| TikTok | 1080 × 1920 | Vertical—the same size as Stories |
Define the brief before opening Figma
The most common mistake is starting a banner without a clear brief. Define three things:
- The offer: what exactly you are offering, in one sentence.
- The audience: who will see the banner.
- One action: what the viewer should do: buy, click through, or sign up.
Step 1. Create a frame at the right size
In Figma, press F for the Frame tool, then choose a preset in the right sidebar or enter the dimensions manually. Work at the right size from the start—do not begin on an arbitrary canvas and resize it later.
Set up guides that leave at least 40–60 pixels of padding around the edges for key elements. This is your safe zone; critical copy and the CTA should stay within it.
Step 2. Establish the visual hierarchy
Before adding elements, decide what should come first. Use three levels of hierarchy:
- Primary — the headline or visual focal point; the largest or brightest element.
- Supporting — a clarifying line or detail of the offer.
- Secondary — the CTA button, logo, and small details.
Follow the one-glance rule: the viewer should see the main point immediately. A simple check is the squint test—squint at the banner. What do you see first? That should be your main message.
Step 3. Choose the visual
The visual—a product photo, person, or branded background—creates the first impression.
- A product photo works for product advertising.
- A person or character catches the eye and helps the audience identify with the message.
- An abstract or branded background suits services, events, and informational offers.
AI tools such as Midjourney, Adobe Firefly, and Leonardo AI can generate original imagery without relying on stock libraries. The visual should not compete with the copy. If the background is busy, add a dark overlay or blur beneath the text block.
Step 4. Work with color
Use color to create contrast and guide attention. A simple rule is to use three colors on a banner.
- Primary color — the background or dominant color of the banner.
- Neutral color — white, black, or gray, most often used for copy.
- Accent color — one bright color for the CTA or a key element.
For contrast, copy should have a contrast ratio of at least 4.5:1 against the background, the WCAG AA standard. If you are unsure, a dark background, white copy, and one accent color will work in most cases.
Step 5. Typography and copy
Rules for using type in ad banners:
- Use no more than two typefaces: one for headings and one for body copy.
- Build hierarchy through size and weight, not by adding more typefaces.
- Headline: large, bold, and instantly readable.
- Supporting line: smaller and never competing with the headline.
- CTA: high-contrast and brief—use a verb-led phrase such as “Claim your discount” or “Sign up for free.”
- Edge spacing: a minimum of 40–60 pixels; the safe zone is essential.
Step 6. Final check before export
- The message can be understood in 1–2 seconds
- All key elements stay within the safe margins
- Copy-to-background contrast is sufficient
- The banner has one clear focal point
- The banner has been checked at a reduced size: 400–500px in Figma
Exporting from Figma
Choose the frame → find Export in the right sidebar → set the options:
- JPG (85–90%) — lighter for banners with photographic backgrounds.
- PNG — for banners with transparency or crisp graphics without photos.
- 1x — enough for digital advertising in most cases.
Give the file a meaningful name, such as banner-stories-august-discount.jpg, rather than simply Frame 1.jpg. This matters when working in a team and uploading files to ad platforms.
How to work faster with editable Figma layouts
The process above takes time, especially when you need banners regularly. To avoid building every layout from scratch, you can use ready-made designs and a library of elements.
Designer Pack includes 150+ ready-made ad creatives and 1000+ editable elements—buttons, labels, badges, font pairings, and color palettes—in one Figma file. Choose a suitable layout, replace the copy, imagery, and accent color, and the structure is already in place.
Read more about ready-made banner templates in our dedicated article →
