Skip to main content
Glama
nvanexan

@nvanexan/figma-mcp

by nvanexan
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
TypeScript
Remote

@nvanexan/figma-mcp

Figma MCP server for GitHub Copilot coding agent — PAT auth via STDIO.

Extracts design context (layout, styles, typography, effects) from Figma files as CSS-like properties, and exports rendered images of Figma nodes. Built on the Model Context Protocol.

Install

npm install -g @nvanexan/figma-mcp

Or use directly with npx:

npx @nvanexan/figma-mcp

Related MCP server: Framelink Figma MCP Server

Setup

Set your Figma Personal Access Token as an environment variable:

export FIGMA_API_KEY=your-figma-pat

You can generate a token in Figma under Settings > Personal Access Tokens.

GitHub Copilot / Claude Code

Add the server to your MCP configuration:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@nvanexan/figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "your-figma-pat"
      }
    }
  }
}

Tools

get_figma_context

Extracts design context from a Figma URL and returns a simplified node tree with CSS-like properties (flexbox layout, colors, typography, effects, dimensions).

Parameter

Type

Required

Description

figmaUrl

string

yes

Figma file URL (with optional node-id)

depth

number

no

Node tree depth, 1–10 (default: 3)

get_figma_image

Exports a rendered image of a Figma node.

Parameter

Type

Required

Description

figmaUrl

string

yes

Figma URL with a node-id

format

string

no

png, jpg, svg, pdf (default: png)

scale

number

no

0.01–4 (default: 2)

Development

npm install
npm run build
npm test

Scripts

Script

Description

npm run build

Compile TypeScript to dist/

npm run lint

Lint source with ESLint

npm test

Run tests

npm run test:watch

Run tests in watch mode

npm run test:coverage

Run tests with coverage report

Releasing

This project uses GitHub Actions for CI and publishing.

To release a new version:

  1. Update the version in package.json following semver:

    npm version patch  # 0.1.0 → 0.1.1 (bug fixes)
npm version minor  # 0.1.0 → 0.2.0 (new features)
npm version major  # 0.1.0 → 1.0.0 (breaking changes)

  2. Push the commit and tag:

    git push origin main --follow-tags

  3. The CI pipeline will automatically run tests and publish to npm.

License

MIT

Available Tools

2 tools
get_figma_contextA

Extract design context (layout, styles, text, dimensions) from a Figma URL as CSS-like properties

ParametersJSON Schema
NameRequiredDescriptionDefault
figmaUrlYesFigma design URL (supports /design/, /file/, /proto/, /board/)
depthNoMaximum depth to traverse the node tree (default: 3)

TDQS

A3.5/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure. While it mentions what gets extracted (layout, styles, text, dimensions), it doesn't address important behavioral aspects like authentication requirements, rate limits, error conditions, or what happens with invalid URLs. The description provides some context but leaves significant behavioral questions unanswered.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose. Every word earns its place - 'Extract' (action), 'design context' (what), 'from a Figma URL' (source), 'as CSS-like properties' (output format). No wasted words or redundant information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with no annotations and no output schema, the description provides basic purpose but lacks important contextual information. It doesn't explain what the output looks like (beyond 'CSS-like properties'), doesn't mention authentication or rate limiting, and doesn't provide examples of what 'design context' includes beyond the parenthetical list. The 100% schema coverage helps, but the description itself is incomplete for a tool that extracts complex design data.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 100% schema description coverage, the input schema already fully documents both parameters. The description doesn't add any meaningful parameter semantics beyond what's in the schema - it mentions 'Figma URL' and 'depth' concepts but provides no additional context about URL formats beyond what the schema specifies or how depth affects the extraction.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the specific action ('Extract'), target resource ('design context from a Figma URL'), and output format ('CSS-like properties'). It distinguishes from the sibling tool 'get_figma_image' by focusing on contextual data extraction rather than image generation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage through the phrase 'from a Figma URL' but doesn't explicitly state when to use this tool versus alternatives. No guidance is provided about when not to use it or what specific scenarios it's designed for beyond the general extraction purpose.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_figma_imageB

Export a rendered image of a Figma node as a URL

ParametersJSON Schema
NameRequiredDescriptionDefault
figmaUrlYesFigma design URL with a node-id parameter
formatNoImage export format (default: png)png
scaleNoImage scale factor (default: 2, max: 4)

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions exporting an image as a URL, implying a read operation, but doesn't cover aspects like authentication needs, rate limits, error handling, or what the URL format entails (e.g., temporary vs. permanent). This leaves significant gaps for a tool that interacts with an external service.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's function without unnecessary words. It's front-loaded with the core action, making it easy to parse and understand quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (3 parameters, no output schema, no annotations), the description is minimally adequate. It explains what the tool does but lacks details on behavioral traits and usage context, which are important for an external API tool. The high schema coverage helps, but overall completeness is limited.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, detailing each parameter's purpose, constraints, and defaults. The description adds no additional semantic context beyond what the schema provides, such as examples or edge cases, so it meets the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Export') and resource ('a rendered image of a Figma node'), making the purpose understandable. However, it doesn't differentiate from the sibling tool 'get_figma_context', which might handle different aspects of Figma data, so it doesn't reach the highest score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'get_figma_context' or other image export methods. It lacks context about prerequisites or exclusions, leaving the agent to infer usage from the parameters alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 2 tool updatesv0.1.0
    • First observedget_figma_context
    • First observedget_figma_image
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

B3.3/5.0
Disambiguation5/5

The two tools have clearly distinct purposes: one extracts design context as CSS-like properties, while the other exports rendered images. There is no overlap in functionality, making it easy for an agent to choose the right tool based on the need for data extraction versus visual output.

Naming Consistency5/5

Both tools follow a consistent verb_noun pattern with 'get_figma_' as a prefix, using snake_case throughout. This predictable naming scheme enhances readability and makes the tool set coherent and easy to understand.

Tool Count2/5

With only two tools, the server feels thin for a Figma integration, which typically involves more operations like creating or updating designs, listing files, or managing comments. The limited scope may restrict agent workflows, suggesting an incomplete surface for the domain.

Completeness2/5

The tool set is severely incomplete for a Figma MCP server, covering only context extraction and image export. It lacks core operations such as file management, design creation, or collaboration features, which are essential for comprehensive Figma integration, leading to potential agent failures in broader tasks.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • figmad-mcp

    toro1221
    F
    license
    A
    quality
    D
    maintenance
    Enables AI agents to interact with Figma to create, read, and manage designs using the Figma REST API and a dedicated plugin. It supports advanced features like UI generation from text, webpage reconstruction in Figma, and design token synchronization with codebases.
    20
    -

  • figma-mcp

    Anakintano
    F
    license
    B
    quality
    D
    maintenance
    Enables AI agents to read, inspect, and export Figma designs programmatically. Provides tools for listing components, styles, and exporting assets in various formats.
    5
    1
    -

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/nvanexan/figma-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server