Skip to main content
Glama
deenesjakozh
s9hn

figma-to-markdown-mcp

by s9hn
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

figma-to-markdown-mcp

npm version License: MIT CI

AI 구현 워크플로우를 위한 Figma MCP 앞단의 간결한 마크다운 레이어입니다.

이 MCP 서버는 Figma 노드 URL을 받아 내부적으로 Figma Desktop MCP의 get_design_context를 호출하고, 구현 가치를 더하지 않으면서 토큰 비용만 높이는 원시 React/Tailwind 패스스루를 제거하여 간결한 마크다운을 반환합니다.

일반적인 디자인 컨텍스트 페이로드에서 약 45%의 토큰 절감 효과가 있습니다 (샘플: 1,053 → 582 토큰).

작동 방식

User  →  implementation request + Figma node URL
      →  figma-to-markdown MCP
      →  Figma Desktop MCP  (get_design_context + get_metadata)
      →  compact markdown
      →  implementation agent

간결한 출력물은 구현에 중요한 정보만 유지합니다:

유지 항목

제거 항목

소스 메타데이터

원시 React/Tailwind 패스스루

노드 이름, 유형, 프레임

반복적인 래퍼 상용구

레이아웃 및 간격 사양

장황한 클래스 속성 덤프

텍스트 및 타이포그래피 정보

에셋 참조

구현 노트

Related MCP server: figma-mcp-server

요구 사항

  • Figma Desktop 앱 실행 중

  • Figma Desktop 설정에서 Dev Mode MCP 활성화

  • 요청된 노드가 포함된 문서가 활성 탭이어야 함

  • Node.js 18 이상

설치

별도의 설치 단계가 필요하지 않습니다. npx를 사용하여 필요할 때 실행하세요:

npx figma-to-markdown-mcp

또는 원하신다면 전역으로 설치할 수도 있습니다:

npm install -g figma-to-markdown-mcp

등록

MCP 클라이언트의 설정 파일에 서버를 등록하세요. JSON 형식은 클라이언트마다 동일하며 파일 위치만 다릅니다.

Claude Desktop

설정 파일: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "figma-to-markdown": {
      "command": "npx",
      "args": ["-y", "figma-to-markdown-mcp"]
    }
  }
}

Claude Code

설정 파일: .claude/settings.json (프로젝트) 또는 ~/.claude/settings.json (전역)

{
  "mcpServers": {
    "figma-to-markdown": {
      "command": "npx",
      "args": ["-y", "figma-to-markdown-mcp"]
    }
  }
}

Cursor

설정 파일: .cursor/mcp.json

{
  "mcpServers": {
    "figma-to-markdown": {
      "command": "npx",
      "args": ["-y", "figma-to-markdown-mcp"]
    }
  }
}

Codex CLI

설정 파일: ~/.codex/config.toml (전역) 또는 .codex/config.toml (프로젝트)

[mcp_servers.figma-to-markdown]
command = "npx"
args = ["-y", "figma-to-markdown-mcp"]

사용법

등록이 완료되면 에이전트에게 Figma 노드 URL을 제공하고 구현을 요청하세요.

에이전트 흐름:

  1. 사용자가 구현 요청과 함께 Figma 노드 URL을 보냅니다.

  2. 에이전트가 해당 URL로 get_design_context_compact를 호출합니다.

  3. 이 서버가 내부적으로 Figma Desktop MCP로부터 디자인 컨텍스트를 가져옵니다.

  4. 원시 출력물이 마크다운으로 압축되어 반환됩니다.

  5. 에이전트가 간결한 마크다운을 바탕으로 구현합니다.

  6. 정보가 부족한 경우에만 에이전트가 원시 Figma MCP 도구로 돌아가야 합니다.

도구: get_design_context_compact

{
  "figma_url": "https://www.figma.com/design/FILE_KEY/Name?node-id=123-456",
  "include_stats": false
}

매개변수

유형

필수

설명

figma_url

string

예

node-id 쿼리 매개변수를 포함한 전체 Figma URL

include_stats

boolean

아니오

출력물에 토큰 크기 통계 추가

출력 예시:

# Figma Design Context

## Source
- provider: `figma-mcp`
- transformed-by: `figma-to-markdown`
- node-id: `123:456`
- file-key: `ExampleFileKey123`
- mode: compact implementation handoff

