How to Design Google Ad Banners in Figma (All Sizes + Export Guide)

Google Display Ad Sizes and Dimensions

Google supports dozens of ad sizes, but these are the most commonly used. Always design in exact pixel dimensions to avoid resizing and quality loss.

Ad Size	Dimensions	Use Case
Medium Rectangle	300×250 px	Sidebars, content pages
Large Rectangle	336×280 px	Sidebars, wide layouts
IAB Standard	728×90 px	Header/footer leaderboards
Half Page	300×600 px	Sidebars, long-form content
Mobile Banner	320×50 px	Mobile header/footer
Large Mobile Banner	320×100 px	Mobile applications
Skyscraper	120×600 px	Narrow sidebars
Wide Skyscraper	160×600 px	Standard sidebars
Square	250×250 px	Content integration
Small Square	200×200 px	Compact layouts
Vertical Rectangle	240×400 px	Long sidebar content

Setting Up Your Figma File for Google Ads

Step 1: Create Frames for Each Ad Size

1. Open Figma and create a new file
2. Click the “Frame” tool or press “F”
3. For the first frame, enter exact dimensions (e.g., 300×250)
4. Name your frame descriptively (e.g., “Medium Rectangle - 300x250”)
5. Repeat for each ad size you’re designing
6. Arrange frames in a grid for easy comparison

Step 2: Set Up Your Design Environment

• Background: Use white or your brand background color
• Guide setup: Add guides at key spacing points (10px, 20px margins)
• Text constraints: Set text to “fixed size” to prevent scaling issues
• Component approach: Create reusable components for headlines, CTAs, and logos

Step 3: Enable Grid and Guides

1. Go to File > Preferences > Guides
2. Enable “Show grid” and set grid size to 10px (Google’s standard is 10px minimum)
3. Enable guides for margin visualization

Google Display Ad Design Rules

Contrast Requirements

Google requires sufficient contrast between text and background for readability. Minimum contrast ratio:

• Large text (18px+): 3:1 ratio
• Regular text: 4.5:1 ratio
• Images: 2:1 ratio minimum

Test contrast: Use Figma’s built-in contrast checker or the “Contrast” plugin.

Border Requirement

Most Google ads require a visible border to distinguish the ad from page content. Standard practice:

• Border width: 1px
• Border color: #999999 or #CCCCCC (light gray)
• Never use black or dark borders (looks cheap)

Text-to-Image Ratio

Google monitors the text-to-image balance:

• Maximum text: 20% of ad area
• Recommended: 10-15% text, 85-90% visual
• Exceptions: Text-heavy ads (up to 30%) approved on case-by-case basis

File Size Limits

This is critical for ad performance:

• Maximum file size: 150 KB
• Typical target: 100-120 KB
• GIF animations: Same 150 KB limit
• Video: Follow platform-specific requirements

Step-by-Step: Designing a 300×250 Medium Rectangle

This is the most common Google ad size. Here’s a complete walkthrough.

1. Set Up the Frame

• Create a 300×250 frame
• Add 1px #999999 border
• Fill with brand color or white background
• Add 10px padding on all sides (visual safe zone)

2. Create the Background

Options:

• Solid color: Simple, fast-loading, reliable
• Subtle gradient: Adds visual interest without increasing file size much
• Brand pattern: Use sparingly; keep opacity at 10-20% so text is readable

Pro tip: Keep the background file size under 30KB if using an image.

3. Add the Headline

• Position: Top third, centered or left-aligned
• Font size: 18-24px (bold for impact)
• Color: High contrast with background (tested with Contrast plugin)
• Max length: 8-12 words
• Copy: Action-oriented (“Learn More,” “Shop Now,” “Get Started”)

Example copy for a SaaS ad: “Design Faster With Figma”

4. Add Supporting Copy

• Position: Middle section
• Font size: 12-14px
• Length: 1-3 short sentences
• Purpose: Address pain point or highlight benefit

Example: “Create beautiful designs in minutes. Collaborate in real-time.”

5. Add Visual Element

• Position: Can be background, or integrated with text
• Size: 100-150px (roughly 40-60% of ad area)
• Options: Product screenshot, illustration, icon, lifestyle photo
• File size: Keep image under 80KB for total ad to fit 150KB limit

6. Add the Call-to-Action Button

• Position: Bottom third
• Size: 80-120px wide (clickable target)
• Padding: 8-12px inside button
• Font: Bold, 12-14px
• Color: High-contrast from ad background (often complementary color)
• Copy: “Learn More,” “Sign Up,” “Get Started,” “Shop Now”

7. Final Touchups

