Skip to main content
hc
Submit
mcpSource-backed
Framelink MCP for Figma logo

Figma Context MCP Server

Framelink MCP server that gives AI coding agents simplified Figma layout, styling, and design context for implementing Figma frames in code.

by Framelink · submitted by oktofeesh1·added 2026-06-05·
Claude CodeCodexCursorClaude Desktop
HarnessClaude CodeCodexCursorClaude Desktop
Review first — review before installing

Open the source and read safety notes before installing.

Citation facts

Source-backed facts for citing this resource, derived directly from the registry — also available as plain text for AI assistants.

Canonical URL
https://heyclau.de/entry/mcp/figma-context-mcp-server
Source URLs
https://www.framelink.ai/docs/quickstart, https://github.com/GLips/Figma-Context-MCP
Brand
Framelink MCP for Figma
Brand domain
framelink.ai
Brand asset source
brandfetch
Safety notes
The server reads Figma design data through a personal access token; use the least access practical., Review generated UI code before merging because layout context does not guarantee accessibility, responsive behavior, or product correctness., Do not point agents at confidential designs, unreleased product work, or customer-specific mocks unless that exposure is approved.
Privacy notes
Figma file names, frame names, component names, layout metadata, styling, copy, and design tokens may be sent through the MCP server and AI client., Figma access tokens are sensitive credentials and should stay out of prompts, screenshots, shared configs, and commits., Design metadata can reveal product strategy, upcoming features, customer workflows, and brand assets.
Author
Framelink
Submitted by
oktofeesh1
Claim status
unclaimed
Last verified
2026-06-05

Decision playbook

Review trust signals before you adopt

Signals are present but mixed. Use the checklist below to confirm the source and operational safety for your environment.

Compare context
Selected

0

Current score

63

Baseline

—

Delta

No baseline selected

No major trust-signal divergence detected in the current selection.

Source and provenance checks

Needs review

Confirm ownership and provenance before trusting install instructions.

  • Source link availableRequired

    Open the canonical repository and verify ownership.

    Done

  • Source provenance statusRequired

    Marked as source-backed.

    Done

  • Metadata reviewed

    No reviewed flag detected in metadata.

    Pending

Safety and privacy checks

Complete

Validate risk disclosures before installation or API wiring.

  • Safety notes presentRequired

    Review the listed safety guidance before running commands.

    Done

  • Privacy notes presentRequired

    Review data handling notes before connecting accounts or secrets.

    Done

  • Trust level risk gateRequired

    Trust level does not block evaluation.

    Done

Package and install checks

Needs review

Check package metadata and artifact integrity signals.

  • Install payload available

    Install or copy payload is available for review.

    Done

  • Package verification flag

    No package verification flag provided.

    Pending

  • Checksum metadata

    No checksum provided for downloaded artifact.

    Pending

Compare-driven decision checks

Needs review

Use compare context to validate trade-offs before adoption.

  • Compare tray has multiple entries

    Add at least one more entry to compare trust differences.

    Pending

  • Baseline comparison available

    No baseline peer selected yet.

    Pending

  • Diverging trust signals identified

    No major trust-signal divergence found.

    Pending

Setup at a glance

CLI install

Copy-ready — paste the snippet to get started.

10 minutes

Install command

Provided

Config snippet

Provided

Copy snippet

Provided

Prerequisites

5 to clear

Platforms

4 listed

Install type

CLI install

Adoption plan

Balanced adoption plan

Current risk score 24/100. Use staged verification before broader rollout.

Risk 24

Pre-adoption checks

Validate source and review signals before any execution.

  • Confirm source provenanceRequired

    Source URL/provenance metadata is present.

    Done

  • Confirm metadata review state

    No review metadata found; increase manual validation.

    Pending

  • Verify install payload

    Install/config payload exists and can be inspected.

    Done

Security checks

Confirm safety, privacy, and package integrity signals.

  • Review safety notesRequired

    Safety notes are present.

    Done

  • Review privacy notesRequired

    Privacy notes are present.

    Done

  • Verify package integrity metadata

    No package verification/checksum metadata.

    Pending

