Skip to content

README.ja.md

Latest commit

 

History

History
101 lines (75 loc) · 4.96 KB

README.ja.md

File metadata and controls

101 lines (75 loc) · 4.96 KB
Framelink

Framelink Figma MCP サーバー

🌐 利用可能な言語: English | 한국어 (Korean) | 中文 (Chinese)

コーディングエージェントにFigmaデータへのアクセスを提供。
ワンショットで任意のフレームワークにデザインを実装。

週間ダウンロード MITライセンス Discord
Twitter

Cursorと他のAI搭載コーディングツールに、このModel Context Protocolサーバーを通じてFigmaファイルへのアクセスを提供します。

CursorがFigmaデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの代替アプローチよりもはるかに正確にワンショットでデザインを実装できます。

クイックスタートガイドを見る →

デモ

FigmaデザインデータでCursorでUIを構築するデモを見る

ビデオを見る

仕組み

  1. IDEのチャットを開きます（例：Cursorのエージェントモード）。
  2. Figmaファイル、フレーム、またはグループへのリンクを貼り付けます。
  3. CursorにFigmaファイルで何かをするように依頼します（例：デザインの実装）。
  4. CursorはFigmaから関連するメタデータを取得し、コードを書くために使用します。

このMCPサーバーは、Cursorで使用するために特別に設計されています。Figma APIからコンテキストを応答する前に、応答を簡素化して翻訳し、モデルに最も関連性の高いレイアウトとスタイリング情報のみを提供します。

モデルに提供されるコンテキストの量を減らすことで、AIの精度を高め、応答をより関連性のあるものにするのに役立ちます。

はじめに

多くのコードエディタやその他のAIクライアントは、MCPサーバーを管理するために設定ファイルを使用します。

figma-developer-mcpサーバーは、以下を設定ファイルに追加することで設定できます。

注：このサーバーを使用するには、Figmaアクセストークンを作成する必要があります。Figma APIアクセストークンの作成方法についてはこちらをご覧ください。

MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

または env フィールドに FIGMA_API_KEY と PORT を設定することもできます。

Framelink Figma MCPサーバーの設定方法の詳細については、Framelinkドキュメントを参照してください。

スター履歴

スター履歴チャート

詳細情報

Framelink Figma MCPサーバーはシンプルですが強力です。Framelinkサイトで詳細情報をご覧ください。