シートを一つ作っておけば、
その情報を使い回すことができます。

Hanai Akihiro

Design

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

Post:2024.03.18 / Rewrite : 2024.03.18

View

191 views

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

figma-plugin-google-sheet-sync

プラグイン『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」で終わっているか確認してください。

Contact

お問い合わせ

こんなことを伝えたい!こんな表現がしたい!
これくらいの期間・予算で考えてるんだけど...
まずは、あなたのご要望をお聞かせください。
誠心誠意、お応えいたします。

contact
tel tel