How do I obtain my Figma Personal Access Token?

Log in to Figma, click on your name in the top-left to go to **Account Settings**, scroll down to the **Personal access tokens** section, and click **Create a new personal access token**.

Where can I find the File Key?

Open any Figma file in your browser. The URL will look like `https://www.figma.com/file/:key/:title`. The random string of characters after `/file/` is your File Key.

Can I render design layers as images via chat?

Yes! The `get_images` tool allows you to specify a File Key and Node IDs to receive high-quality render URLs in PNG, SVG, or PDF formats flawlessy.

Figma MCP Server for Cline 12 tools — connect in under 2 minutes

Name: Figma
Availability: InStock
Author: Vinkius

cline.bot/docs/mcp

Built by Vinkius GDPR 12 Tools IDE

Cline is an autonomous AI coding agent inside VS Code that plans, executes, and iterates on tasks. Wire Figma through Vinkius and Cline gains direct access to every tool. from data retrieval to workflow automation. without leaving the terminal.

Get MCP Server for AI Agents

ASK AI ABOUT THIS MCP SERVER

Open in ChatGPT Open in Claude Open in Perplexity

Vinkius supports streamable HTTP and SSE.

RecommendedModern Approach — Zero Configuration

Vinkius Desktop App

The modern way to manage MCP Servers — no config files, no terminal commands. Install Figma and 2,500+ MCP Servers from a single visual interface.

Download Free Open SourceNo signup required

Classic Setup·json

{
  "mcpServers": {
    "figma": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Fully ManagedVinkius Servers

60%Token savings

High SecurityEnterprise-grade

IAMAccess control

EU AI ActCompliant

DLPData protection

V8 IsolateSandboxed

Ed25519Audit chain

<40msKill switch

Stream every event to Splunk, Datadog, or your own webhook in real-time

* Every MCP server runs on Vinkius-managed infrastructure inside AWS - a purpose-built runtime with per-request V8 isolates, Ed25519 signed audit chains, and sub-40ms cold starts optimized for native MCP execution. See our infrastructure

About Figma MCP Server

Figma is the leading collaborative interface design tool. This MCP server allows your AI agent to interact with your Figma files, projects, and teams flawlessly.

Cline operates autonomously inside VS Code. it reads your codebase, plans a strategy, and executes multi-step tasks including Figma tool calls without waiting for prompts between steps. Connect 12 tools through Vinkius and Cline can fetch data, generate code, and commit changes in a single autonomous run.

Key Features

File & Node Inspection — Retrieve the full document tree or specific layers to analyze design structures flawlessly.
Image Rendering — Render Figma frames, components, or layers into PNG, SVG, or PDF images flawlessly native.
Team & Project Orchestration — List team projects and project files to navigate your design workspace flawlessly.
Design Token Access — Extract published components, styles, and local variables to sync with codebases flawlessly.
Collaboration Tools — Read and post comments directly on design files to keep feedback loops active synchronously.
Version History — Access file version history to track design evolutions flawlessy through the agent.

The Figma MCP Server exposes 12 tools through the Vinkius. Connect it to Cline in under two minutes — no API keys to rotate, no infrastructure to provision, no vendor lock-in. Your configuration, your data, your control.

How to Connect Figma to Cline via MCP

Follow these steps to integrate the Figma MCP Server with Cline.

Open Cline MCP Settings

Click the MCP Servers icon in the Cline sidebar panel

Add remote server

Click "Add MCP Server" and paste the configuration above

Enable the server

Toggle the server switch to ON

Start using Figma

Ask Cline: "Using Figma, help me...". 12 tools available

Why Use Cline with the Figma MCP Server

Cline provides unique advantages when paired with Figma through the Model Context Protocol.

Cline operates autonomously. it reads your codebase, plans a strategy, and executes multi-step tasks including MCP tool calls without step-by-step prompts

Runs inside VS Code, so you get MCP tool access alongside your existing extensions, terminal, and version control in a single window

Cline can create, edit, and delete files based on MCP tool responses, enabling end-to-end automation from data retrieval to code generation

Transparent execution: every tool call and file change is shown in Cline's activity log for full visibility and approval before committing

Figma + Cline Use Cases

Practical scenarios where Cline combined with the Figma MCP Server delivers measurable value.

Autonomous feature building: tell Cline to fetch data from Figma and scaffold a complete module with types, handlers, and tests

Codebase refactoring: use Figma tools to validate live data while Cline restructures your code to match updated schemas

Automated testing: Cline fetches real responses from Figma and generates snapshot tests or mocks based on actual payloads

Incident response: query Figma for real-time status and let Cline generate hotfix patches based on the findings

Figma MCP Tools for Cline (12)

These 12 tools become available when you connect Figma to Cline via MCP:

get_comments

Get comments on a Figma file

get_file

Use depth to limit node traversal (1=pages only, 2=pages+top frames). Get a Figma file

get_file_nodes

Get specific nodes from a Figma file

get_file_versions

List versions of a Figma file

get_images

Render nodes from a Figma file as images

get_local_variables

List design tokens/variables in a Figma file

get_me

Get details for the authorized Figma user

list_components

List published team components

list_project_files

List files in a project

list_styles

List published team styles

list_team_projects

List projects in a Figma team

post_comment

Example Prompts for Figma in Cline

Ready-to-use prompts you can give your Cline agent to start working with Figma immediately.

"List all projects in my Figma team ID 123456."

"Get the document tree for file key abcDEF123."

"Render nodes 1:2 and 1:5 as PNG images."

Troubleshooting Figma MCP Server with Cline

Common issues when connecting Figma to Cline through the Vinkius, and how to resolve them.

Server shows error in sidebar

Click the server name to see logs. Verify the URL and token are correct.

Figma + Cline FAQ

Common questions about integrating Figma MCP Server with Cline.

How does Cline connect to MCP servers?

Cline reads MCP server configurations from its settings panel in VS Code. Add the server URL and Cline discovers all available tools on initialization.