はじめに
こんにちは！ 株式会社WebCrewのデザイナー @wc-nakagomiです。
今回は、Figmaプラグイン 「CSV Multi-Generator (Text, Image, QR)」 を作成・公開したのでご紹介します。
- 同じようなカードを何十枚も作るのがめんどくさい…
- テキストや画像の差し替えをひたすらコピペしていて、地味にミスが増える…
- QRコードや画像入りの電子名刺やオンラインMTG用の背景をまとめて作りたい…
そんな「面倒な単純作業で困ってる方」に、ぜひ使ってほしいプラグインです。
プラグインページはこちら↓
https://www.figma.com/community/plugin/1644293475677490477
※プレイグラウンド（デモ）ファイルを作成していますのでどんな機能かすぐ試せるようになっています！
「CSV Multi-Generator (Text, Image, QR)」とは？
CSVデータからテキスト・QRコードを生成し、画像を置換して、Figma上で「card」を一括生成するプラグインです！
たとえば以下のような用途に向いています。
- オンラインMTG用の背景
- 電子名刺（印刷用の出力も可能ですが、CMYK変換をする必要があります）
- バナー
- インタビューやアンケート結果などのカード化（KA法などで使用）
こういった大量のバリエーション制作を高速化できるのが大きなポイントです。
このプラグインの特徴は？
似たようなことができるプラグインとしては、
テキスト差し替えなら 「CSV Populate」 があり、
画像差し替えまで含めるなら 「Google Sheets Sync」 のような選択肢もあります。
そのうえで、このプラグインの特徴は、次のような点にあります。
① QRコードをローカル生成できる
CSVの値（URL）をもとに、QRコードをFigma上でローカル生成できます。
② 画像もローカル or Figma上のデータを使える
画像の差し替えは、PC内のローカル画像を使うこともできますし、
Figma上に作成した「ph-storage」フレームに置いた画像を使うこともできます。
③ 外部サーバーとやり取りせずに使える
このプラグインは、データの置換や生成を外部サーバーを介さず、Figmaドキュメント内で処理します。
そのため、
- 社内セキュリティ的に外部サーバーを介すのはNG
- 画像やデータのやり取りをシンプルにしたい
という場面では、使いやすいかと思います。
使用方法
1. 複製元となるコンポーネントを作成する
コンポーネント名を「card」に設定します。 ※各項目をオートレイアウトで構成しておくと、データが空の場合でも間隔が自動調整され、レイアウト崩れを防ぐことができます。
2. CSVのヘッダー名とレイヤー名を合わせる
たとえば、CSVヘッダーが「#name」なら、Figmaのレイヤー名も「#name」にします。
3. QRコードを生成したい場合は「#qr-code」を使う
QRコードを生成したい部分は、ヘッダー名とレイヤー名を「#qr-code」に設定します。
4. 画像を置換したい場合は「#ph」を使う
CSVヘッダー名とレイヤー名を「#ph」に設定し、
「画像を選択」からローカル画像を選ぶと、同じ値の画像が置き換わります。
※Figma内の画像を使う場合は、あらかじめ「ph-storage」というフレームを作成し、その中に差し替え用画像を入れておきます。この機能はローカル画像未選択時のみ機能します。
5. CSVを貼り付けて生成する
「CSVデータ」と「card」コンポーネントを準備したら、プラグインを起動してCSVをペースト、またはドラッグ&ドロップし、「生成」をクリックすれば一括生成を開始します。
まとめ
❶ 「CSV Multi-Generator (Text, Image, QR)」は、CSVからFigmaの「card」を一括生成できるプラグイン
❷ テキスト・画像・QRコードに対応していて、汎用性が高い
❸ QRコードをローカル生成でき、画像もローカル or Figma上のデータを使える
❹ 外部サーバーを介さずに処理できるので、ローカル完結で扱いやすい
いかがでしたでしょうか？
Figmaで「同じ作業を何度も繰り返している…」という方には、ぜひ 本プラグイン を使ってもらえると嬉しいです。
以上となります！ お読みいただきありがとうございました。