概要
FigmaはREST APIを活用することで、デザインデータへのプログラムからのアクセス、画像の自動書き出し、デザイントークンの取得など、MCP Serverとは違った利用ができます。この記事では、Figma REST APIの基礎知識とVSCodeにおけるセットアップ方法を紹介します。
Figma REST APIとは
Figma REST APIは、FigmaのデザインファイルやプロジェクトにHTTPリクエストでアクセスできるWeb APIです。
主要なAPIエンドポイント
Figma REST APIは、以下の主要なエンドポイントを提供しています。
| エンドポイント | できること | 具体的な用途 |
|---|---|---|
| Files | デザインファイルの構造・レイヤー情報・プロパティを取得 | デザイントークンの抽出、コンポーネント一覧の取得 |
| Images | PNG/SVG/JPG/PDFフォーマットでの画像生成 | アイコン・イラストの自動書き出し、OGP画像の生成 |
| Comments | コメントの取得・投稿・更新・削除 | レビューフローの自動化、通知システムとの連携 |
| Versions | ファイルの過去バージョン履歴にアクセス | 変更履歴の追跡、特定バージョンのデータ取得 |
| Projects | チーム・プロジェクト・ファイル一覧を取得 | プロジェクト管理ツールとの連携、ファイル一覧の表示 |
| Variables | デザイン変数（色・タイポグラフィ等）を取得 | デザインシステムのトークン管理、CSS変数への変換 |
| Dev Resources | 開発リソース（仕様・実装ステータス）の管理 | デザインと開発の連携、実装進捗の追跡 |
これらのエンドポイントを組み合わせることで、デザインワークフローの自動化やデザインシステムの構築が可能になります。
Figma MCPとの使い分け
Figmaには2つの主要な開発者向けツールがあります。Figma REST APIは画像の書き出しやデザインデータの取得に特化したHTTPベースのAPIで、スクリプトやCI/CDパイプラインでの自動化に適しています。
一方、Figma MCPはGitHub Copilotと連携してデザインからコードを生成するAI支援ツールで、開発者の実装作業を効率化します。
| 機能 | Figma REST API | Figma MCP |
|---|---|---|
| 用途 | 画像書き出し・データ取得 | AIによるUI コード生成 |
| 認証 | Personal Access Token / OAuth2 | OAuth（自動認証） |
| Export設定 | ✅ 取得可能 | ❌ 非対応 |
| 画像書き出し | ✅ PNG/SVG/JPG/PDF | ❌ スクリーンショットのみ |
| コード生成 | ❌ 非対応 | ✅ React/HTML/Vue等 |
| メタデータ取得 | ✅ XML形式 | ✅ XML形式 |
| デザイン変数 | ✅ 取得可能 | ✅ 取得可能 |
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ファイルのアセット取得を自動化できそうですね。
