Figma MCP With Gemini Cli

Gemini CLI is Google's official command-line AI coding agent, powered by the Gemini family of models. It supports the Model Context Protocol, making it compatible with Figma MCP out of the box. Gemini 1.5 Pro and Gemini 2.0 Flash both support vision input, which pairs well with Figma MCP's get_screenshot tool — the agent can read design context and visually verify its own output against the actual Figma rendering.

This topic covers installing Figma MCP for Gemini CLI, using it for design context extraction, walking through a CSS token generation example, and comparing output quality between Gemini CLI and Claude Code for design-to-code tasks.

Installing and Connecting Figma MCP to Gemini CLI

Prerequisites
- Gemini CLI installed — follow the official Gemini CLI installation guide
- A Figma account (free or paid)

Gemini CLI MCP configuration

Gemini CLI reads MCP server definitions from ~/.gemini/settings.json. Add Figma MCP using HTTP transport to connect to the official Figma MCP server:

{
  "mcpServers": {
    "figma": {
      "httpUrl": "https://mcp.figma.com/mcp"
    }
  }
}

No API key, no npx command, no local server process required.

Authentication

Start a Gemini CLI session and authenticate by running a Figma tool:

gemini

Inside the session, run a test prompt to trigger authentication:

Use the Figma MCP to get metadata for any file

Gemini CLI will open your browser for Figma OAuth. Grant access — Gemini CLI stores the resulting token for reuse in subsequent sessions.

Verify the connection

Once authenticated, confirm the Figma tools are available by asking:

What Figma MCP tools are available?

You should see get_design_context, get_screenshot, get_variable_defs, and other Figma tools listed.

Tips
- Restart Gemini CLI after editing settings.json — changes are not picked up in a running session.
- If the OAuth flow fails, remove the stored token from ~/.gemini/ and start a new session to re-authenticate.

Using Figma MCP Tools for Design Context Extraction in Gemini CLI

Gemini CLI exposes the same Figma MCP tools as other agents. The interaction pattern is identical: provide node IDs, call tools, use the response to generate code. Gemini's strength in this workflow is its large context window and strong visual reasoning when screenshots are involved.

Basic design context extraction

Use the Figma MCP get_design_context tool for node-id=55:320 in file ABC123.
Return a structured summary:
- Layout type and direction
- Direct children: name, type, rough dimensions
- Fill colors: hex values
- Typography: font family, size, weight for each text layer
- Component instances: Figma component names referenced

Multi-mode extraction (context + screenshot)

Using Figma MCP:
1. Call get_design_context for node-id=55:320 in file ABC123
2. Call get_screenshot for the same node

After retrieving both, answer:
- Does the visual layout match the structure described in the design context?
- Are there any visual elements (shadows, overlays, gradient borders) that appear in the screenshot but are not clearly represented in the JSON?
- What would be the most challenging aspects of implementing this design in CSS?

Retrieving design system variables

Call get_variable_defs for Figma file ABC123. Group the variables by collection and list them as a table with columns: Collection | Variable Name | Type | Light Mode Value | Dark Mode Value.

Searching the design system

Use the Figma MCP search_design_system tool to find components related to "form input" in file ABC123. List the matching component names, their node IDs, and a brief description of each.

Tips
- Gemini handles large JSON responses well — you don't need to artificially limit the design context request for most frames. Only switch to sub-frame targeting when you hit context limits.
- When working with multi-page Figma files, use get_metadata first to see page names, then specify the page in your design context request to avoid ambiguity.
- Use search_design_system at the start of a session to orient yourself on what components are available before choosing which existing components to reference in your generated code.
- For complex variable collections, ask Gemini to output the variable table as CSV — it is easier to review and import into a spreadsheet for team sharing than a markdown table.

Practical Example: Generating CSS from Figma Design Tokens in Gemini CLI

This section demonstrates a complete token extraction workflow: reading Figma variables and generating a well-structured CSS token file with light and dark mode support.

Context
- Figma file ID: BRAND2025
- The file has two variable collections: Colors and Spacing
- The Colors collection has two modes: Light and Dark
- Target output: src/styles/tokens.css

Turn 1: Inspect variable structure

Call get_variable_defs for Figma file BRAND2025. Return:
1. A list of all variable collections with the number of variables in each
2. For the "Colors" collection, list the first 10 variables with their Light and Dark mode values
3. For the "Spacing" collection, list all variables with their values
4. Note any aliased variables (variables that reference other variables rather than raw values)

Turn 2: Generate the CSS token file

Based on the variable definitions from Figma file BRAND2025, generate a CSS file at src/styles/tokens.css with the following structure:

1. A :root selector containing all Light mode color tokens as CSS custom properties, plus all spacing tokens
2. A @media (prefers-color-scheme: dark) block with a :root selector containing Dark mode overrides for color tokens
3. A [data-theme="dark"] :root selector with the same Dark mode overrides (for manual theme toggle support)

