TOP

トップ

Service

事業紹介

動画配信パッケージ

LINEミニアプリ開発

Shopify開発

デザイン・開発まるっとパック

プロダクト/システム運用保守サービス

Lab型開発サービス

Works

実績

インタビュー

開発実績

Our Products

自社プロダクト

About

会社概要

Blog

ブログ

Recruit

採用情報

News

ニュース

FAQ

よくあるご質問

Contact

お問い合わせ

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デザインのフィードバックを読み上げる(Figma API × Alexa)
  • FrameのPDFエクスポーター (Figma API × PDF export)

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


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

api-document-error

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

Figma APIを使うための準備物

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

design-file

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

figma-desktop

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

Figmaアカウントを作成する

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

figma-sign-up

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

  • Googleアカウント連携
  • Figmaアカウント
  • SAML SSO

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

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

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


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

figma-profile

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

figma-profile-setting

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

figma-personal-access-token

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

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

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

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

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

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

  • HTTPエンドポイント名
  • API リクエストヘッダ
  • API リクエストボディ

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

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

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

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

figma-get-image-api

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

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

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

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

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

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

url-setting-example

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

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

  • パスパラメータ : リソースを識別するため
  • クエリパラメータ : リソースをフィルター/ソートするため

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

url-parameter

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

url-id-check

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

  • 赤線 : key(パスパラメータに設定する値)
  • 青線 : ids(クエリパラメータに設定する値)

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

PostmanでFigma APIをコールする

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

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

  • URI(パスパラメータ含む)
  • クエリパラメータ
  • リクエストヘッダー
postman-figma-api

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

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

figma-api-browser-check

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

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

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

  • Figma API POST comment : API経由でコメントを生成する。リプライも可能。
  • Figma API Color : 各ノードのカラー情報の取得が可能(ただしRGBA形式のみ)
  • Figma API svg : フォーマットを指定し画像URLの取得が可能 (jpg, png, svg, pdf対応)

さいごに

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

Enlytについて

株式会社Enlytはベトナムに開発拠点SupremeTechを持ち、これまで50以上の開発プロジェクトを行ってきました。ベトナムと日本のグローバルなチームで、数多くのプロジェクトを成功に導いてきました。

お客様の納得のいくまで、共に開発させていただき、アイデアを最高のかたちにサービス化いたします。

オフショア開発についてのお悩みやご相談がございましたら、下記ボタンより気軽にお問合せください!

バナー画像 バナー画像

他の記事

View More

arrow-forward

システム開発

仕様書とは?書き方や注意したい落とし穴を成功事例と合わせて解説

#コミュニケーション #サービス

テクノロジー

CDP(Customer Data Platform)とは?意味とEコマースでの活用方法

#ECサイト #サービス

テクノロジー

LINE APIで実現できることとは?使い方や活用事例を解説

#LINE #サービス