概要
FigmaはREST APIを活用することで、デザインデータへのプログラムからのアクセス、画像の自動書き出し、デザイントークンの取得など、MCP Serverとは違った利用ができます。この記事では、Figma REST APIの基礎知識とVSCodeにおけるセットアップ方法を紹介します。
Figma REST APIとは
Figma REST APIは、FigmaのデザインファイルやプロジェクトにHTTPリクエストでアクセスできるWeb APIです。
主要なAPIエンドポイント
Figma REST APIは、以下の主要なエンドポイントを提供しています。
これらのエンドポイントを組み合わせることで、デザインワークフローの自動化やデザインシステムの構築が可能になります。
Figma MCPとの使い分け
Figmaには2つの主要な開発者向けツールがあります。Figma REST APIは画像の書き出しやデザインデータの取得に特化したHTTPベースのAPIで、スクリプトやCI/CDパイプラインでの自動化に適しています。
一方、Figma MCPはGitHub Copilotと連携してデザインからコードを生成するAI支援ツールで、開発者の実装作業を効率化します。
Personal Access Tokenによる認証
Figma REST APIの認証には、Personal Access TokenとOAuth2の2つの方法があります。Personal Access Tokenは個人開発や社内ツールに適しており、設定が簡単で即座に使い始められます。
一方、OAuth2は第三者にサービスを提供する場合に必要で、ユーザーごとの権限管理が可能です。この記事では、より手軽に始められるPersonal Access Tokenを使った認証方法を説明します。
Personal Access Tokenの取得
Figmaの設定画面から、API認証に使用するPersonal Access Tokenを生成します。このトークンは、APIリクエスト時にHTTPヘッダーに含めることで、Figmaアカウントの権限でAPIにアクセスできます。
取得手順:
- Figmaアカウントにログインする
- アカウントメニューを開き、「Settings」を選択する
- 「Security」タブを選択する
- Personal access tokensセクションで「Generate new token」をクリックする
- トークンの設定を入力する
- 「Generate token」をクリックして表示されたトークンをコピーする
生成されたトークンは画面を閉じると再表示できません。トークンをコピーし、安全な場所に保管する必要があります。
トークンのスコープ設定例
スコープはAPIアクセスの権限を定義します。詳細はScopesを参照します。画面を閉じてしまった場合は、新しいトークンを生成する必要があります。
環境変数の設定
取得したトークンは、セキュリティのためコードに直接記述せず環境変数で管理します。プロジェクトルートに.envファイルを作成し、トークンを設定します。
ローカル開発の場合
設定方法の詳細はNode.jsでの環境変数設定を参照します。
GitHub Codespacesの場合
リポジトリのSettings > Secrets and variables > Codespacesから、FIGMA_ACCESS_TOKENという名前でトークンを設定します。
設定方法の詳細はCodespaces Secrets設定を参照します。
Figma REST APIの動作確認
環境変数を設定後、curlコマンドでAPIの動作を確認します。
Terminalで以下のコマンドを実行します。
YOUR_FILE_KEYには実際のFigmaファイルのFile Keyを設定します。エラーが発生した場合は、トークンの有効性とスコープを確認します。
まとめ
Figma REST APIは、Figma MCPとは異なり画像書き出しやデザインデータ取得が行えます。npm scriptにしたり、そのscriptをGitHub ActionsやAgent Skillで実行することにより、Figmaファイルのアセット取得を自動化できそうですね。
