時間がかけられないので、すごく雑にお届けします。ちょっとずつアップデートしていけたらと思います。

私は、現在物流系のスタートアップ企業でPdMをやっています。
事業会社なので、プロダクトを日々アップデートしていく業務を行なっています。

そのため、既存の業務やデータベースをもとにして新しいUIをデザインする必要がありました。また大量データをVIewする目的があるので、どんなデータがどのような量でどう見えるのか？を見ながらデザインをすることがマストでした。。

スプレッドシートを参照するプラグインを使う

ですよね。なので大量データをFimgaでデザインしたUIに投影したい方法がないか模索していました。Google Sheets Syncという神なるプラグインを発見。このプラグインは、スプレッドシートの値を参照して、Figmaのラベルに挿入してくれるというものでした。

プロダクトと顧客データがゴリゴリに映るので、作ったデザインを詳細にお見せできないのですがこんな感じ。
要はリスト部があって、サーチやソートができる画面となっておりますが、この大量のリスト部をプロダクトのデータベースに合わせたデータに投影したいのです。

まず、スプレッドシートを作りましょう。
投影したいデータをカラムで表現すればOK。データベースからはSQLなどで引っ張ってくればリストにするのは（SQL書ければ）容易いですね。

SQLでスプシに貼って、スプシをFigmaに取り込むのが大変

SQLは出力しながら作成していったというのもあり、SQLを書き換えるたびにスプシに貼ってFigmaに取り込むのが面倒でした。

そこで、Bigqueryとスプシを連動させることで、SQLの結果が自動的にスプシに反映されるようにしました！

BigqueryでSQLを作るようにし、展開＞クエリ設定でワークテーブルを作っておくようにします（じゃないとスプシと同期しない）

テーブルを上書きで指定しておけば、SQLを実行するたびにワークテーブルが更新されていきます。あとはワークテーブルと同期するスプシを作りましょう。
データを探索＞シートを使って調べるを選び、スプレットシートを作成します。

Bigqueryと同期したスプレットシートが作れました。

抽出データを別シートで作れば、見慣れたUIでのスプシでデータが書き出され、Figmaのプラグインも正しく読み取れるようになります。

SQLに変更があったら、実行後にスプシ側で更新を忘れずに行いましょう。抽出データとプレビュー両方同期しておくと良いです。

スプシのカラムとFigmaのラベルを対応するには

では、スプシとFigmaのラベルはどのようにマッピングするのでしょう。
それは、Figmaのラベル名を「#（スプシのカラム名）」になるように設定します。

すごいのは、ラベルの中身だけではなく、表示/非表示やコンポーネントのvariantも取り込めることです。
Google Sheet Syncの詳しい説明は以下をご確認ください。

さて、次はFigmaの新しい（結構立ったけど）機能であるvariablesの応用ですが、また別記事Vol.2にて紹介したいと思います。