Figmaプラグインまとめ

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

Googleスプレッドシートで作成したデータをFigmaのモックに反映してくれるFigmaのプラグインです。

  • UIデザイン
  • UXデザイン
  • Webデザイン

公開日:2020/04/22最終更新日:2020/04/22

1.「Google sheets sync」とは?

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

2.「Google sheets sync」のインストール方法

FIgmaのコミュニティで「Google sheets sync」と検索します。

インストールボタンをクリックし完了です。

3.「Google sheets sync」の使い方

反映させたいGoogleスプレッドシートを用意します。

Figmaではモックを用意します。モックはコンポーネントにしておきます。

レイヤー名はGoogleスプレッドと同じにしておきましょう。また、レイヤー名の前には「#」を忘れずに入れてください。

次にプラグインを使用して、モックにGoogleスプレッドシートの内容を反映していきます。

モックを選択し、「Plugin」から「Google sheets sync」を選択します。

すると、ポップアップが表示されます。

GoogleスプレッドシートのURLを入力してください。

URL入力後、「Fetch&Sync」をクリックし完了です。

Googleスプレッドの内容がモックに反映されて入れば完了です。

理解度チェック

このレッスンの著者