Supercharge Figma with Antigravity via MCP (EASY!)

Building on my early experiences with Claude, I have recently shifted my primary workflow to Google Gemini. What really sold me was Gemini’s multimodal creativity, integration to my Google Workspace, and real-time access to live data. Essentially, it’s a partner that understands visuals, pulls context from my docs, and stays on top of trends while I design and strategize.

Since an AI is only as useful as its connection to the design source, the first thing I did was bridge it to Figma. 😊 Here is how you can set that up too.

First of all, what is Antigravity?

Antigravity is an AI-native IDE built by Google. It’s designed specifically to showcase the power of the Gemini 3 and 3.1 models in a developer environment. But as designers, we can use it too! Through MCP, it can bridge the gap to tools like Figma, Canva, Storybook, Miro and many more.

What is MCP?

MCP stands for Model Context Protocol - think of it as a universal plug that lets the AI connect directly to other apps. Instead of you manually copying and pasting, MCP provides a secure bridge so Antigravity can step inside your tools and work with your assets in real-time.

Step by Step

This guide will walk you through the process of connecting your Figma designs to Antigravity using the Figma MCP Server. Good news is that Antigravity is currently in public preview, so anyone can use it as long as you have a personal Gmail account.

Prerequisites

Before we start, make sure you have:

1. Antigravity installed and open.
2. A Figma Account.
3. Node.js installed on your computer.
   • Not sure? Open your terminal and type node -v. If it gives you a version number (like v18.0.0 or higher), you’re good!
   • Need it? Download the “LTS” version here.

Step 1: Get Your Figma Access Token

We need a special “key” to let Antigravity talk to Figma safely.

1. Open Figma in your browser or desktop app.
2. Click on your profile picture in the top-left or top-right corner and select Settings.
3. Scroll down to the Personal access tokens section.
4. Click the blue Generate new token button.
5. Give it a name (e.g., “Antigravity Connection”) and press Enter.
6. IMPORTANT: Copy the long string of characters that appears. You will only see this once!
   • It looks something like figd_...

Step 2: Configure Antigravity

Now we tell Antigravity how to use that key.

1. Open Antigravity.
2. Locate your MCP Configuration file (mcp_config.json).
   • You can usually ask Antigravity to “Open my MCP config” if you can’t find it.
   • Antigravity will ask for permission to look into your folders, allow the requests.
3. Add the following configuration to the "mcpServers" section of the file:

"figma": {
  "command": "npx",
  "args": [
    "-y",
    "@yhy2001/figma-mcp-server",
    "--stdio"
  ],
  "env": {
    "FIGMA_API_KEY": "PASTE_YOUR_TOKEN_HERE"
  }
}

1. Replace "PASTE_YOUR_TOKEN_HERE" with the token you copied from Figma (the one starting with figd_...).
2. Save the file.

Step 3: Verify the Connection

Let’s make sure it works!

1. Restart Antigravity to apply the changes.
2. Open a Figma file you want to work with.
3. Copy the URL of that Figma file (e.g., from the browser address bar).
4. In Antigravity, type a message like:
   • “Can you summarize this Figma file? [Paste File URL Here]”
5. If Antigravity responds with a description of your design, you are connected!

Troubleshooting

• “Command not found”: Ensure Node.js is installed and you restarted your terminal/computer after installing it.
• “Connection Refused” / “Auth Error”: Double-check that you copied the entire token correctly and that it hasn’t expired. You can always generate a new one in Figma.

Fun part begins! What type of questions can you make?

Here is a list of tasks you can ask Antigravity to perform. I am focusing purely on design, branding and marketing, but you can also get inspired by Figma to Claude via MCP guide, where I suggested prompts on design system, designops and governance.

Simply type any of these prompts into the Antigravity chat window and include the link to your Figma file or specific page:

Component Audit & Organization

• “Show me all the components used on Page 3 and tell me which ones are missing from our official Design System library.”
• “Search for all ‘Button’ components and list their variants (size, state, color).”
• “Find all instances of the ‘Navigation’ component that are detached or don’t follow the main component structure.”
• “List all components that don’t have an associated description or documentation link in the properties panel.”

Brand Identity & Marketing

• Compliance: “Analyze this campaign deck and flag any colors that aren’t part of our official brand palette.”
• Logo Check: “Scan these social media banners and tell me if the logo has enough clear space (padding) on all sides.”
• Typography: “Check if the headings in these marketing ads are using the correct brand font and weight.”
• Visual Balance: “Analyze the white space in this landing page frame and tell me if the spacing between sections is inconsistent.”

Quality Control & Consistency

• Naming Conventions: “Check the layer naming on this page. Flag any layers with generic names like ‘Rectangle 12’ or ‘Frame 45’.”
• Accessibility: “Run a contrast check on all marketing banners. Which text/background combinations fail WCAG AA standards?”
• Icon Audit: “Find all icons in this file and list their stroke weights. Flag any that aren’t set to 2px.”
• Grid Specs: “Check the ‘Hero’ frame on every page and verify if they are all centered on a 12-column grid.”

Content & Copywriting

• Typos & Tone: “Read all text layers in this campaign file and flag any typos or words that sound too formal for our brand voice.”
• Placeholder Search: “Find every instance of ‘Lorem Ipsum’ or ‘Placeholder’ text so I don’t forget to update them before the presentation.”
• Drafting Ideas: “I’ve marked areas with ‘Headline’ in Figma; suggest three short, punchy marketing headlines that fit this specific banner size.”
• Copy Sync: “Compare the text in the ‘Desktop’ version and the ‘Mobile’ version of this layout. Tell me where the copy is inconsistent.”

Design System Overviews

• File Stats: “Give me a quick summary of this file: How many pages, how many main components, and how many unique color styles are being used?”
• Variant Audit: “Identify components that should probably be merged into a single ‘Component Set’ with variants rather than being separate components.”
• Style Usage: “List all ‘Ghost’ styles or ‘Hidden’ layers that are currently unused and could be cleaned up to make the file faster.”

Questions? Want to share what you built with this? Drop me a line! 😎 I’m always up for talking design systems and AI tooling.