自社プロダクト パートナー開発 実績 会社概要 News Blog 採用情報 お問い合わせ 資料請求
自社プロダクト パートナー開発 実績 会社概要 News Blog 採用情報 お問い合わせ 資料請求
thumb image

【必見】Figma APIの使い方 | デザインツールのFigmaがもっと便利に!活用アイデアも紹介

Figmaとは代表的なデザイン用ツールの一つであり、世界中で広く使われています。
また、無料で使うことができるため、デザイン初学者の方にも人気があるツールです。

今回の記事では下記二つを中心に解説していきます。

☑️ 「Figma API」の使い方
☑️ どのような使い方ができるのか

前置き

今回の記事ではFigma APIの概要説明のみでなく、ハンズオン形式で解説していきます。
本記事がFigma APIを試すための手助けになれば幸いです。
ではまずはFigma APIの概要についてご説明します。

Figma APIとは?

Figma APIを使うことでFigma上の様々なデータを取得、利用することができます。
例えばFigma上で作成した各種デザインのメタデータ(オブジェクトのwidth、height等)を取得できます。

また、Figma APIは応用次第で様々なアイデアを実現できます。
こちらのFigma公式が公開しているWant Figma API inspiration? Here’s 8 community powered projectsによると、Figma APIと連携することで多彩なアプリケーションを開発することができます。

こちらの例のようにFigma API×IoTとして新しいサービスを生み出すこともできます。
「デザイン業界向けで新しいサービスを生み出したい」と考えている方にとってはFigma APIはひとつの大きな可能性だと思います。


一方でFigma APIは無料で使うことができますが、レートリミット(APIリクエスト制限)があります。
多数のリクエストを短時間に送りすぎるとエラーが返される仕様のようです。

本記事ではFigma APIを使うための準備、また画像取得のAPIをコールし実際に返す値の例も含めて解説します。

Figma APIを使うための準備物

Figma APIの説明に入る前にまずはFigma上でデザインファイルを作成しましょう。
Figmaにログインした後下記赤枠の「Design file」をクリックし、デザインファイルを作成します。

するとデザイン作成の画面に遷移するので、適当にデザインを用意しましょう。

今回はこちらの画像をFigma APIを通じて取得したいと思います。

Figmaアカウントを作成する

まずはFigma APIの公式サイトにアクセスし、アカウント登録をしましょう。
画面右上緑色のSign Upボタンをクリックします。

するとアカウント作成画面へ遷移します。
下記いずれかの方法でFigmaアカウントの作成ができます。
どの方法でアカウントを作成いただいても問題ありません。

アカウントの作成が完了すると、ログイン状態となってFigma APIのページに遷移します。
こちらでFigmaアカウントの作成が完了です。

アクセストークンを作成する

続いてFigma APIを利用するために、アクセストークンを作成します。
アクセストークンとはAPIを利用するアプリケーションやユーザが承認されているかどうかを判断する仕組みを指します。


まずはログインした状態でプロフィールアイコンをクリックします。

するとFigmaファイルの管理画面に遷移します。
そこで再びプロフィールアイコンをクリックし、その中のSettingsをクリックします。

その後表示されるモーダルを下にスクロールしていくと、Personal access tokesという項目があると思います。

その中のCreate a new personal access tokenに任意のトークン名(今回は適当にtest API)を入力しEnterキーを押下します。

すると黄色枠内にFigma API用のアクセストークンが生成されます。
セキュリティ上このトークンは一度しか表示されません。
そのため、コピーしてどこか別の場所に保存しておきましょう。

これでFigma API用のアクセストークンの生成は完了です。

Figma APIをコールし画像を取得する

それでは早速FigmaAPIをコールしてデザインの画像を取得しましょう。

まずはFigma APIをコールするために必要な情報を調達しましょう。
Figma APIコールを行うためには、下記3つの情報を用意する必要があります。

それぞれの単語の意味も含め順番に解説します。

Figma エンドポイント名を調べる

HTTPエンドポイントとはAPIを利用するためのURIを指します。
こちらを調べるために、FigmaAPIのGet Imageへアクセスします。

そして画像を取得するためのAPIを確認します。
するとGet Image APIというものがありますので、こちらのAPIを使いましょう。

下記画像の赤線がFigmaデザイン画像取得のAPIエンドポイント名です。
(export imagesと記載があるので分かりやすいかと思います。)

APIリクエストヘッダを設定する

APIリクエストヘッダとはサーバ側にデータを送信する際のJSON形式のメタデータのことです。
ドキュメントに記載の通り、X-Figma-Tokenをリクエストヘッダに設定しましょう。
X-Figma-Tokenには手順2で取得したアクセストークンをセットしてあげればOKです。

パスパラメータとクエリパラメータを設定する

パスパラメータ、クエリパラメータとはURI上で指定するパラメータを指します。
これにより、任意のリソースをAPIを介して取得できるようになります。

では実際のURIを例にして確認していきましょう。

上記赤線部分がパスパラメータで、青線部分がクエリパラメータです。

?を挟んで左側がパスパラメータ、右側がクエリパラメータと覚えるのが良いと思います。
使い分けとしては下記の通りです。

Figma APIのドキュメントから、どの値が必須パラメータなのかが確認できます。
Optional(任意)というマークがないため、これらは設定必須のパラメータとなります。

上記パラメータへの値を確認するには、前手順で作成したFigmaのデザインファイルにアクセスします。
そしてURLを確認するとIDのようなものが含まれているのが分かります。

下記それぞれがAPIコール時に設定すべき値となります。

これでAPIコールに必要な情報は全て揃いました。

PostmanでFigma APIをコールする

PostmanとはAPI開発やテスト目的で利用されるツールです。
こちらを使ってFigma APIをコールし画像を取得してみましょう。

Postmanを開き、下記画像の通りそれぞれの値を設定します。

上記値を設定し終わったら、最後に画像右上青色のSendボタンを押下してください。
そうするとAPIコールが実行されます。
正しく値が設定されていた場合は、黄色下線の通り画像URLが返却されます。

それでは上記APIで返却された画像URLをブラウザで確認してみましょう。

先ほどFigmaで作成した画像と同じものが取得できていることが分かります。

他のFigma APIも叩いてみましょう

今回はFigmaの画像データを取得するだけでした。
しかし、Figma APIを使うと下記のようなことも可能です。

さいごに

Figma APIを使ってみて色々と可能性を感じました。
Figma APIで取得したデータをファイル出力するロジックを作れば、Figma上のデータを全て出力するプラグイン等も作れるのではないかと思います。
時間が空いた時に他のAPIも試してみたいと思います。

facebook twitter