【動画あり】Figmaのプラグイン『Google sheets sync』の使い方｜スプシにまとめた情報を一括でデザインに反映しよう。

Post：2024.03.18 / Rewrite : 2024.03.18

View

631 views

例えばブログのデザインをしている時に、ブログの「タイトル」や「アイキャッチ画像」「抜粋文」を、毎回、手入力するのは大変ですよね。そんな時は、Googleスプレッドシートにまとめた情報を一括でデザインに反映できるGoogle sheets syncプラグインが便利です。

プラグイン『Google sheets sync』の使い方を動画で見る

figma-plugin-google-sheet-sync

1.反映させたいGoogleスプレッドシートを用意します。
一行目に注目です。このtitle, img, textの部分を、Figmaのレイヤー名と同じにします。

画像を使用する場合、Googleスプレッドシートの値に画像のURLを指定します。URLは、.jpg、.png、または.gifで終わる必要があります。

ここでは、ダミー画像のジェネレーターサイト（https://placehold.jp/）のURLを指定します。

2.入力できたら、「共有」から一般的なアクセスを「リンクを知っている全員」とします。

3.次に、Figmaでメインコンポーネントを作成し、インスタンスをデザイン上に配置します。

レイヤー名が重要で、先ほど伝えた通り、Googleスプレッドシートの1行目と同じ名前にし「＃」を頭に入れてください。

これで準備完了です。

4.データを挿入したいレイヤーを選択した状態で、リソースから、Google sheets syncプラグインを検索、起動します。

5.スプレッドシートのURLを入力したら、「Fetch & Sync」をクリックします。
情報が入りました。

6.ここで、画像がうまく入らなかった場合、スプレッドシートに入力したURLの最後が、
「.jpg」、「.png」、または「.gif」で終わっているか確認してください。

Popular