Naming convention:
- Colors collection: --color-{variable-name-kebab-case}
- Spacing collection: --spacing-{variable-name-kebab-case}

Add a comment at the top of the file: "/* Auto-generated from Figma Variables — BRAND2025 */"
Add the generation date as a comment too.

Expected output structure:

/* Auto-generated from Figma Variables — BRAND2025 */
/* Generated: 2026-05-08 */

:root {
  /* Colors — Light */
  --color-brand-primary: #3B82F6;
  --color-brand-secondary: #1D4ED8;
  --color-neutral-50: #F9FAFB;
  --color-neutral-900: #111827;
  /* ... */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  /* ... */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-primary: #60A5FA;
    --color-neutral-50: #1F2937;
    /* ... */
  }
}

[data-theme="dark"] :root {
  --color-brand-primary: #60A5FA;
  --color-neutral-50: #1F2937;
  /* ... */
}

Turn 3: Validation and reconciliation

Read the file at src/styles/tokens.css that was just generated, then call get_variable_defs again for file BRAND2025.
Verify:
1. Every variable in the Figma Colors collection appears as a CSS custom property in the :root block
2. Every variable in the Spacing collection appears in :root
3. Every variable that has a Dark mode value in Figma appears in both the @media and [data-theme="dark"] blocks
Report any discrepancies.

Turn 4: Documenting aliased tokens

From the variable definitions of file BRAND2025, identify all aliased tokens (tokens that reference another token as their value rather than a raw color/number).
Generate a comment block to add at the bottom of tokens.css that documents the alias relationships, e.g.:
/* Aliases: --color-button-primary → --color-brand-primary */

Tips
- Ask Gemini to validate its own token output against the source Figma data in a separate turn — this self-correction step catches omissions, especially in large variable collections.
- When generating the CSS file, specify the exact file path and ask the agent to create or overwrite it — Gemini CLI can write files directly, so you won't need to copy-paste output.
- For spacing tokens, ask whether Figma stores values in pixels or a unitless scale — if unitless, you need to add px in the CSS output, which the agent should handle automatically with the right instruction.
- Schedule a monthly "token sync" task: run this workflow, diff the output against the committed tokens.css, and open a PR with changes — it keeps design and code token definitions in sync with minimal manual effort.

Comparing Figma MCP Output Quality Between Gemini CLI and Claude Code

Both Gemini CLI and Claude Code are strong choices for Figma MCP workflows, but they have different strengths. Understanding these trade-offs helps you choose the right tool for the task.

Context window

Gemini 1.5 Pro's 2M token window is a meaningful advantage when working with complex Figma files that have hundreds of components and deep layer hierarchies.

Code generation fidelity

Claude (Sonnet and Opus) tends to produce code that more closely follows existing codebase patterns when given context about the project's style. It is particularly strong at matching TypeScript types, JSDoc annotations, and component API conventions.

Gemini performs well on straightforward layout-to-CSS translation and token extraction, but may require more explicit correction prompts for complex TypeScript generics or design system convention matching.

Vision accuracy

Both models handle Figma screenshots well for layout verification. Gemini 2.0 Flash processes images faster; Claude's analysis is often more detailed when asked to identify subtle design discrepancies.

Tool-calling reliability

Claude Code's native tool-calling with MCP is highly reliable for multi-step Figma workflows (e.g., get context, then screenshot, then read existing file, then generate). Gemini CLI is reliable for single-tool calls but may require more explicit instructions to chain multiple tool calls in a single turn.

Practical recommendation

• Use Gemini CLI when: working with large Figma files, extracting token lists from complex variable collections, or needing fast iteration on CSS output.
• Use Claude Code when: generating full React components with TypeScript, matching existing component patterns from the codebase, or running multi-step agentic workflows (extract, compare, generate, test).
• Use both in the same project: Gemini for token sync and design inventory, Claude Code for component implementation.

Call get_variable_defs for file ABC123 and generate src/styles/tokens.css with full light/dark mode support.

Using the tokens in src/styles/tokens.css and the design context from node-id=42:100 in file ABC123, generate the NotificationBanner component with TypeScript, CSS Modules, and full accessibility attributes.

Tips
- For token extraction at scale (files with 500+ variables), Gemini 1.5 Pro is the better choice — its large context window processes the full variable manifest without truncation.
- Keep a benchmark frame in your design system (a reference component you know well) and test new AI tools or model versions against it — this gives you a consistent quality baseline.
- The best approach is not picking one tool permanently: use whichever agent handles the current task best. MCP's standardized protocol means your workflow and prompts are largely transferable between agents.
- When comparing output quality, always test with the same Figma frame and the same constraints prompt — variations in prompt wording make it hard to attribute quality differences to the model rather than the prompt.