5分で出来るFigmaとCursorの連携設定

こちらは、Figma-Context-MCPを使用して、Figmaの情報をCursorがより正確に使えるよう設定する方法のメモ書きになります。

FigmaのAPIキーの取得

1. Figma上の以下の箇所にある「Account settings」を開く。
   

2. Securityタブをクリックし、「Personal access tokens」にてGenerate new tokenをする。
   
   

   • Token nameは任意のものでOK！
   • File contentをRead-onlyにする。
   • 表示されたAPIキーをコピーしておく。
   • 一度しか表示されないので忘れない＆流出させないように！！
     

3. CursorでMCPサーバーの設定

• project内の.cursor配下にmcp.jsonを作成する。
• 以下のコードをmcp.jsonに記述。YOUR-KEYの部分はFigmaのAPIキーを入れる。

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

• disabled→Enabledに切り替える！！これ大事！！
  

6. Figmaでコンポーネントのリンクを取得する。

   • Figma上で任意のコンポーネントを選択し、「Copy link to selection」をクリックする。

7. Cursorのchat欄に取得したリンクを貼り付け、「<貼り付けたlink> ここを参照してください。」とSendしてみる。

   • 「get_figma_data」を使うか聞かれるのでOKにする
   • 以下のようにCursorがFigmaの情報を取得できるようになりました。