## Node Summary
- component: `BasicNavi`
- type: `instance`
- frame: `375 x 48`

## Compact Element Spec
- `basic navi` → flex, items center; bg `#f6f6f6 (neutral/100)`
- inner content row → flex, flex `1 0 0`, gap `8px`; px `10px`, py `4px`

## Text Spec
- text "Label" → font `Pretendard Regular`, size `19px`, line `24px`, color `neutral/900`

참고 사항

  • file-key는 추적을 위해 입력 URL에서 추출됩니다.

  • get_metadata는 보조 정보로 병렬로 가져오며, 사용할 수 없는 경우에도 메인 요청이 실패하지 않습니다.

  • 압축 신뢰도가 낮을 경우 출력물에 ## QA Flags 섹션이 포함됩니다.

  • 원시 업스트림 코드는 기본적으로 생략됩니다. 페이로드 크기를 확인하려면 include_stats: true로 설정하세요.

버전 및 라이선스

Available Tools

1 tool
get_design_context_compactA

Call this first for a Figma node URL. It fetches upstream Figma get_design_context internally, removes raw React/Tailwind passthrough, and returns compact markdown with layout, text, asset, and implementation notes.

ParametersJSON Schema
NameRequiredDescriptionDefault
figma_urlYesFull Figma design URL including node-id query parameter, e.g. https://www.figma.com/design/FILE_KEY/Name?node-id=123-456
include_statsNoAppend markdown size statistics to the output

TDQS

A3.9/5.0
Behavior3/5

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

With no annotations provided, the description carries the full burden. It explains that the tool internally calls get_design_context and removes raw React/Tailwind passthrough, providing relevant behavioral context. However, it does not disclose potential side effects, permissions needed, or rate limits, which are not critical for a read-only like operation but could be improved.

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

Conciseness4/5

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

The description is a single sentence that conveys purpose, behavior, and output format without extraneous words. It could be slightly more structured, but it is efficient and front-loaded with the key action.

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

Completeness4/5

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

Given the absence of output schema, the description does a good job summarizing the output as 'compact markdown' with specific content types. With 2 parameters and no nested objects, the description is sufficiently complete for this low-complexity tool.

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?

Schema coverage is 100%, so baseline is 3. The description does not add extra meaning to the parameters beyond what the schema provides, but the schema descriptions are detailed enough. The description briefly mentions 'layout, text, asset, and implementation notes' which hints at output structure, but does not explain parameters specifically.

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 tool's purpose: to be called first for a Figma node URL, fetching design context and returning compact markdown. It specifies the verb 'fetch' and resource 'Figma node URL', and distinguishes itself with a clear role as the initial call in a workflow.

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

Usage Guidelines4/5

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

The description explicitly says 'Call this first for a Figma node URL', establishing a clear usage precedence. However, it does not mention when not to use it or alternatives, which is acceptable given no sibling tools exist.

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.

  1. 1 tool updatev1.0.0
    • First observedget_design_context_compact
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3.3/5.0

Scored across 1 tool

Disambiguation1/5

Only one tool exists, so no disambiguation is needed, but the lack of additional tools means any other functionality would be ambiguous.

Naming Consistency3/5

Single tool name is descriptive and follows verb_noun pattern, scoring neutrally due to no other names to compare.

Tool Count2/5

One tool for a domain like Figma design is far too few; users would need many more operations (e.g., list files, get components).

Completeness1/5

The single tool only fetches design context; no tools for creating, updating, or managing Figma resources, leaving major gaps.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • figma-mcp-server

    DRX-1877
    A
    license
    Not graded
    quality
    D
    maintenance
    Enables developers to extract and organize Figma design files, including complete node data (tree structure and images) for AI understanding and code generation.
    MIT

  • Figma To Code MCP

    felixAnhalt
    A
    license
    Not graded
    quality
    B
    maintenance
    Transforms Figma design data into a compact, LLM-friendly format for code generation, reducing size by 99.5% while preserving UI-critical information.
    130 npm
    5
    MIT

  • Figma Context MCP

    cola-sk
    A
    license
    A
    quality
    C
    maintenance
    Converts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.
    1
    14 npm
    MIT