How to Use Figma MCP + Claude Code to Generate On-Brand Ad Creatives at Scale for Meta Ads

Key Takeaways

• Figma's MCP server lets Claude Code read your actual brand colors, fonts, components, and layout rules directly from your Figma files — no screenshots or manual copying.

• The setup takes about an hour: install Claude Code, connect the Figma MCP server, authenticate via OAuth, and structure your brand kit in Figma.

• Once connected, you can generate 10-30+ on-brand ad variations across all three major Meta ad formats (feed, story, link) in a single session.

• The workflow replaces what used to require a full-time designer and a $3,000/month agency — your weekly creative production drops to about an hour.

• You need at least a Figma Dev or Full seat for production use — the free Starter plan only allows 6 MCP calls per month.

Introduction

If you run Meta Ads, you already know the truth: creative is the new targeting. Meta's algorithm will find the right audience for you, but only if you feed it enough creative variations to test. The brands winning on Meta right now are running 30-50+ creatives, cycling through them weekly, and letting the algorithm surface winners.

The problem is that producing that volume of on-brand creative is brutally expensive. Designers cannot keep up. Agencies charge per revision. And if every variation takes a round of back-and-forth in Figma, you are burning days on what should take minutes.

There is now a way to fix this. Figma's MCP server lets AI read your actual design files, including your brand colors, fonts, components, and layout rules. Pair it with Claude Code (Anthropic's AI coding tool), and you have a system that can produce dozens of ad variations from a single template, all using your real design system. This guide walks you through the entire setup and workflow, step by step.

What Do You Need Before Starting?

Before diving in, make sure you have these four things ready.

A Figma Account with Dev Mode Access

The Figma MCP server requires at least a Dev seat or Full seat on a paid Figma plan. The free Starter plan technically works, but it is limited to just 6 MCP tool calls per month, which is not enough for production use. If you are serious about this workflow, you will need a paid seat.

Claude Code Installed on Your Computer

Claude Code is Anthropic's command-line AI tool. Think of it as ChatGPT, but it lives in your terminal and can directly interact with tools like Figma. You will install it once, and it handles the rest.

Your Brand Kit Set Up in Figma

This is the most important piece. The AI can only be as on-brand as the design system you give it. You will need brand colors defined as Figma variables, typography styles for headlines, body text, and CTAs, your logo and recurring brand elements as components, and at least one master ad template frame.

A Meta Ads Account

You will need this to actually run the creatives you generate. The workflow produces export-ready files that you upload directly to Meta Ads Manager.

How Do You Install Claude Code?

Claude Code runs in your computer's terminal (the command-line app). Do not worry if you have never used a terminal before. You will only need to type a few commands.

On Mac:

Open the Terminal app (search for "Terminal" in Spotlight), then paste this command and press Enter: brew install claude-code. If that does not work (you might not have Homebrew installed), use: npm install -g @anthropic-ai/claude-code

On Windows:

Open Command Prompt or PowerShell and run: npm install -g @anthropic-ai/claude-code

Verify it worked by typing: claude --version. You should see a version number. If you do, you are good. Now launch Claude Code for the first time by typing: claude. It will ask you to sign in with your Anthropic account. Follow the prompts.

How Do You Connect Figma to Claude Code?

This is where the magic happens. You are going to tell Claude Code how to talk to your Figma files.

In your terminal (with Claude Code running), type this command: claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

What this does: it registers Figma's MCP server so Claude Code can read your designs, extract your brand variables, and generate new creatives using your actual design system.

Now authenticate:

• Quit Claude Code (type /exit or press Ctrl+C)

• Reopen it by typing: claude

• Type /mcp to open the server management panel

• You will see "figma" listed. Select it and click Authenticate

• A browser window opens asking you to log into Figma and authorize the connection. Click Allow

• Go back to Claude Code and run /mcp again. You should see figma listed as connected

That is it. Claude Code can now read any Figma file you have access to.

How Should You Prepare Your Brand in Figma?

The quality of your AI-generated creatives depends entirely on how well your brand kit is structured in Figma. Spend 30 minutes here and save hours later.

Set Up Brand Variables

Go to your Figma brand file (or create one). Open the Variables panel and create these collections. For colors: brand/primary (your primary brand color), brand/secondary, brand/accent (accent/CTA color), brand/background, brand/text-primary, and brand/text-secondary. For typography: define text styles for Headline, Subheadline, Body, CTA, and Legal/Disclaimer, including font family, weight, and size for each. For spacing: create spacing/padding and spacing/gap tokens.

