Figmaのプロジェクトやフレーム、ノードを一括出力するコマンドライン ツール
24th September 2023Figmaで作成したファイルをPDFやpngなどの形式として一括してエクスポートしておきたいことがあります。 たとえば、複数あるFigJamの中でどこかのスティッキーに書いたメモを検索したいとします。 Figmaの検索はファイル名や人の検索はできますが、ファイルの中身までは見てくれないためこういった検索がうまくいきません。
せめてどのファイルに書いたのかわかればよいので、プロジェクトファイルをPDFとしてすべてエクスポートしておけば後はなんとでもなります。 OSのファイル全文検索やDropboxなどのクラウドストレージの検索を使えば解決です。 こういったワークフローを確立するには、自動化が欠かせません。Figmaでは幸いAPIを利用してこれらエクスポート処理ができるようなので、 自作オープンソース ツールである watermint toolboxに機能を組み込んでみました。
このツールはコマンドライン ツールですのでなじみのない方には難しく感じるかもしれませんが、一度自動化してしまうと戻れなくなりますので、習得しておいてもさほど損ではないかと思います。
Figma用のコマンド
watermint toolboxはDropboxやGithubなどいくつかの対応サービスに対して、コマンドを指定して処理を実行するようになっています。 Figma向けのコマンドは次のようなものがあります。
| コマンド | 説明 |
|---|---|
| services figma account info | 現在のユーザー情報を取得する |
| services figma file export all page | チーム配下のすべてのファイル/ページをエクスポートする |
| services figma file export frame | Figmaファイルの全フレームを書き出す |
| services figma file export node | Figmaドキュメント・ノードの書き出し |
| services figma file export page | Figmaファイルの全ページを書き出す |
| services figma file info | figmaファイルの情報を表示する |
| services figma file list | Figmaプロジェクト内のファイル一覧 |
| services figma project list | チームのプロジェクト一覧 |
使い方
FigmaはAPI視点で見ると次のような構造になっています。
チーム -> プロジェクト -> ファイル -> ページ -> フレーム -> ノード
それぞれID番号で管理されており、ファイルやページをエクスポートするにはまず起点となるチームIDを知る必要があります。 チームIDは、チームへのリンクURLから知ることができます。Figmaのチームを選択して、リンクをコピーしたときの、アドレスの team/ に続く数字がチームIDです。
最新版のwatermint toolboxをダウンロードします。ダウンロードしたzipファイルを展開するとtbxまたはtbx.exeという実行ファイルがありますので、これをデスクトップフォルダなどわかりやすい場所に置いてください。 Windowsの場合はPowerShell、macOSの場合はTerminal.appを開きます。開いたら cd Desktop としてデスクトップ（またはtbxの実行ファイルを置いたフォルダ)に移動して次のようにコマンドを実行します。
./tbx services figma project list -team-id xxxxxxxxxxxxxxxxxxxxx
(xxxxxxxxxxxxxxxxxxxxxは先ほどチームのアドレスから取得したチームIDに読み替えてください)
初回実行時には次のように認証が求められますので、エンターを押してブラウザを起動します。アプリケーションのアクセス範囲など確認が表示されますのでよければ認可します。画面に「Success」と表示されれば認証完了です。
% watermint toolbox 122.8.52
==========================
© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.
Testing network connection...
Done
Opening the authorization URL:
https://www.figma.com/oauth?client_id=XXXXXXXXXXXXXXX&redirect_uri=http%3A%2F%2Flocalhost%3A7800%2Fconnect%2Fauth&response_type=code&scope=file_read&state=XXXXXXXX
Please press ENTER to open the auth page on the browser.
実行完了すると次のようにプロジェクトの一覧とIDが表示されます。プロジェクト数が多い場合、一部省略されますので実行時の最後に表示されるパスのCSVやxlsxファイルを参照してください。
% ./tbx services figma project list -team-id xxxxxxxxxxxxxxxxxxxxx
watermint toolbox 122.8.52
==========================
© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.
Testing network connection...
Done
| id | name |
|----------|---------------|
| xxxxxxxx | Design System |
| xxxxxxxx | Workspace |
| xxxxxxxx | toolbox |
同様にプロジェクトのファイル一覧を取得したい場合には、次のコマンドを実行します。
% ./tbx services figma file list -project-id xxxxxxxx
watermint toolbox 122.8.52
==========================
© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.
Testing network connection...
Done
| key | name | thumbnailUrl | lastModified |
|------------------------|--------------|--------------|--------------|
| xxxxxxxxxxxxxxxxxxxxxx | essentials | | |
| xxxxxxxxxxxxxxxxxxxxxx | web | | |
必要なファイルがあれば、このファイルのkeyを取得して次のようなコマンドを実行します。 これで実行したフォルダにファイルがPDFとしてエクスポートされます。 -formatオプションで png, svg, jpgの出力も選択可能です。
% tbx services figma file export page -key xxxxxxxxxxxxxxxxxxxxxx -path ./
watermint toolbox 122.8.52
==========================
© 2016-2023 Takayuki Okazaki
Licensed under open source licenses. Use the `license` command for more detail.
Testing network connection...
Done
1 page(s) found in the Figma file
page 00:02 [==========================================================================] 1/ 1 DONE
The command finished: 7.302s
このコマンドはファイルごとですが、ノードを出力するコマンドやチーム配下のファイルをすべてエクスポートするコマンドも用意してありますので必要に応じてお使いください。