Rollout

Adopt in controlled steps based on the selected plan.

  • Run in isolated sandbox firstRequired

    Use a constrained sandbox and observe behavior across multiple tasks.

    Pending

  • Roll out graduallyRequired

    Roll out to a small cohort before wider usage.

    Pending

  • Set monitoring and fallback

    Define rollback path and monitor errors after adoption.

    Pending

Evidence readiness

Evidence readiness matrix · balanced

Missing required evidence: Metadata review. Risk score 31.

Risk 31

Source provenance

Present

Source repository/provenance is listed.

Required in this preset

Metadata review

Missing

Review metadata is missing.

Required in this preset

Safety notes

Present

Safety notes are present.

Required in this preset

Privacy notes

Present

Privacy notes are present.

Optional in this preset

Package integrity

Missing

Package integrity metadata is missing.

Optional in this preset

Install payload

Present

Install payload is available.

Required in this preset

Required gaps: Metadata review

Decision timeline

Decision timeline · balanced

Blocking gaps: Check metadata review status. Risk 28.

Risk 28

triage

Confirm source provenanceRequired

Source/provenance metadata is available.

Done

triage

Check metadata review statusRequired

Review metadata is missing.

Pending

verify

Review safety notesRequired

Safety notes are available.

Done

verify

Review privacy notes

Privacy notes are available.

Done

verify

Validate package integrity metadata

Package integrity metadata is missing.

Pending

rollout

Verify install payload and commandsRequired

Install payload is available.

Done

Blockers: Check metadata review status

Prerequisite readiness

Prerequisite readiness

5 prerequisites to line up before setup. Have accounts and credentials ready first.

0/5 ready
Account & credentials2Install & runtime2Permissions & scopes110 minutes

Safety & privacy surface

Safety & privacy surface

3 safety and 3 privacy notes across 2 risk areas. Review closely: credentials & tokens.

2 areas
  • SafetyCredentials & tokensThe server reads Figma design data through a personal access token; use the least access practical.
  • SafetyGeneralReview generated UI code before merging because layout context does not guarantee accessibility, responsive behavior, or product correctness.
  • SafetyGeneralDo not point agents at confidential designs, unreleased product work, or customer-specific mocks unless that exposure is approved.
  • PrivacyCredentials & tokensFigma file names, frame names, component names, layout metadata, styling, copy, and design tokens may be sent through the MCP server and AI client.
  • PrivacyCredentials & tokensFigma access tokens are sensitive credentials and should stay out of prompts, screenshots, shared configs, and commits.
  • PrivacyGeneralDesign metadata can reveal product strategy, upcoming features, customer workflows, and brand assets.

Safety notes

  • The server reads Figma design data through a personal access token; use the least access practical.
  • Review generated UI code before merging because layout context does not guarantee accessibility, responsive behavior, or product correctness.
  • Do not point agents at confidential designs, unreleased product work, or customer-specific mocks unless that exposure is approved.

Privacy notes

  • Figma file names, frame names, component names, layout metadata, styling, copy, and design tokens may be sent through the MCP server and AI client.
  • Figma access tokens are sensitive credentials and should stay out of prompts, screenshots, shared configs, and commits.
  • Design metadata can reveal product strategy, upcoming features, customer workflows, and brand assets.

Prerequisites

  • Figma account with access to the files the agent should read.
  • Figma personal access token stored outside prompts and repository files.
  • Node.js and npx.
  • MCP client such as Claude Code, Cursor, or another compatible coding assistant.
  • Permission from the design owner before exposing private Figma files to an AI workflow.

Schema details