Create Master Template Frames

Create one template frame for each Meta ad format you use. Feed Post: 1080 x 1080 px. Story/Reel: 1080 x 1920 px. Landscape (Link Ad): 1200 x 628 px. Each template should contain a background (using your brand/background variable), headline text, subheadline or body text, product image placeholder, CTA button (using your accent color), and logo placement.

Name Your Layers Clearly

This is critical. The AI reads your layer names to understand what each element does. Do not leave things as "Rectangle 47" or "Group 12." Good naming: HeroImage, Headline, Subheadline, CTAButton, LogoMark, BackgroundGradient, PriceTag, SocialProof. Bad naming: Frame 1, Group 5, Rectangle 12, Text 3.

Use Auto Layout

If your template frames use Figma's Auto Layout, the AI understands responsive behavior. It knows which elements flex, which are fixed, and how spacing works. This produces significantly better code output.

How Do You Extract Your Design System Rules?

Now that your Figma brand kit is set up, you will tell Claude Code to learn it.

Open Claude Code and paste this prompt: "Connect to my Figma file and extract the complete design system — all color variables, typography styles, spacing tokens, and component structure. Save these as reusable design system rules. Here is my Figma file: [paste your Figma file URL here]"

Claude Code will use the Figma MCP to pull your variables, styles, and components. It creates a set of design system rules that every future generation will follow. You only need to do this once (or whenever you update your brand kit).

To verify it worked, ask: "What brand colors and fonts did you extract from my Figma file?" Claude should list your exact variables, not generic colors, but your specific brand values.

How Do You Generate Ad Creatives at Scale?

This is where the volume comes in. You are going to give Claude Code a creative brief, and it will generate multiple on-brand ad variations using your Figma design system.

The Basic Generation Prompt

Tell Claude: "Using my Figma design system rules and the master template at [paste Figma frame URL], generate 10 variations of a Meta feed ad (1080x1080) for this brief: Product: [your product name]. Target audience: [who you are targeting]. Goal: [conversions / awareness / retargeting]. Key benefit: [the main value prop]. Offer: [e.g., 20% off first order]. For each variation, change the headline angle (different hooks), the CTA text, the color emphasis (alternate between primary and accent), and the layout arrangement. Keep everything within my brand guidelines."

Claude Code will generate code-based creatives that match your Figma template structure, using your actual brand colors, fonts, and component patterns.

Generating Across Multiple Formats

Once you have variations you like in one format, scale across all ad sizes. Tell Claude: "Take the top 5 headline/layout variations from the 1080x1080 set and adapt them to 1080x1920 (Story/Reel format) and 1200x628 (Link Ad format). Maintain all brand rules. Adjust layout for each aspect ratio." This turns 10 creatives into 30 across all three major Meta ad formats.

What Are the Best Prompt Templates for Meta Ad Types?

Here are ready-to-use prompts for the most common Meta ad types. Replace the bracketed sections with your specifics.

Product Showcase Ad

"Generate 10 product showcase ad variations (1080x1080) using my Figma design system. Product: [name]. Hero image: [describe or link to product image]. Price: [price point]. Key benefit: [what makes it great]. Vary the headline hooks: Problem-aware ('Tired of [problem]?'), Benefit-led ('[Benefit] in [timeframe]'), Social proof ('Join [number] customers who...'), Direct offer ('[Discount]% off today'), Curiosity ('The [product category] experts do not want you to know about'). Use my brand's primary color for 5 variations and accent color for 5."

Testimonial / Social Proof Ad

"Generate 8 testimonial-style ad variations (1080x1080) using my Figma design system. Customer quote: '[paste real testimonial]'. Customer name: [name]. Product: [name]. Result: [specific outcome]. Vary the layout: Quote-dominant (large text, small product image), Split screen (quote left, product right), Star rating prominent, Before/after metrics. Always include the CTA button and logo placement from my template."

Before/After Comparison Ad

"Generate 8 before/after comparison ads (1080x1080) using my Figma design system. Before state: [the problem/old way]. After state: [the result with your product]. Product: [name]. Key metric: [quantifiable improvement]. Vary the comparison style: Side-by-side split, Top/bottom split, Overlapping with highlight, Timeline progression. Use contrasting colors from my brand palette to distinguish before (muted) from after (vibrant)."

Limited-Time Offer Ad

