Figma には Web API（REST API） と デスクトップ／Webアプリ上で動作する Plugin API の2種類の開発向けインターフェースがあります。
どちらもデザインファイルにアクセスできる点は共通ですが、取得・操作できる情報や機能には明確な違いがあります。
本記事では、「どちらか一方でしか取得・操作できない情報」 に焦点をあてて整理します。
REST API（Web API）でのみ取得できる情報
REST API（Web API）でのみ取得できる情報をまとめました。
コメント情報の読み書き
デザインファイルに紐づくコメントを取得・投稿できます。Plugin APIではコメントの参照や投稿はできません。
{
"comments": [
{
"id": "123:45",
"message": "このボタンの色を青にしてください",
"created_at": "2025-08-09T02:15:00Z",
"user": { "handle": "designer@example.com" }
}
]
}ファイルメタデータ（バージョン履歴・チーム情報・権限、サムネイルURLなど）
ファイルが所属するチーム、プロジェクトの情報、アクセス権限、バージョン履歴などを取得可能です。
{
"name": "トップページデザイン",
"lastModified": "2025-08-08T12:00:00Z",
"thumbnailUrl": "https://figma-alpha.imgix.net/...",
"version": "120:0"
}複数ファイルや複数プロジェクトへの同時アクセス
チームキーを用いて一括取得できます。Plugin APIは現在開いているファイルに限定されます。
{
"files": [
{ "key": "AbCdEf123", "name": "ホームページ", "last_modified": "2025-08-08T10:00:00Z" },
{ "key": "GhIjKl456", "name": "商品ページ", "last_modified": "2025-08-07T15:30:00Z" }
]
}画像レンダリング（PNG/SVG/JPG出力）
ファイルやノードを画像形式でエクスポートできます。
{ "images": { "12:34": "https://figma-alpha.imgix.net/..." } }Plugin APIでのみ取得・操作できる情報・機能
Plugin APIでのみ取得・操作できる情報・機能をまとめました。
デザインのリアルタイム編集
レイヤー構造、テキスト、カラー、位置などを直接編集可能です。REST APIは読み取り専用。
const rect = figma.createRectangle();
rect.x = 100;
rect.y = 100;
rect.resize(200, 100);
rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }];
figma.currentPage.appendChild(rect);ノードプロパティや階層構造の操作
レイヤーの追加・削除、プロパティ変更などファイル内容を自在に操作できます。
const selection = figma.currentPage.selection[0];
console.log(selection.name); // 選択中レイヤーの名前
console.log(selection.width, selection.height); // サイズスタイルやコンポーネントのインポート
importComponentByKeyAsync() でチームライブラリからコンポーネントを読み込み可能（制限あり）。
const component = await figma.importComponentByKeyAsync("1234abcd5678efgh9012ijkl3456mnop");
const instance = component.createInstance();
figma.currentPage.appendChild(instance);フォントの読み込みと利用
loadFontAsync() により利用可能なフォントを読み込み、テキスト編集に利用できます。
await figma.loadFontAsync({ family: "Roboto", style: "Regular" });
const text = figma.createText();
text.characters = "こんにちは、Figma！";プラグイン専用UIとネットワークアクセス
HTML/CSS/JavaScriptによるUIを構築し、外部APIと通信できます（許可ドメインのみ）。
// plugin code
figma.ui.postMessage({ type: 'export-complete', data: { url: 'https://...' } });
// ui.html
window.onmessage = (event) => {
if (event.data.pluginMessage.type === 'export-complete') {
console.log(event.data.pluginMessage.data.url);
}
};動的ページ読み込みへの対応
大規模ファイルでは必要なページのみ非同期読み込み可能です。
Dev Modeでの読み取り専用動作
編集はできませんが、コード生成やアセット取得などに利用可能です。
比較表
比較表として、まとめました。
| 項目 | REST API（Web） | Plugin API |
|---|---|---|
| コメント操作 | ○ | × |
| メタデータ取得 | ○ | × |
| 複数ファイルアクセス | ○ | × |
| 画像レンダリング | ○ | × |
| デザイン編集 | × | ○ |
| ノード操作 | × | ○ |
| スタイル/コンポーネントインポート | × | ○ |
| フォント読み込み | × | ○ |
| プラグインUI/ネットワーク | × | ○ |
| 動的ページ読み込み | × | ○ |
| Dev Mode限定機能 | — | ○ |
まとめ
- コメントやメタデータ、バージョン履歴を扱う → REST APIが有効
- デザインの直接操作や編集を行う → Plugin APIが有効
目的に応じて使い分けることで、Figma上での開発効率を大きく向上させられます。