Install type
cli
Troubleshooting
No
Source repository stats
Scope
Source repo
Collection metadata
Estimated setup
10 minutes
Difficulty
beginner
Full copyable content
{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

About this resource

Content

Figma Context MCP is the Framelink MCP server for Figma design data. It lets an MCP client fetch simplified Figma layout and styling context from a file, frame, or group link so a coding agent can implement designs with more structure than a screenshot-only workflow.

The project is published as figma-developer-mcp and is designed for AI-powered coding tools such as Cursor and other MCP clients.

Source Review

These sources were reviewed on 2026-06-05. Prefer live Framelink docs for current setup, command flags, client examples, and Figma token requirements.

Features

  • Fetch Figma file, frame, and group context from links.
  • Simplify Figma API responses before sending layout context to the model.
  • Provide styling and layout metadata that coding agents can map into UI code.
  • Support stdio MCP client configuration through figma-developer-mcp.
  • Reduce context noise compared with raw Figma API payloads.

Installation

For Claude Code:

claude mcp add figma-context -e FIGMA_API_KEY=your-token -- npx -y figma-developer-mcp --stdio

For JSON-based MCP clients:

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

After setup, paste a Figma file, frame, or group link into the agent prompt and ask for implementation help.

Use Cases

  • Implement a Figma frame as a React, Vue, Svelte, or HTML/CSS component.
  • Extract layout, spacing, typography, and color context for a design handoff.
  • Compare generated UI against source design structure.
  • Give an agent source design metadata before building a first-pass interface.

Safety and Privacy

Figma files often contain unreleased product direction, brand work, customer flows, and internal copy. Only use tokens and files that are approved for the AI workflow. Review generated code for accessibility, responsive behavior, design system fit, and product correctness before shipping.

Keep Figma tokens in environment variables or client secret storage, never in repository files or screenshots.

Duplicate Check

content/mcp/figma-mcp-server.mdx covers Figma's official MCP server. This entry covers the separate Framelink/GLips Figma-Context-MCP project and its figma-developer-mcp package.

#figma#design#frontend#layout#framelink

Source citations

Add this badge to your README

Show that Figma Context MCP Server is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/mcp/figma-context-mcp-server.svg)](https://heyclau.de/entry/mcp/figma-context-mcp-server)

How it compares

Figma Context MCP Server side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

3 trust signals differ across this comparison (Package trust, Source provenance, Submitter).

Field
Framelink MCP for Figma logoFigma Context MCP Server

Framelink MCP server that gives AI coding agents simplified Figma layout, styling, and design context for implementing Figma frames in code.

Open dossier
Figma logoFigma MCP Server for Claude

Access designs, export assets, and interact with Figma files through Claude

Open dossier
designlang MCP Server

MCP server for extracting design systems from live websites, including design tokens, regions, components, contrast data, Tailwind themes, Figma variables, and prompt packs.

Open dossier
TalkToFigma MCP Server

Figma MCP bridge that connects Claude Code, Cursor, and other agents to a Figma plugin through WebSocket channels so they can read designs and modify nodes, text, layouts, styles, annotations, and components.

Open dossier
Next steps
Open dossierAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing
Open dossierAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing
Open dossierAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing
Open dossierAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing
Trust
Review statusNot reviewedNot reviewedNot reviewedNot reviewed
Package trustDiffersPackage not verifiedPackage verifiedPackage not verifiedPackage not verified
Source provenanceDiffersSource-backedNo submission linkSource-backedSource-backed
SubmitterDiffersoktofeesh1—oktofeesh1oktofeesh1
Install riskReview firstReview firstReview firstReview first
Notes Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
BrandFramelink MCP for Figma logoFramelink MCP for FigmaFigma logoFigma——
Categorymcpmcpmcpmcp
SourceSource-backedFirst-partySource-backedSource-backed
AuthorFramelinkFigmaManavarya09Grab
Added2026-06-052025-09-182026-06-052026-06-06
Platforms
Claude CodeCodexCursorClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Harness
Claude CodeCodexCursorClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Claude CodeClaude Desktop
Source repo————
Safety notes✓The server reads Figma design data through a personal access token; use the least access practical. Review generated UI code before merging because layout context does not guarantee accessibility, responsive behavior, or product correctness. Do not point agents at confidential designs, unreleased product work, or customer-specific mocks unless that exposure is approved.✓Use a scoped Figma token and review export or edit permissions before granting access to shared design files.✓designlang uses Playwright to crawl live pages and can capture DOM-derived styles, responsive behavior, interaction states, screenshots, and accessibility findings. Authenticated extraction options can use cookies, cookie files, headers, and custom user agents, so never pass production session cookies or credentials unless approved. Generated outputs may include design tokens, Tailwind config, shadcn variables, Figma variables, component anatomy, prompts, screenshots, reports, and cloned starter code. Commands such as apply, clone, sync, drift, visual-diff, and MCP extraction can read live websites and write files in the configured output or project directory. Review extracted prompt packs and generated code before using them in another agent workflow or committing them.✓TalkToFigma can read and modify Figma documents, selected nodes, text content, annotations, auto-layout settings, fills, strokes, component instances, prototype reactions, and exported node images. Agents can create, move, resize, clone, and delete nodes, so use a duplicate file or branch-like design workflow before broad edits. Always join the intended WebSocket channel and verify the active Figma document before running write tools. Review batch text replacements, component override propagation, annotation conversion, and connector generation before sharing or handing off design files. Keep the WebSocket bridge local or otherwise protected so untrusted clients cannot attach to an active Figma session.
Privacy notes✓Figma file names, frame names, component names, layout metadata, styling, copy, and design tokens may be sent through the MCP server and AI client. Figma access tokens are sensitive credentials and should stay out of prompts, screenshots, shared configs, and commits. Design metadata can reveal product strategy, upcoming features, customer workflows, and brand assets.✓Figma designs, comments, components, prototypes, team names, and file metadata may be sent through model context.✓URLs, page content, DOM text, CSS, screenshots, fonts, images, design tokens, cookies, headers, prompts, tool arguments, reports, and generated files may be visible to the MCP client and model provider. Authenticated or internal sites can expose product plans, unreleased UI, customer data, analytics identifiers, private brand assets, and implementation details. Output directories can retain extracted website data after the MCP session ends. Avoid running the server against private, paid, internal, or authenticated properties without legal and security approval.✓Figma document structure, node names, selected content, annotations, component metadata, local styles, exported images, text content, and prototype information may be exposed to the MCP client and model. Design files often contain unreleased product UI, customer data in mockups, brand assets, internal names, tokens, pricing, screenshots, or partner/client IP. Exported images can include visual details that are more sensitive than node metadata alone. Channel names, WebSocket messages, local logs, and MCP prompts may reveal active file context and design intent.
Prerequisites
  • Figma account with access to the files the agent should read.
  • Figma personal access token stored outside prompts and repository files.
  • Node.js and npx.
  • MCP client such as Claude Code, Cursor, or another compatible coding assistant.
  • Figma Desktop application installed and running (download from https://www.figma.com/downloads/)
  • Figma Desktop Dev Mode MCP Server enabled (check Figma Desktop preferences/settings to enable)
  • Figma Desktop running with MCP Server active on local port 3845 (http://127.0.0.1:3845/mcp)
  • Internet connection (for initial Figma Desktop installation, though MCP server operates locally)
  • Node.js 20 or newer available to the MCP client runtime.
  • Network access to the websites you plan to extract.
  • Permission to crawl and analyze the target sites.
  • Playwright or Chromium installation behavior reviewed for the local environment.
  • Bun installed through a trusted installation path.
  • Figma desktop or browser session with access to the design file you are authorized to inspect or modify.
  • The TalkToFigma Figma plugin installed from the documented upstream path or linked locally from the repository.
  • WebSocket bridge running with `bun socket`.
Install
claude mcp add figma-context -e FIGMA_API_KEY=your-token -- npx -y figma-developer-mcp --stdio
claude mcp list && claude mcp status figma
npx -y designlang mcp
bunx cursor-talk-to-figma-mcp@latest
Config
{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}
{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/mcp",
      "type": "http"
    }
  }
}
{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["-y", "designlang", "mcp", "--output-dir", "./design-extract-output"]
    }
  }
}
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed
Open 4 picks in the interactive comparison tool

Related guides

Source-backed guides for putting this to work.

Playwright Trace Viewer AI Debugging Guide

Use Playwright Trace Viewer evidence instead of guesswork when debugging UI failures with AI.

Added 1mo ago
guidesReview firstSource-backedReview first
Safety ✓ Privacy ✓by JSONbored

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.