"Generate 8 urgency-driven offer ads (1080x1080) using my Figma design system. Offer: [e.g., '40% off for 48 hours']. Product: [name]. Deadline: [when the offer ends]. Regular price: [price]. Sale price: [discounted price]. Vary the urgency angle: Countdown-style ('48 hours left'), Scarcity ('Only [X] remaining'), Exclusive ('Members-only pricing'), FOMO ('Do not miss this'). Use the accent/CTA color prominently. Make the discount percentage the largest text element."

How Do You Validate and Export Creatives?

Before uploading to Meta Ads Manager, validate your creatives.

Visual Check

Ask Claude Code to take screenshots of your generated creatives: "Take a screenshot of each generated ad variation so I can review them visually." This uses Figma MCP's get_screenshot tool to capture exactly what each creative looks like.

Quick QA Checklist

For each batch, verify: Brand colors match (no off-brand hex values). Fonts are correct (right family, weight, and size). Logo is present and properly placed. CTA button is visible and uses the right color. Text is readable (sufficient contrast). No text extends beyond safe zones.

Export

Once you are satisfied, export your creatives from Figma. Select all finalized frames, go to Export in the right panel, choose PNG at 2x resolution (this gives you clean files for Meta), and upload directly to Meta Ads Manager.

What Are the Best Tips for Getting Better Results?

Start with one great template, not ten mediocre ones.

The AI amplifies what you give it. If your master template is well-structured with proper Auto Layout, clear naming, and correct variables, every variation will be solid. If your template is messy, you will get messy output at scale.

Use the design system rules feature.

After extracting your brand variables, ask Claude Code to create persistent design system rules. This means every future session automatically follows your brand. You do not need to re-extract every time.

Batch your generations.

Instead of asking for one creative at a time, always ask for 8-10+ variations per prompt. This is where the scale advantage kicks in. What would take a designer days takes Claude Code minutes.

Iterate on winners.

When Meta Ads tells you which creative is performing best, feed that back in. Tell Claude: "My top-performing ad used this headline: '[winning headline]' and this layout style: [describe it]. Generate 10 more variations that riff on this winning formula but test different secondary text, color emphasis, image placement, and CTA wording." This is how you compound creative testing. Double down on what works, generate more variations of winners, and keep feeding Meta's algorithm fresh material.

Respect the 6-call limit on Starter plans.

If you are on Figma's free Starter plan, you only get 6 MCP calls per month. That is barely enough to extract your design system once. If you are serious about this workflow, upgrade to a Dev or Full seat.

What Does the Weekly Workflow Look Like?

Here is what your weekly ad creative workflow looks like with this system:

• Monday: Review last week's Meta Ads performance. Identify winning hooks and underperformers.

• Tuesday: Open Claude Code. Feed it your winning angles plus new product/offer briefs. Generate 20-30 new variations across all three ad formats.

• Wednesday: QA the outputs in Figma. Make any manual tweaks. Export and upload to Meta Ads Manager.

• Thursday through Sunday: Let Meta's algorithm test the new batch while you focus on everything else.

That is 20-30 fresh, on-brand creatives per week without a designer, without an agency, and without losing your brand consistency. The teams doing this are outpacing their competitors on creative volume alone, because Meta's algorithm rewards fresh creative more than almost any other variable.

The setup takes about an hour. The ongoing workflow takes about an hour per week. The output is what used to require a full-time designer and a $3,000/month agency retainer. Set it up once, and the creative bottleneck disappears.

Frequently Asked Questions

Do I need to know how to code?

No. The setup involves pasting a few commands into your terminal, but you do not need to understand code. The prompts you give Claude Code are in plain English.

How much does this cost?

Claude Code requires an Anthropic account. Figma requires at least a Dev seat for full MCP access. The Figma MCP server itself is free. Total ongoing cost is your existing Figma subscription plus your Anthropic plan.

Can I use this for other ad platforms besides Meta?

Yes. The creatives you generate are standard image files. Export them at the right dimensions and they work for Google Ads, TikTok Ads, LinkedIn Ads, or any platform that accepts static image creatives.

What if my brand kit is not in Figma yet?

You will need to set it up first. At minimum, create a Figma file with your brand colors as variables, your fonts as text styles, and one master template frame for each ad size you use. This takes about 30 minutes if you already have your brand guidelines documented.

Will the AI-generated creatives look identical to my designer's work?

They will be on-brand (correct colors, fonts, components), but they may need minor tweaks. Think of this as generating solid first drafts at volume. A quick QA pass in Figma handles any polish needed.

How many creatives can I generate in one session?

There is no hard limit per session, but practically you will generate 10-30 variations before wanting to review and export. The Figma MCP rate limit on Dev/Full seats is per-minute, not per-month, so you can generate continuously.