こんにちは松久です。
「生産者さんだから知っている そのままおいしい野菜の食べ方」が先日発売されました。本には生産者さんからの知恵が色々掲載されています。そこで、生産者さんが本の紹介をX（旧Twitter）やInstagram で投稿しやすいように、生産者さんごとの投稿用画像を用意することになりました。
この本には生産者200名ほどの方が掲載されています。そのため、生産者さんごとに掲載されているページや、品種・品目の情報がある画像を用意する必要があります。そこで、Figma の「Google Sheets Sync」を使って投稿用画像を生成することにしました。
導入までの流れ
作成までの全体の流れは以下のとおりです。
- Figma でテンプレートを作る
- 表示するデータを用意する
- Figma に「Google Sheets Sync」を入れる
- 実行
Figma でテンプレートを作る
Figma で画像を生成するためのテンプレートとしてコンポーネントを用意します。
コンポーネントを作るときに、レイヤー（Groupなど）の名前に #producer_name というふうに # を頭につけ、Google スプレッドシートの項目と一致させる必要があります。
データを入れたあとのことを想定し、文字数などでレイアウトが変わることもあるので、AutoLayout を使う必要があります。
コンポーネントを作ったら、生成が必要な分のインスタンスを作ります。
表示するデータを用意する
生産者さんのデータを用意するために、Redash を利用しました。デザインチームも SQL を書いたら利用できるようになっています。 本の掲載ページ数や、品目・品種については Google スプレッドシートに入れてもらうことにしました。
画像もいれることが出来ます。画像は、公開されているURLで Google スプレッドシートに記載します。今回は、Redash で 画像の URL も生成して用意しました。
Google スプレッドシートのデータを作るときに1行目は、Figma のレイヤー名と合わせる必要があります。ただし、# は抜きます。
準備ができたら、Google スプレッドシートの共有のURLを取得してください。URLは「リンクを知っている人」全員に「閲覧権限」を付与します。
Figma に「Google Sheets Sync」を入れる
「Google Sheets Sync」を開き、Plugin をインストールします。
プラグインを実行して生成する
これで準備は整いました。あとは実行のみです。
- Google Sheets Sync（プラグイン）を起動
- Google スプレッドシートの共有リンクを入力して、
Fetch & Syncを押します
少し時間がかかりますが、200枚ほどの画像は生成されました。
おわりに
ダミーデータをいれる時に便利なプラグインなのですが、テンプレートを用意して大量の画像生成もできます。 Figma のプラグインは大変便利なので、普段から使ってみることで急な依頼でも対応できる方法を思いつくことがわかりました。ツールを使いながら「食べチョク」の改善を進めていきます。
宣伝
Amazon などで販売中です。
