はじめに
株式会社 Red Frasco でフロントエンドエンジニアをしている根本と申します。
社内でオンライン MTG 用の背景画像を作ることになったのですが、
「数十人分のデザインとデータを管理するのが大変...」
「コピペして書き換える作業が辛すぎる。。。」
ということで、データを CSV に保存して、対象となるコンポーネントから自動でインスタンスを一括生成してくれる Figma プラグインを作ってみました！
プラグインの概要
このプラグインは、コンポーネントのプロパティ情報をカラムに持つ CSV データからインスタンスを一括生成することができます。
- Case1: 社員用の名刺データやオンライン MTG 用背景の一括生成
- Case2: コピーライトがデザインにハマるかどうかを大量に比較する
などのユースケースに活用できるかなと思っています。本質的でない作業をプラグインが代用することで、デザイナーの負担を軽減することが本プラグインの目的です。
使い方
以下が、簡単な使い方になります。
- コピー元となるコンポーネントと出力先となるフレームを作成します。
- コンポーネントの中で可変になる部分をプロパティ化します。
- プロパティ名がカラムとなった CSV データを用意します。
- Figma でデザインファイルを開き、「元となるコンポーネント」と「出力先のフレーム」を選択した状態で本プラグインを実行します。
- プラグインの中で、先ほど作成した CSV データを選択し、「作成する」ボタンを押します
- 出力先のフレームに CSV データから生成されたインスタンスが一括作成されます。
実際に想定されるユースケースに沿った使い方をご紹介します！
例 1) 社員用のオンライン MTG 用背景の一括生成
今回プラグインを作成するに至った「社員用のオンライン MTG 用背景の一括生成」というのユースケースです。以下の手順でプラグインを使用します。
簡単に動画も作ってみました（クオリティ...笑）
手順 1: コンポーネントの作成
コンポーネントを作成します。可変にした部分をプロパティ化します。
この時、プロパティ化する部分は Auto Layout で組むとスタイリングがいい感じになります。
手順 2: CSV データの用意
プロパティをカラムにもつ CSV データを作成します。実際のデータ作成は非デザイナーの方にお願いして管理してもらうなどのケースを想定しています。
サンプルの csv はこちらです。（架空のデータです）
sample.csv
name-jp,name-en,job-jp,job-en
根本 貴志,Takashi Nemoto,開発,Engineer
伊藤 美香,Mika Ito,営業,Sales Representative
山田 健太,Kenta Yamada,マーケティング,Marketing Specialist
佐藤 さくら,Sakura Sato,デザイン,Designer
中村 一郎,Ichiro Nakamura,人事,Human Resources
鈴木 由美,Yumi Suzuki,会計,Accountant
小林 太郎,Taro Kobayashi,研究,Researcher
高橋 真理,Mari Takahashi,コンサルティング,Consultant
田中 悠子,Yuko Tanaka,プロジェクトマネージャー,Project Manager
渡辺 雄一,Yuichi Watanabe,営業,Sales Representative
斎藤 みなみ,Minami Saito,マーケティング,Marketing Specialist
木村 恵美,Emi Kimura,デザイン,Designer
山本 健介,Kensuke Yamamoto,開発,Engineer
井上 美穂,Miho Inoue,人事,Human Resources
三浦 聡子,Satoko Miura,会計,Accountant
吉田 謙介,Kensuke Yoshida,研究,Researcher
斉藤 美佐子,Misako Saito,コンサルティング,Consultant
山田 裕子,Yuko Yamada,プロジェクトマネージャー,Project Manager
鈴木 裕太,Yuta Suzuki,営業,Sales Representative
田中 美咲,Misaki Tanaka,マーケティング,Marketing Specialist
小林 光男,Mitsuo Kobayashi,デザイン,Designer
高橋 みゆき,Miyuki Takahashi,開発,Engineer
渡辺 誠,Makoto Watanabe,人事,Human Resources
斎藤 彩子,Ayako Saito,会計,Accountant
木村 太一,Taichi Kimura,研究,Researcher
山本 美香,Mika Yamamoto,コンサルティング,Consultant
井上 健太,Kenta Inoue,プロジェクトマネージャー,Project Manager
三浦 知佳,Chika Miura,営業,Sales Representative
吉田 太郎,Taro Yoshida,マーケティング,Marketing Specialist
斉藤 さゆり,Sayuri Saito,デザイン,Designer
手順 3: プラグインの起動
参照元となるコンポーネントと出力先となるフレームを 2 つ選択した状態でプラグインを起動します。
プラグイン起動後は先ほど作成した CSV データを選択します。
手順 4: インスタンスの一括生成
「作成する」ボタンを押下すると、出力先のフレームに CSV データから生成されたインスタンスが一括作成されます。
今後の改善点
今後以下のようなアップデートを考えています。（現在のところ、社内でサクッと使えるレベルのものなので...😭）
- エラーハンドリングがグチャグチャなので設計し直す
- データ元となる CSV ファイル（コンポーネントのプロパティ情報をカラムにもつ）を出力できるようにする
- 一括生成する際、各インスタンスのマージンや順序などを自由に変更できるようにする
これらの改善をし、より使いやすいプラグインを目指して開発を進めていきます！
Red Frascoは、不動産テックの企業です。日本と海外で培った技術力・知見・業界内での繋がりをもって、1つでも業界の課題を解消できるよう挑戦し続けています。一緒に戦ってくださる方を募集しています（red-frasco.com/recruit/）。
Discussion