DevinにFigmaのデザインを読み込ませる方法

はじめに

DevinにFigmaのデザインを読み込ませて、開発スピードをあげたい！と思い
連携方法を探しましたが、参考になる記事が少なかったので
自分用のメモも兼ねて書きます！

誰かのお役に立てばうれしいです。

連携方法

1. Figmaから個人アクセストークンを発行する

Figmaの個人アクセストークン（Personal Access Token）の発行方法は下記です。

1. Figmaのホーム＞設定＞セキュリティ＞個人アクセストークンより「新規トークンを発行」をクリック
2. トークン名や有効期限は任意、スコープは開発に必要な読み取り権限を付与する
3. 「トークンを発行」をクリック
4. トークンをコピーし、安全なところで保管する

注意点
トークンのコピーは 手順4 のタイミングのみで可能です。
わからなくなってしまった場合は、新規発行が必要です。

2. Figmaのファイルキーを取得する

1. Devinにお願いしたいデザインがあるFigmaのURLからファイルキーを取得する

例）

https://www.figma.com/file/1234567890/test
https://www.figma.com/design/1234567890/test

1234567890がファイルキーです。

3. Devinに指示する

1. Devinで下記のような文言をつけた上で、該当のデザインを作るように指示する

・このFigmaのパーソナルアクセストークンを使って、デザインファイルを取得してください。

トークン:xxxxxxxxxx
ファイルキー:1234567890

発行したトークンをDevinのSecretsに登録することもできますが、このトークンは個人のアカウントに紐づいているため、Devinを複数人で使っている場合は注意が必要です。
できれば、必要な人がそれぞれ自分のトークンを発行して、セッション内だけで使う運用のほうが安全でおすすめです。

プラグインについて

FigmaにDevinのプラグインが登場したので、それを使うのも一つの選択肢です。
私は検証してないですが、プラグインでもFigmaの「個人アクセストークン」は必要そうです。
Devin Figmaプラグイン（Figma Community）

参考リンク

Figma API Docs