Google sheets sync.

Googleスプレッドシートを反映してくれるプラグイン

最近のデザインツールの進化はすごいですね。今日は最近気になるプラグインのご紹介をさせていただきます。Googleが作成した公式のプラグインではありませんが、Googleスプレッドシートの内容をFigma内のモックに反映してくれるプラグインをご紹介します。

Google sheets syncとは？
Googleスプレッドシートの内容をFigma内のモックに反映してくれるプラグインです。

プラグインの取得方法
FIgmaのプラグインで「Google sheets sync」と検索します。インストールボタンをクリックし完了です。

使用方法
反映させたいGoogleスプレッドシートを用意します。
Figmaではモックを制作し、コンポーネントを作成します。
レイヤー名はGoogleスプレッドと同じ名前にし、「＃」を頭に入れてください。
次にPluginをセレクトし、Google sheets syncを選択します。ポップアップが表示れるので、GoogleスプレッドシートのURLを入力してください。URL入力後、「Fetch & Sync」をクリックし完了です。

画像を使用したい場合
レイヤーに画像の塗りつぶしを動的に設定するには、特定のプロパティのGoogleスプレッドシートの値が画像のURLであることを確認してください（「.jpg」、「。png」、または「.gif」で終わる必要があります）。
次に、ベクター/シェイプレイヤーに適切な名前を付けてください。 '＃画像'

その他のドキュメント・ファイル
こちらでサンプルのデモ・ファイルをご覧いただけます。

このプラグインを使った感想もまた次回シェアさせていただきたいと思います。ありがとうございます。