• Check contrast with Contrast Checker plugin
• Ensure all text is readable at actual size
• Verify total file size (preview in export)
• Test how it looks with and without border
• Save multiple variants for A/B testing

Designing the 728×90 Leaderboard Banner

The leaderboard is a horizontal banner, perfect for headers/footers.

Layout Approach

• Logo: Left side, 60px wide max
• Headline: Center-left, 14-18px, bold
• Supporting text: Optional, center, 11px, light
• CTA button: Right side, 60px wide, 24px tall (must be clickable)
• Border: 1px gray border
• Padding: 8px all sides minimum

Width Management

728px is narrow—text must be concise. Maximum 5-7 words in headline. Supporting copy is optional due to space constraints.

Google Ads File Size Optimization

Hitting the 150KB limit is crucial. Here’s how:

Image Optimization

1. For JPEGs: Export at 70-80% quality (not maximum quality)
2. For PNGs: Use “Optimize PNG” export settings
3. Compress externally: Use TinyPNG or ImageOptim before importing to Figma
4. SVG icons: Use SVG format when possible (typically smaller than PNG)

Figma Export Settings

1. PNG export: 1x resolution (not 2x), 80% compression
2. GIF export: Limit to 10-15 frames for animations
3. WebP export: Use if platform supports (20-30% smaller than PNG)

Testing File Size

1. In Figma: Select frame, right-click “Export” and choose format
2. Set scale: 1x (not 2x)
3. Download and check file size
4. Adjust: If over 150KB, remove image or reduce complexity

Export Settings for Google Ads

For Static Ads (PNG/JPG)

1. Select your ad frame
2. Right-click → Export settings
3. Format: PNG
4. Scale: 1x
5. Add description: “Google Display Ad - 300x250”
6. Click “Download”
7. Verify file size is under 150KB

For Animated GIF Ads

1. Design frames as separate layers or components
2. Right-click → Export as GIF
3. Frame rate: 1-2 frames per second (keeps file size low)
4. Duration: 5-10 seconds maximum
5. Verify total file size under 150KB

For HTML5 Ads (Advanced)

1. Use “Figma to Code” plugin to export HTML/CSS
2. Optimize CSS and remove unused code
3. Compress images to fit 150KB total
4. Test in Google Ad preview tool
5. Upload to Google Ad Manager

A/B Testing Ad Variants in Figma

Create Multiple Variants

1. Design original ad in 300×250
2. Duplicate the frame for variant 2
3. Make one strategic change (new headline, different color, different image)
4. Label clearly: “Original,” “Variant A,” “Variant B”

Test Variables (One Change Per Variant)

Test 1: Headline wording

• Variant A: “Learn More About Figma”
• Variant B: “Design Faster in Figma”

Test 2: Color scheme

• Variant A: Blue background
• Variant B: Purple background

Test 3: Image vs illustration

• Variant A: Real product screenshot
• Variant B: Custom illustration

Documentation

In your Figma file description, note:

• Hypothesis: “We expect better CTR with benefit-driven copy”
• Expected difference: “5-10% improvement”
• Duration: “Run for 2 weeks”
• Success metric: “Click-through rate”

Export and Deploy

1. Export all variants to a folder
2. Upload to Google Ads campaign
3. Run for statistically significant period (2-4 weeks)
4. Analyze performance data
5. Iterate based on results

Common Mistakes to Avoid

Text too small: Readable at actual display size? Test at 100%.

Poor contrast: Use Contrast Checker plugin before finalizing.

File size over 150KB: Compress images and remove unnecessary effects.

Text-to-image ratio exceeded: Keep text under 20% of ad area.

Broken brand consistency: Use same colors and fonts as website/app.

Unclear CTA: Make call-to-action button obvious and clickable (minimum 44×44px).

No border: Always add subtle border unless brand guidelines specifically prohibit.

Tools and Plugins to Speed Up Your Workflow

• Contrast Checker: Verify WCAG compliance
• Unsplash: Quick placeholder images
• Figma to Code: Export HTML5 ads
• Automator: Batch update multiple ad variants
• Color Palette Creator: Generate harmonious color schemes

Conclusion

Designing effective Google Display Ads in Figma is straightforward once you understand the constraints and best practices. Start with the 300×250 medium rectangle, master the layout, then adapt the principles to other sizes.

Remember: constraint breeds creativity. The 150KB file size limit and 20% text rule force you to prioritize clear messaging and compelling visuals over clutter. Follow Google’s guidelines, test multiple variants, and let performance data guide your iterations. Your ads will be leaner, faster-loading, and ultimately more effective at converting clicks into customers.