【Plugin活用】Google Sheets Syncでシート内容を反映

Figma Pluginの「Google Sheets Sync」を利用すると、スプレッドシートの内容をFigmaのデザインに反映することができます。

Google Sheets Syncをインストール

761-figma-plugin-google-sheets-sync_00.png

上記のように Installed になっていることを確認します。

スプレッドシートの共有リンクを取得

761-figma-plugin-google-sheets-sync_10.png

このシートの内容をFigmaに反映させます。

共有をクリックします。

761-figma-plugin-google-sheets-sync_11.png

この共有リンクをGoogle Sheets Syncプラグインで利用します。

スプレッドシートの内容をFigmaに反映

761-figma-plugin-google-sheets-sync_20.png

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

スプレッドシートの内容を反映したLayerを選択状態にします。

761-figma-plugin-google-sheets-sync_21.png

Google Sheets Syncプラグインを起動します。

761-figma-plugin-google-sheets-sync_22.png

あらかじめ取得したスプレッドシートの共有リンクを入力して Fetch & sync をクリックします。

761-figma-plugin-google-sheets-sync_23.png

スプレッドシートの内容が反映されました。

参考