How to Design a Banner in Figma: Step-by-Step Guide (2026)

Banners are everywhere — website headers, social media covers, Google Ads, email headers, event promotions. Figma handles all of them cleanly, with the precision to match exact pixel dimensions and the flexibility to iterate fast. This guide walks you through designing a professional banner in Figma from frame setup to final export, covering digital banners, social media banners, and Google Display Ad banners.

---

Standard Banner Sizes to Know

Before you create your frame, know which banner format you’re targeting. These are the most common:

Website Banners

Banner Type	Dimensions
Full-width hero banner	1920 × 600px (or 1440 × 600px)
Website header banner	1200 × 400px
Leaderboard (top of page)	728 × 90px
Medium rectangle	300 × 250px

Google Display Ad Sizes

Ad Format	Dimensions
Medium rectangle	300 × 250px
Large rectangle	336 × 280px
Leaderboard	728 × 90px
Half page	300 × 600px
Large skyscraper	160 × 600px
Billboard	970 × 250px
Mobile banner	320 × 50px

Social Media Banners

Platform	Cover Photo Size
Facebook	851 × 315px
Twitter / X	1500 × 500px
LinkedIn Company Page	1128 × 191px
YouTube Channel Art	2560 × 1440px (safe zone: 1546 × 423px)
Eventbrite	2160 × 1080px

---

Setting Up Your Banner Frame in Figma

Step 1: Create the frame

1. Open Figma and create a new design file
2. Press F (or click the Frame tool in the toolbar)
3. Draw a frame on the canvas, then set the exact dimensions in the right panel:
   • For a standard web banner: 1200 × 400
   • For a Google leaderboard ad: 728 × 90
   • For a Facebook cover: 851 × 315
4. Name your frame descriptively (e.g., “Website Banner – 1200×400”)

Tip: Figma has preset frame sizes for common formats. Click the Frame tool, and in the right panel you’ll see presets for Social Media, Presentation, Phone, etc. For custom ad sizes, you’ll type the dimensions manually.

---

Designing a Website Header Banner

This section walks through a complete hero banner design — the large banner that typically sits at the top of a homepage.

Step 2: Set the background

1. Select your frame
2. In the Fill panel, choose your background approach:
   • Solid color — clean, minimal look; works great for SaaS or tech brands
   • Gradient — adds depth; use two brand colors
   • Image — use a high-quality photo as the background

For a background image:

1. Click the fill swatch → switch from Solid to Image
2. Upload your image
3. Set the image fill mode to Fill to cover the entire frame
4. Add a dark overlay for text readability: create a rectangle the same size as the frame, fill it with black at 40–60% opacity, place it above the image layer

Step 3: Add the headline text

1. Press T for the text tool
2. Click and drag to create a text box in the left or center of the banner
3. Type your headline — keep it short and punchy (5–8 words maximum for banners)
4. Font size for a 1200px banner: 56–80px for headlines
5. Use a bold or heavy weight — banners need to be readable at a glance

Step 4: Add supporting copy

Below the headline, add a short supporting line (subheadline):

• Font size: 24–32px
• Weight: Regular or medium
• Keep it to one line if possible

Step 5: Add a Call to Action button

1. Press R to draw a rectangle for the button background
2. Set a rounded corner (10–16px radius works for most modern designs)
3. Add a contrasting fill color
4. Place a text layer centered on the button: “Get Started”, “Learn More”, “Shop Now”
5. Group the rectangle and text (Ctrl+G / Cmd+G)
6. To add a hover state: right-click the group → Add → Interactive Component (if using Figma’s prototyping features)

Step 6: Add imagery or illustration

Supporting visuals — a product photo, a person, an abstract shape — go on the right side for left-aligned banners, or centered for full-bleed layouts.

1. Drag and drop an image onto the canvas
2. Place it within or overlapping your frame
3. Right-click → Frame selection if you need to clip it to the frame
4. Adjust size and position using the alignment tools in the top toolbar

---

Designing a Google Display Ad Banner (300×250)

The 300×250 “medium rectangle” is the most common Google Display Ad size. It needs to work at a small scale, which means simpler design choices.

Key rules for small banner ads:

• One focal point — one strong image or graphic, not multiple
• Minimal text — headline + one line max + CTA button
• High contrast — the ad needs to be visible against any webpage background
• Clear border — Google requires ads to have a visible border on white backgrounds

Step by step:

1. Create a 300 × 250px frame
2. Add a solid background in your brand color
3. Place your logo in the top area (keep it small — ~60–80px wide)
4. Add a short headline in the center: 24–28px, bold
5. Add a CTA button at the bottom: contrasting color, text 14–16px
6. Make sure all text is legible at this small size — zoom out to 100% to preview how it looks in a browser context

---

Typography Tips for Banner Design

Good banner typography follows a hierarchy:

1. Headline — largest, boldest, most important message
2. Subheadline — supporting information, smaller
3. CTA — action-oriented, in a button, contrasting

Font pairing tips:

• Sans-serif headlines pair well with sans-serif body (same family, different weights)
• A display or serif headline with a neutral sans-serif subtext creates contrast
• Avoid using more than 2 font families in a banner

Readability checklist:

• Text is readable against the background (check contrast ratio in the Figma accessibility plugin)
• No text too close to the edge (leave at least 20–30px of padding)
• Headline readable in under 2 seconds

---

Using Auto Layout for Responsive Banners

If you need the same banner at multiple sizes (e.g., 728×90 and 300×250 for the same campaign), Auto Layout helps maintain proportions:

1. Select all banner elements
2. Press Shift+A to apply Auto Layout
3. Set horizontal or vertical direction
4. Adjust the frame size — elements will reflow according to your Auto Layout settings
5. For ads with fixed elements (logo, CTA), pin them using the constraints panel on each element

---

Exporting Your Banner from Figma

For web / digital use:

1. Select your banner frame
2. In the Export panel, click +
3. Set format to PNG at 1x scale (or 2x for retina/HiDPI displays)
4. Click Export

For Google Display Ads:

Google Ads has file size limits:

• Images: max 150KB for standard image ads
• Animated: must be HTML5 (use Google Web Designer for animated versions)

To keep PNG size under 150KB:

1. Export at 1x scale
2. Use PNG (not PNG-24) where possible
3. Compress using Squoosh or TinyPNG after export

For all sizes at once (batch export):

1. Set up all your banner sizes as separate frames in the same file
2. Select all frames
3. Export all at once — Figma exports each frame as a separate file named after the frame name

---

Banner Design Checklist

Before finalizing:

• Correct dimensions for the intended placement
• All text is readable at intended display size
• Sufficient contrast between text and background
• CTA is prominent and clear
• Brand colors and fonts used correctly
• Logo is visible and correctly sized
• Export format and file size appropriate for platform
• Designed matching safe zones (important for social media banners where platform UI overlaps)

---

Figma gives you everything you need to create polished, production-ready banners at any size. The key is starting with the correct frame dimensions, keeping your message hierarchy clear, and exporting at the right scale for the destination platform.