このブログ記事は、アソビュー！Advent Calendar 2023 の13日目です。

こんにちは！デザインリードを担当している山中です。

webやアプリのUIデザイン以外のデザイン（バナー制作、メールに差し込む画像制作など）業務もFigmaを活用する企業が増えてきていて、Figmaの使い方や機能をあまり知らないまま使っている方々も多いと思います。

そこで、今回紹介する「Google Sheets Sync」というプラグインを知っておくと、作業が効率化し生産性があがり、いままで作業に使っていた時間の大半を課題解決の時間にあてることができるようになります。
それでは、張り切って行きましょう！

完成までのかんたんステップ
必要なもの、知識
完成までの手順
番外編：Figma Variableを利用して2クリックでDark modeに変換する

完成までのかんたんステップ

おおまかに、4つのステップで完成します。
各ステップでの細かいすすめ方は後述していきます。

Figma｜プラグインをいれ、コンポーネントをつくり、レイアウトをつくる
Googleスプレッドシート｜差し込むデータをつくる
Figma｜プラグイン起動
完成

とても簡単ですね。
※差し込みの文字列はサンプルです。

Googleスプレッドシートの差し込みデータ

カードのコンポーネントを並べるレイアウト、よくありますね。
そして、1つ1つ画像をはめ込んだり、1つ1つ文字列をどこからかコピーして指定のところにペタペタとペーストしていませんか？？
それ、もうやらなくていいです！
（実際わたしは、このプラグインを知るまでは1つ1つコピペして、疲弊して作業だけで終わる日もありました。3年前ぐらいの話です）

それでは、そのやり方を説明していきます！

必要なもの、知識

Figmaのeditor権限（プラグインを起動する為）
Figmaのプラグイン：Google Sheets Sync（※無料）
Figmaのコンポーネントをつくる知識
Googleスプレッドシートの編集権限

完成までの手順

完成までのすすめ方を記載していきます。

1-1｜Figmaにプラグインをいれましょう！

Figmaのメニュー「Plugins」→「Manage Plugins…」を選択
検索ボックスに「Google Sheets Sync」と入力し、表示されたPluginを選択
Figma上にモーダル画面が表示されます

以上で「Google Sheets Sync」のPluginは使える状態です。
※いまは次の準備に進むために、このモーダル画面の右上の閉じるボタンを押して、閉じましょう。

1-2｜Figmaのコンポーネントを作りましょう！

コンポーネントをつくります。
「AutoLayout」機能を利用しコンポーネントをつくることをオススメします。この機能を利用することにより、コンテンツに応じて変化するFrameが作ることが可能です。
（AutoLayoutのチュートリアルがFigma公式にありますので、お試しいただき活用できるレベルになることをオススメします）

Layerの名前を #ImageURL のように、
#Googleスプレッドシートの項目名 と対応するように指定します。