figma mcpをcursorで使う
251101 以前書いていたものは野良mcpというやつだったぽい。figma公式mcpのやり方を書く。
まず、figmaの法人契約のプランだと、admin権限でmcpできなくしてたりする。個人アカウントが確実。さらにプロフェッショナル以上に課金したチームで、fullかDevシートを割り当てられたアカウントじゃないとできない。
かつ、figmaファイルはプロフェッショナルチームの中のプロジェクトの中に入っているようにする。Draftじゃダメ。
ちなみにFigma betaデスクトップアプリは関係ない。Figmaアプリでok。
個人のプロフェッショナルチームの中のプロジェクトの中に入ったファイルを開き、Fullシートが自分に割り当てられていることを確認したら、Devモードに切り替えて右のパネルにMCP server というのがある。これを有効にする。
次にcursorでCursor Settingsを開き、New MCP Serverで
{
"mcpServers": {
"Figma Desktop": {
"url": "http://<人による>/mcp"
}
}
}
と書く。これでok。
<人による>のところはfigmaの画面上で出てきたし、cursorに聞いたら教えてくれた。どうやってもう一度出すかはなぞ。。
しかも一度うまく行ったはずなのに数分後もう一度試すとなぜかだめだったり、そのあとfigmaデスクトップアプリ上でmcp一度無効にして再度有効にしたらいけたりいけなかったり。。まじで謎。
ーーーー
figmaは有料プランじゃないと無理。
figma側でapiキーを発行する。Settings>Security 下の方の Personal access tokensのGenerate new token
↓
Token nameは適当。mcp-251015-1とか。(今日の日付+連番)
Expirationは90day
Scopesは
Files
✅ file_content: read
Development
✅ file_dev_resources:read
この二つにチェックしてGenerate token。
出てきたapiキーをコピー。
cursor側で、cursor Settings > Tools & MCP > New MCP Server
mcp.jsonが開くので、
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp@0.6.4",
"--figma-api-key=<コピーしたapiキー>",
"--stdio"
]
}
}
}
と書く。
figma-developer-mcp@0.6.4の
0.6.4の部分は、
これの最新リリース版の数字を書く。
こんな感じで緑色の◯が出て2 tools enabledと出てたら成功。
適当なwebサイト作るファイルで、figmaのフレームを⌘Lでコピーして、cursorのチャット欄に貼って、「これをhtmlとcssで作って」とか言ったら作ってくれる。
ーーー
251101 追記
figma apiを90日間に設定してまだ1ヶ月くらいしか経ってないのになぜかcursorでfigmaを読み取れなくなった。謎。
↓
今はfigma公式のmcpが出ているらしい。そっちのやり方で記事書き直す。
Discussion