Figma Pluginの「Google Sheets Sync」を利用すると、スプレッドシートの内容をFigmaのデザインに反映することができます。
目次
Google Sheets Syncをインストール
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_00-1024x249.png)
上記のように Installed
になっていることを確認します。
スプレッドシートの共有リンクを取得
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_10.png)
このシートの内容をFigmaに反映させます。
共有
をクリックします。
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_11-1024x495.png)
この共有リンクをGoogle Sheets Syncプラグイン
で利用します。
スプレッドシートの内容をFigmaに反映
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_20-774x1024.png)
Layerの名前を #title
のように #スプレッドシートの項目名
と対応するように指定します。
スプレッドシートの内容を反映したLayerを選択状態にします。
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_21.png)
Google Sheets Syncプラグイン
を起動します。
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_22-1024x564.png)
あらかじめ取得したスプレッドシートの共有リンクを入力して Fetch & sync
をクリックします。
![](http://www.wakuwakubank.com/wp-content/uploads/761-figma-plugin-google-sheets-sync_23-790x1024.png)
スプレッドシートの内容が反映されました。