はじめに
みなさんは、FigmaのREST APIでは、何が取得できるの？と思ったことはあるでしょうか？
この記事ではそんな、FigmaのREST APIについて紹介しようと思います。
Figma の REST API とは？
Figma APIは、Figmaファイルへの読み取りとインタラクションをサポートしています。
これにより、オブジェクトやレイヤー、それらのプロパティを表示、抽出することができ、Figmaの外部で画像としてレンダリングすることができます。
そうすれば、デザインをプレゼンテーションしたり、他のアプリケーションに接続したり、ビジョンを拡張するために使用したりすることができます。
（引用：Figma API）
Figma の REST API で出来ること
⚪︎ 認証
Figma内のエンドポイントにアクセスする前に、有効な認証を提供します。
Figma APIへのリクエストを認証するには、次の2つの方法があります。
- access tokenによる承認
- プロフィールページからaccess tokenを生成する
- 【推奨】 OAuth 2 経由での認証
スコープは以下のとおりです。
-
files:read- File content（ファイル・プロジェクト・ユーザー・バージョン・コメント・コンポーネント・スタイル・webhook）を読むことが出来る
-
file_variables:read・file_variables:write- Figma ファイル内のvariablesの読み取りと書き込みが出来る
-
file_comments:write- ファイル内のコメントとリアクションを投稿・削除できる
-
file_dev_resources:read・file_dev_resources:write- ファイル内の開発リソースの読み取りと書き込みができる
-
library_analytics:read- ライブラリーの利用状況を読み取ることができる
-
webhooks:write- Webhook を作成および管理できる
⚪︎ ファイルへのアクセス
Figmaのすべてのファイルは、ノードのツリーで構成されています。
すべてのファイルのルートには DOCUMENTノードがあり、そのノードから CANVASノードが派生します。すべてのCANVASノードは、Figma ファイル内のPAGEを表します。CANVASノードは、任意の数のノードを子として持つことができます。
CANVASノードから派生する各サブツリーは、キャンバス上のレイヤー(オブジェクトなど)を表します。
ノードにはいくつかのプロパティがあります。
その中には、すべてのノードに存在するグローバル・プロパティもあれば、ノードの種類に固有のプロパティもあります。
⚪︎ コメントへのアクセス
Figmaのコメント・モードでは、キャンバス上のレイヤーやオブジェクトに直接コメントを残すことができます。
これは、フィードバックを提供したい場合などの共同作業に便利です。
Figma APIを使用すると、コメントの作成日や作成者、キャンバス上の正確な位置など、コメントに関するさまざまな情報にアクセスできます。
⚪︎ ユーザー情報へのアクセス
Figmaに登録し、アカウントを作成した個人のFigmaアカウントを取得することができる。
⚪︎ バージョン履歴へのアクセス
Figmaでは、ファイルのバージョンを保存することができます。
これは、バージョン履歴に記録され、ユーザーは、ファイルの以前のバージョンを表示、追跡、復元することができます。
⚪︎ プロジェクトへのアクセス
ユーザー、やチームに属するファイルのコレクションです。
プロジェクトには共同作業者がアクセスでき、複数のファイルから構成することができます。
⚪︎ Components と styles へのアクセス
Figmaは、チームライブラリで公開されているコンポーネントやスタイルを取得することができます。
エンドポイントは、チームライブラリで公開されているアセット専用のもので、ローカルで購読されているコンポーネントやスタイルのメタデータを取得するには、GET /v1/files/:key を使用してください。
⚪︎ Webhooks V2
Webhooksは、Figmaファイルで特定のイベントが発生した際にそれを取得することができます。
⚪︎ アクティビティログ
組織で何が起きているかを追跡できます。
⚪︎ 支払い
Figma プラットフォームでの購入を、サーバーから安全に認証することとができる
⚪︎ Variablesへのアクセス
Variableを取得、作成、更新、削除することができる
⚪︎ Dev Resources へのアクセス
Dev リソースは、開発者が提供した URL で、ファイル内のノードに添付され、Figma Dev モードで表示されます。
⚪︎ ライブラリーの分析
Enterpriseプランの組織のみが利用でき、組織のデザインシステムやライブラリの使用状況に関する分析データを取得できる
まとめ
この記事では、FigmaのREST APIについて紹介しました。
ぜひこの記事をきっかけにFigmaのREST APIを触っていただけると嬉しいです。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。