How to Install the Figma Extension for Gemini CLI: Complete MCP Setup Guide

Install the Figma extension for Gemini CLI by running gemini extensions install https://github.com/figma/mcp-server-guide, then authenticate with /mcp auth figma to enable design-extraction tools like get_design_context and use_figma.

The figma/mcp-server-guide repository provides a Model-Context-Protocol (MCP) extension that connects Gemini CLI to Figma's design infrastructure. Installing the Figma extension for Gemini CLI registers the remote MCP server at https://mcp.figma.com/mcp and exposes a suite of tools for extracting design data, generating code, and manipulating Figma files directly from the command line.

Step-by-Step Installation Guide

Installing the Figma extension requires a single command followed by an interactive authentication flow. The Gemini CLI handles extension registration by reading the gemini-extension.json manifest from the repository root.

Run the installation command:

gemini extensions install https://github.com/figma/mcp-server-guide

This command downloads the repository, copies the extension manifest into Gemini's extension directory, and registers the MCP server alias figma pointing to https://mcp.figma.com/mcp.

Start the Gemini REPL to complete setup:

gemini

Authenticate the extension with your Figma account:

/mcp auth figma

The CLI launches a browser-based OAuth flow. After granting permissions, Gemini stores the OAuth token locally, enabling authorized calls to the Figma MCP server.

Verify successful installation by listing available tools:

/list-tools

You should see Figma-specific tools including get_design_context, use_figma, create_design_system_rules, and create_new_file.

Extension Architecture and Configuration Files

The Figma extension relies on two critical JSON configuration files that define how Gemini discovers and communicates with the remote server.

gemini-extension.json

Located at the repository root, this manifest declares the extension metadata and MCP server registration. According to the figma/mcp-server-guide source code, the file specifies:

{
  "name": "Figma",
  "version": "2.0.2",
  "mcpServers": {
    "figma": {
      "httpUrl": "https://mcp.figma.com/mcp",
      "oauth": {
        "enabled": true
      }
    }
  }
}

This configuration tells the Gemini runtime to register an HTTP-based MCP server named figma with OAuth authentication enabled.

server.json

This file describes the Figma MCP server using the Model-Context-Protocol schema. It instructs Gemini how to establish the transport connection:

{
  "remotes": [
    {
      "type": "streamable-http",
      "url": "https://mcp.figma.com/mcp"
    }
  ]
}

The streamable-http transport type enables bidirectional communication between the Gemini CLI and Figma's design extraction APIs.

Authenticating with Figma

Authentication is mandatory after installing the Figma extension for Gemini CLI. The OAuth flow stores credentials locally, allowing tools to access private Figma files and write data back to the workspace.

After running /mcp auth figma, the CLI opens a browser window requesting Figma login credentials and API scopes. Upon authorization, the token persists across CLI sessions until explicitly revoked or uninstalled.

Using Figma Tools in Gemini CLI

Once installed and authenticated, the extension exposes design-centric tools callable from the Gemini REPL or agent sessions.

Fetch Design Context for a Frame

Extract structured design data (React + Tailwind descriptions) from a specific Figma node:

gemini
/get_design_context https://www.figma.com/file/XYZ123?node-id=12%3A34

Create a New Figma File

Generate a blank file in your Figma drafts folder:

gemini
/create_new_file "New Landing Page"

The tool returns the URL of the newly created file.

Add Frames and Components Programmatically

Use the use_figma tool to manipulate the active file:

gemini
/use_figma add_frame "Header" width=1440 height=80

This creates a new frame named "Header" with specified dimensions.

Retrieve Design Tokens

Access color, spacing, and typography variables:

gemini
/get_variable_defs https://www.figma.com/file/XYZ123?node-id=5%3A6

Returns a JSON list of design system tokens used in the selection.

Uninstalling the Figma Extension

To remove the extension and clear local MCP configurations:

gemini extensions uninstall figma

This command deregisters the server alias, removes cached OAuth tokens, and deletes the extension files from Gemini's extension directory.

Summary

• Install the Figma extension for Gemini CLI using gemini extensions install https://github.com/figma/mcp-server-guide.
• Configure happens automatically via gemini-extension.json (version 2.0.2) and server.json in the repository root.
• Authenticate using /mcp auth figma to enable OAuth-based access to private files.
• Verify installation with /list-tools to confirm tools like get_design_context and use_figma are available.
• Reference additional type definitions in skills/figma-use/references/plugin-api-standalone.d.ts and example skills in skills/figma-generate-library/SKILL.md.

Frequently Asked Questions

Do I need a Figma account to use the Gemini CLI extension?

Yes. The extension requires an active Figma account because the tools interact with the Figma API via the MCP server at https://mcp.figma.com/mcp. The OAuth flow in /mcp auth figma authenticates your CLI session with Figma's servers, enabling access to both public and private files.

What tools become available after installing the Figma extension?

The extension registers several design-extraction and manipulation tools, including get_design_context (converts Figma frames to code descriptions), use_figma (creates and modifies design elements), create_new_file (generates blank Figma files), get_variable_defs (extracts design tokens), and create_design_system_rules (generates styling guidelines).

Can I use the Figma extension without installing it from GitHub?

No. As implemented in figma/mcp-server-guide, the extension must be installed from the GitHub repository URL using gemini extensions install https://github.com/figma/mcp-server-guide. The CLI reads the gemini-extension.json and server.json files directly from the repository to configure the MCP server connection.

How does the extension handle authentication tokens?

The extension uses OAuth 2.0 as configured in gemini-extension.json with "oauth": { "enabled": true }. When you run /mcp auth figma, the Gemini CLI launches a local browser flow, obtains a token from Figma, and stores it securely in your local environment. Tokens persist across CLI sessions but are removed when you run gemini extensions uninstall figma.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}