{"id":25641934,"url":"https://github.com/glips/figma-context-mcp","last_synced_at":"2025-05-14T21:00:17.553Z","repository":{"id":277293449,"uuid":"931892749","full_name":"GLips/Figma-Context-MCP","owner":"GLips","description":"MCP server to provide Figma layout information to AI coding agents like Cursor","archived":false,"fork":false,"pushed_at":"2025-05-06T05:23:32.000Z","size":447,"stargazers_count":6701,"open_issues_count":21,"forks_count":529,"subscribers_count":44,"default_branch":"main","last_synced_at":"2025-05-13T17:13:13.493Z","etag":null,"topics":["ai","cursor","figma","mcp","typescript"],"latest_commit_sha":null,"homepage":"https://www.framelink.ai/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GLips.png","metadata":{"files":{"readme":"README.ja.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"GLips"}},"created_at":"2025-02-13T02:55:06.000Z","updated_at":"2025-05-13T17:10:03.000Z","dependencies_parsed_at":"2025-03-02T01:22:16.232Z","dependency_job_id":"68bbf898-ec3d-40a0-8a50-02b51d62b8f3","html_url":"https://github.com/GLips/Figma-Context-MCP","commit_stats":null,"previous_names":["glips/figma-context-mcp"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GLips%2FFigma-Context-MCP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GLips","download_url":"https://codeload.github.com/GLips/Figma-Context-MCP/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227603,"owners_count":22035667,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","cursor","figma","mcp","typescript"],"created_at":"2025-02-23T05:16:32.071Z","updated_at":"2025-05-14T21:00:17.037Z","avatar_url":"https://github.com/GLips.png","language":"TypeScript","readme":"\u003ca href=\"https://www.framelink.ai/?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=readme\" target=\"_blank\" rel=\"noopener\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://www.framelink.ai/github/HeaderDark.png\" /\u003e\n    \u003cimg alt=\"Framelink\" src=\"https://www.framelink.ai/github/HeaderLight.png\" /\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eFramelink Figma MCP サーバー\u003c/h1\u003e\n  \u003cp\u003e\n    🌐 利用可能な言語:\n    \u003ca href=\"README.md\"\u003eEnglish\u003c/a\u003e |\n    \u003ca href=\"README.ko.md\"\u003e한국어 (Korean)\u003c/a\u003e |\n    \u003ca href=\"README.zh.md\"\u003e中文 (Chinese)\u003c/a\u003e\n  \u003c/p\u003e\n  \u003ch3\u003eコーディングエージェントにFigmaデータへのアクセスを提供。\u003cbr/\u003eワンショットで任意のフレームワークにデザインを実装。\u003c/h3\u003e\n  \u003ca href=\"https://npmcharts.com/compare/figma-developer-mcp?interval=30\"\u003e\n    \u003cimg alt=\"週間ダウンロード\" src=\"https://img.shields.io/npm/dm/figma-developer-mcp.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"MITライセンス\" src=\"https://img.shields.io/github/license/GLips/Figma-Context-MCP\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://framelink.ai/discord\"\u003e\n    \u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/1352337336913887343?color=7389D8\u0026label\u0026logo=discord\u0026logoColor=ffffff\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://twitter.com/glipsman\"\u003e\n    \u003cimg alt=\"Twitter\" src=\"https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fglipsman\u0026label=%40glipsman\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n[Cursor](https://cursor.sh/)と他のAI搭載コーディングツールに、この[Model Context Protocol](https://modelcontextprotocol.io/introduction)サーバーを通じてFigmaファイルへのアクセスを提供します。\n\nCursorがFigmaデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの代替アプローチよりも**はるかに**正確にワンショットでデザインを実装できます。\n\n\u003ch3\u003e\u003ca href=\"https://www.framelink.ai/docs/quickstart?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=readme\"\u003eクイックスタートガイドを見る →\u003c/a\u003e\u003c/h3\u003e\n\n## デモ\n\n[FigmaデザインデータでCursorでUIを構築するデモを見る](https://youtu.be/6G9yb-LrEqg)\n\n[![ビデオを見る](https://img.youtube.com/vi/6G9yb-LrEqg/maxresdefault.jpg)](https://youtu.be/6G9yb-LrEqg)\n\n## 仕組み\n\n1. IDEのチャットを開きます（例：Cursorのエージェントモード）。\n2. Figmaファイル、フレーム、またはグループへのリンクを貼り付けます。\n3. CursorにFigmaファイルで何かをするように依頼します（例：デザインの実装）。\n4. CursorはFigmaから関連するメタデータを取得し、コードを書くために使用します。\n\nこのMCPサーバーは、Cursorで使用するために特別に設計されています。[Figma API](https://www.figma.com/developers/api)からコンテキストを応答する前に、応答を簡素化して翻訳し、モデルに最も関連性の高いレイアウトとスタイリング情報のみを提供します。\n\nモデルに提供されるコンテキストの量を減らすことで、AIの精度を高め、応答をより関連性のあるものにするのに役立ちます。\n\n## はじめに\n\n多くのコードエディタやその他のAIクライアントは、MCPサーバーを管理するために設定ファイルを使用します。\n\n`figma-developer-mcp`サーバーは、以下を設定ファイルに追加することで設定できます。\n\n\u003e 注：このサーバーを使用するには、Figmaアクセストークンを作成する必要があります。Figma APIアクセストークンの作成方法については[こちら](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)をご覧ください。\n\n### MacOS / Linux\n\n```json\n{\n  \"mcpServers\": {\n    \"Framelink Figma MCP\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"figma-developer-mcp\", \"--figma-api-key=YOUR-KEY\", \"--stdio\"]\n    }\n  }\n}\n```\n\n### Windows\n\n```json\n{\n  \"mcpServers\": {\n    \"Framelink Figma MCP\": {\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npx\", \"-y\", \"figma-developer-mcp\", \"--figma-api-key=YOUR-KEY\", \"--stdio\"]\n    }\n  }\n}\n```\n\nまたは `env` フィールドに `FIGMA_API_KEY` と `PORT` を設定することもできます。\n\nFramelink Figma MCPサーバーの設定方法の詳細については、[Framelinkドキュメント](https://www.framelink.ai/docs/quickstart?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=readme)を参照してください。\n\n## スター履歴\n\n\u003ca href=\"https://star-history.com/#GLips/Figma-Context-MCP\"\u003e\u003cimg src=\"https://api.star-history.com/svg?repos=GLips/Figma-Context-MCP\u0026type=Date\" alt=\"スター履歴チャート\" width=\"600\" /\u003e\u003c/a\u003e\n\n## 詳細情報\n\nFramelink Figma MCPサーバーはシンプルですが強力です。[Framelink](https://framelink.ai?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=readme)サイトで詳細情報をご覧ください。\n","funding_links":["https://github.com/sponsors/GLips"],"categories":["Uncategorized"],"sub_categories":["How to Submit"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglips%2Ffigma-context-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglips%2Ffigma-context-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglips%2Ffigma-context-mcp/lists"}