Figmaでアートボードを一発で大量生成できるプラグイン"Artboard Creator"をつくりました
はじめに
デザイナーの横田です。Figmaのプラグインをつくったのでその使い方など書いてみようと思います。
なお、プラグインをリリースするまでの流れの話はQiitaにおいときました。JavaScriptわかれば作れますのでやってみようという方はご覧いただけたら。
これはなにか
Figmaではしばしば、Artboardに意味のある名前をつけて整理したり、書き出したりすることが多いですが、それをきちんと管理していくのは面倒です。そこで、Spreadsheetで一覧化したアートボード名・サイズ情報をもとに一括でアートボードを作成するプラグインをつくりました。
自分のユースケース
① プロジェクトのはじめに
私の場合は80画面overのプロジェクトの初めは、なるべく「画面番号_画面名称--状態_デバイス種類」といったアートボード名をSpreadsheetで整理しています。従来はこれを手作業でコピペしていました。
例）A10_ログイン--エラー__SP
→ Artboard Creatorを使えば一発でできる！
※連番は10飛ばしでつけるのがおすすめです。後から差し込みできるように。
②コンポーネントを整理する
Figmaの有料プランではコンポーネントライブラリを一元管理し、複数のFigmaファイルから呼び出し同期することができます。呼び出すときはしばしばコンポーネント名で検索するのですが、例えばButtonというアートボードにいれたコンポーネントは検索時にButtonと入力することで呼び出すことができます。
しかし思い立ったのはReactプロジェクトがだいぶ進展した後なので、少し途方に暮れました。
→ Artboard Creatorを使えば一発でできる！
アートボードの整理の仕方はかなり属人的だと思います。このプラグインは用途にフォーカスするのではなく、シートからアートボードをつくれるという単純な機能を提供することに努めています。
基本的な使い方
READMEに書いてありますが、
①Spreadsheetを「Webに公開」状態にする（普通の共有でなく「ファイル」から）
②アートボード名・横幅・縦幅 の順で縦に記載していく（関数使用OK）
③プラグインを起動し、IDを指定。
IDは以下のようにURLから取得できます。
https://docs.google.com/spreadsheets/d/[HERE_IS_SPREADSHEET_ID]/edit#gid=0サンプルのシートはこちら。
オプション
ほとんど自分で使うためですが、以下のオプションを用意してます。
WrapEvery: 折返し列数の指定
アートボードの折返し列数を指定することができます。1だったら縦一直線に1列、10だったら10列で折り返しという感じです。
Render artboard name: アートボードにタイトルを設置
アートボード名をテキストレイヤーとして設置することができます。
後者に関しては残念ながら既存コンポーネントからインスタンスを生成するということができず、ベタのテキストレイヤーが置かれます。
今後つくりたいもの
作る側としては既存のオブジェクトを上書きする系は大変なので、シートからオブジェクトを新規作成するものを作ってみたいと思います。
① Web上の画像をURLで一覧化し、一括設置する
手でコピペするのとSpreadsheetに貼り付けるのでは大差ありませんが、Chrome拡張やバッチで画像URLの一覧をどうにかこうにか自動で取得するということをよくやってます。こうしたときにSpreadsheetからFigma上で展開すると一発でムードボードが作れます。
② バナーのクリエイティブを大量生成する
広告バナーは同じようなクリエイティブを複数の規格で作成することが求められます。自分には向いてないので、自動化したい。
キャッチコピーの文字サイズ・キャッチコピーの位置・バナーのサイズ・背景画像URL（どこかにアップして）を指定することで、下ごしらえ的にバナーが大量生成できる。
（必要なレイアウトパターンはケースによるので汎用化するのは大変そうですが、逆にこれできたらサービスとして成立しますね）
ということで、DesignOpsをどんどんやっていきたいと思ってます。こういうシーンで使えたよ！といったFeedbackもらえると助かります。Twitterまでもらえるとうれしいです。
この記事が気に入ったらサポートをしてみませんか？