![見出し画像](https://assets.st-note.com/production/uploads/images/126625341/rectangle_large_type_2_62c1a0cff4c2e6a486e072c2dba8f67b.png?width=800)
Figma variables✖️Bigquery で超リアルなプロトタイプを作る (Figma-Bigquery編)
時間がかけられないので、すごく雑にお届けします。ちょっとずつアップデートしていけたらと思います。
私は、現在物流系のスタートアップ企業でPdMをやっています。
事業会社なので、プロダクトを日々アップデートしていく業務を行なっています。
そのため、既存の業務やデータベースをもとにして新しいUIをデザインする必要がありました。また大量データをVIewする目的があるので、どんなデータがどのような量でどう見えるのか?を見ながらデザインをすることがマストでした。。
スプレッドシートを参照するプラグインを使う
ですよね。なので大量データをFimgaでデザインしたUIに投影したい方法がないか模索していました。Google Sheets Syncという神なるプラグインを発見。このプラグインは、スプレッドシートの値を参照して、Figmaのラベルに挿入してくれるというものでした。
プロダクトと顧客データがゴリゴリに映るので、作ったデザインを詳細にお見せできないのですがこんな感じ。
要はリスト部があって、サーチやソートができる画面となっておりますが、この大量のリスト部をプロダクトのデータベースに合わせたデータに投影したいのです。
![](https://assets.st-note.com/img/1704360394912-bLJADyDCVU.png?width=800)
まず、スプレッドシートを作りましょう。
投影したいデータをカラムで表現すればOK。データベースからはSQLなどで引っ張ってくればリストにするのは(SQL書ければ)容易いですね。
![](https://assets.st-note.com/img/1704377245638-43N9uWQWzM.png?width=800)
SQLでスプシに貼って、スプシをFigmaに取り込むのが大変
SQLは出力しながら作成していったというのもあり、SQLを書き換えるたびにスプシに貼ってFigmaに取り込むのが面倒でした。
そこで、Bigqueryとスプシを連動させることで、SQLの結果が自動的にスプシに反映されるようにしました!
BigqueryでSQLを作るようにし、展開>クエリ設定でワークテーブルを作っておくようにします(じゃないとスプシと同期しない)
![](https://assets.st-note.com/img/1704364893079-Mz1IX2mm4l.png?width=800)
テーブルを上書きで指定しておけば、SQLを実行するたびにワークテーブルが更新されていきます。あとはワークテーブルと同期するスプシを作りましょう。
データを探索>シートを使って調べるを選び、スプレットシートを作成します。
![](https://assets.st-note.com/img/1704365053004-K9WoRtXm1o.png?width=800)
Bigqueryと同期したスプレットシートが作れました。
![](https://assets.st-note.com/img/1704377342601-KG8Art3dwU.png?width=800)
!!注意!!
しかし、このままFigmaのプラグインにこのシートを連携すれば良いかというとそうではありません。このままだとプラグイン内ではうまくヘッダーが読み込まれないため、抽出データを別シートに作る必要があります。
![](https://assets.st-note.com/img/1704365284343-QfR220BMPs.png)
抽出データを別シートで作れば、見慣れたUIでのスプシでデータが書き出され、Figmaのプラグインも正しく読み取れるようになります。
![](https://assets.st-note.com/img/1704377245638-43N9uWQWzM.png?width=800)
SQLに変更があったら、実行後にスプシ側で更新を忘れずに行いましょう。抽出データとプレビュー両方同期しておくと良いです。
![](https://assets.st-note.com/img/1704365433736-jU2Yi6v9hM.png?width=800)
スプシのカラムとFigmaのラベルを対応するには
では、スプシとFigmaのラベルはどのようにマッピングするのでしょう。
それは、Figmaのラベル名を「#(スプシのカラム名)」になるように設定します。
![](https://assets.st-note.com/img/1704365708463-iDZ9iWNLhm.png?width=800)
すごいのは、ラベルの中身だけではなく、表示/非表示やコンポーネントのvariantも取り込めることです。
Google Sheet Syncの詳しい説明は以下をご確認ください。
さて、次はFigmaの新しい(結構立ったけど)機能であるvariablesの応用ですが、また別記事Vol.2にて紹介したいと思います。
この記事が気に入ったらサポートをしてみませんか?