Skip to main content
Glama
enesjakozh
kailashGN

Figma to React Native MCP

by kailashGN
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

FigmaからReact Native MCPへ

CursorのMCPを使って、FigmaのデザインをReact Nativeコンポーネントに変換します。このツールは、Figmaのデザインからコンポーネントを抽出し、適切な型とスタイルで対応するReact Nativeコンポーネントを生成します。

インストール

開発のために

eas.jsonに追加:

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",
        "FIGMA_FILE": "your_figma_file_id",
        "PROJECT_DIR": "your_project_directory"
      }
    }
  }
}

エンドユーザー向け

Cursor IDE に MCP サーバーをインストールします。

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"

Related MCP server: MCP Figma to React Converter

使用法

インストール後、カーソルで次のプロンプトを使用できます。

すべてのコンポーネントを抽出

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

特定のコンポーネントの抽出

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

構成

config オブジェクトは次のパラメータを受け入れます。

{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}

特徴

現在：

  • ✅ Figmaからコンポーネントを抽出する

  • ✅ React Nativeコンポーネントを生成する

  • ✅ コンポーネント階層を維持する

  • ✅ コンポーネントのプロパティと型を扱う

  • ✅ ネストされたコンポーネントをサポート

近日公開：

  • 🚧 GraphQL スキーマ生成

発達

貢献または変更するには:

  1. リポジトリをクローンする

  2. 依存関係をインストールします:

npm install

  1. 建てる：

npm run build

  1. ローカルで実行:

npm start

環境変数

ローカルで実行する場合は、 .envに以下が必要です。

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

エラー処理

よくあるエラーと解決策:

  • 「クライアントの作成に失敗しました」 : すべての環境変数が正しく設定されているかどうかを確認してください

  • 「コンポーネントページが見つかりません」 : Figmaファイルに「コンポーネント」という名前のページがあることを確認してください

  • 「Figmaファイルの取得に失敗しました」 : FigmaトークンとファイルIDを確認してください

ライセンス

マサチューセッツ工科大学

問題や機能のリクエストについては、GitHub で問題を開いてください。

Available Tools

3 tools
extract-componentsB

Extract all components from Figma file and get all graphql queries and mutations

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

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 states what the tool does but lacks details on permissions, rate limits, output format, or whether it's read-only or destructive. For a tool with zero annotation coverage, this is a significant gap in transparency.

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 functionality ('Extract all components from Figma file') and adds secondary action ('get all graphql queries and mutations') without unnecessary elaboration. Every word earns its place.

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

Completeness2/5

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

Given the complexity implied by extracting components and GraphQL queries/mutations, no annotations, and no output schema, the description is incomplete. It lacks details on behavioral traits, output format, and usage context, making it inadequate for informed tool selection.

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

Parameters4/5

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

The tool has 0 parameters, and schema description coverage is 100%, so no parameter documentation is needed. The description doesn't add parameter details beyond the schema, but with no parameters, a baseline of 4 is appropriate as it adequately addresses the lack of parameters.

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 ('extract all components') and target resource ('from Figma file'), and specifies additional functionality ('get all graphql queries and mutations'). It doesn't explicitly differentiate from sibling tools like 'extract-latest-components' or 'extract-one-component', which would require a 5.

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?

No guidance is provided on when to use this tool versus its siblings ('extract-latest-components' and 'extract-one-component'), nor any context about prerequisites or alternatives. The description implies a comprehensive extraction but lacks explicit usage instructions.

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

extract-latest-componentsB

Extract newly added components from Figma file

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions 'extract' but doesn't clarify if this is a read-only operation, what permissions are needed, how 'newly added' is determined (e.g., based on timestamps or user input), or what the output format might be. This leaves significant gaps for a tool with zero annotation coverage.

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 states the tool's purpose without any wasted words. It's appropriately sized and front-loaded, making it easy for an agent to parse quickly.

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

Completeness2/5

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

Given the lack of annotations and output schema, the description is incomplete. It doesn't explain what 'newly added' means, how the extraction works, or what the result looks like (e.g., a list of components or metadata). For a tool with zero structured data, this leaves too much ambiguity for reliable agent use.

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

Parameters4/5

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

The tool has 0 parameters, and schema description coverage is 100%, so no parameter documentation is needed. The description doesn't add any parameter information, which is acceptable here, but it could hint at implicit inputs (e.g., file identification), so it doesn't reach a perfect score.

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 ('extract') and resource ('newly added components from Figma file'), making the purpose understandable. However, it doesn't explicitly differentiate from sibling tools like 'extract-components' or 'extract-one-component', which likely handle different scopes of component extraction.

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 its siblings ('extract-components' and 'extract-one-component'). It implies usage for 'newly added components' but doesn't specify what qualifies as 'newly added' or any prerequisites, leaving the agent to guess when this is appropriate.

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

extract-one-componentC

Extract a single component from Figma file

ParametersJSON Schema
NameRequiredDescriptionDefault
parametersYes

TDQS

C2.4/5.0
Behavior1/5

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

No annotations are provided, so the description carries the full burden of behavioral disclosure. However, it only states the action without any details on permissions, side effects, rate limits, or output format. For a tool with no annotations, this minimal description fails to provide essential behavioral context.

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 purpose without unnecessary words. It's front-loaded and appropriately sized for its content, making it easy to parse quickly.

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

Completeness2/5

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

Given the tool's complexity (1 parameter with nested objects, no annotations, no output schema), the description is incomplete. It lacks details on behavior, parameter usage, and output, which are critical for an agent to use the tool effectively in context with its siblings.

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

Parameters2/5

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

The input schema has 1 parameter with 0% description coverage, and the tool description doesn't add any parameter semantics. It doesn't explain what 'componentName' represents (e.g., format, examples, or constraints), leaving the parameter's meaning unclear beyond the schema's basic type definition.

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

Purpose3/5

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

The description states the tool's purpose ('Extract a single component from Figma file') with a clear verb ('Extract') and resource ('component from Figma file'), but it doesn't distinguish from sibling tools like 'extract-components' or 'extract-latest-components'. The purpose is understandable but lacks specificity about what makes this tool unique compared to its siblings.

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. It doesn't mention sibling tools or specify scenarios where extracting a single component is preferred over batch extraction (e.g., 'extract-components'), leaving the agent without context for tool selection.

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. 3 tool updatesv1.0.0
    • First observedextract-components
    • First observedextract-latest-components
    • First observedextract-one-component
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

C2.9/5.0

Scored across 3 tools

Disambiguation4/5

The tools are mostly distinct, focusing on different extraction scopes: all components, newly added components, and a single component. However, there is some potential overlap between 'extract-components' and 'extract-latest-components' if an agent needs to understand the difference between 'all' and 'newly added' in practice, but the descriptions clarify this well.

Naming Consistency5/5

All tool names follow a consistent 'extract-[adjective]-components' pattern, using snake_case uniformly. The naming is predictable and clear, making it easy for agents to infer functionality from the names alone.

Tool Count3/5

With only 3 tools, the set feels thin for a server that converts Figma to React Native, as it lacks tools for other operations like updating, deleting, or managing components. While the tools cover extraction well, the scope suggests more functionality might be needed for a complete workflow.

Completeness2/5

The toolset is severely incomplete for the implied domain of converting Figma designs to React Native code. It only provides extraction tools, with no capabilities for generating code, updating components, handling errors, or integrating with React Native projects, leaving significant gaps that will likely cause agent failures in practical use.

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

Appeared in Searches