Figma|GoogleSheetsSync使い方まとめ

【解説画像付き】FigmaとSpreadsheet(スプレッドシート)を連携してみた

とある日…協業企業様からこのようなオーダーがはいる。

ayakaさん、FigmaとSpreadsheetのデータを連携していおいてください!

クライアント Uさん

「承知しました!!

……ほ?データの連携?」

ということでまとめておきます、FigmaとSpreadsheetを連携する方法!

さっそくいきましょう!

プラグインの紹介

ひたすらググりましたところ。。

Google Sheets Sync というfigmaで使えるプラグインを発見しました!

STEP 1: Make sure your Google Sheets file has a shareable link – click ‘Share > Get shareable link’

STEP 2: Name your figma layers appropriately

• Add a ‘#’ followed by the name of the value you want to sync

• For example: to get the value ‘Title’ – name your text layer ‘#Title’ (Note: it is not case sensitive, and will ignore ‘spaces’)

STEP 3: Run this plugin, paste your shareable link, and click ‘Sync’

https://www.figma.com/c/plugin/735770583268406934/Google-Sheets-Sync

英語!笑

わたしの中学校レベルの英語力と、参考にしたサイトによると、
スプレッドシートはWEB上公開の設定でないと、使用できないようです。

設定が間違っていると、このプラグインが「アクセスできないよ!」と赤文字メッセージだしてくれます。

Google Sheets Sync の使い方

1. まずはプラグインをインストールしよう

Google Sheets Syncでインストールするか、Figmaの項目にあるPluginsからインストールしてください。

Figmaのダッシュボードに移動するとでるよ!

あれ?検索窓がでないぞ?とお困りのあなた!

右下の「Browse all plugins」をおすとでてきます!

2. スプレッドシートに情報を入力しよう

例えば、こんなコンテンツを作りたいとします。

こんな感じでタイトル、日付、テキストを用意していきます!

Google Spread sheet上でGoogle Sheet Sync用のデータを用意している画面

項目名は、必ずしも英語である必要はないです。日本語なら日本語で入力していても大丈夫でしたっ(実証済み)。

3. 連携用のComponent(コンポーネント)データを作成しよう

次に、Figma上でデータ連携用のコンポーネントを用意します!

レイヤー名は、置き換えたいスプレッドシートの項目名に「#」を追加した形で命名します。

Figma上でGoogle Sheet Sync用のコンポーネントデータを準備している画面

4. Google Sheets Syncのプラグインを使用しよう

ここまで来たら、あとはプラグインを実行するだけです!

Figma上でGoogle Sheet Syncを実行してみた画面

実行後画面はこんな感じ!

4. 実行後画面はこんな感じ!

わーい、無事に実行できました!

ただし!なぜか、最後の項目だけ反映されないという謎現象が起きたました。そんな人は、こんな感じで対処してみてください。

  • スプレッドシート上の項目をもう一つ追加して、空欄にしておく
  • Figma上でも適当にレイヤーと#付きの項目名を作成しておいて、非表示設定

これで解決しました。

「仕事で活用したときは問題なくいったのに。。

不思議だなぁ…」

1600 1200 Ayaka@Designer