動画チュートリアル：スプレッドシートからFigmaテキストレイヤーのマージタグを同期する

この動画では、CopyDocプラグインを使って、スプレッドシートからFigmaテキストレイヤーのマージタグを同期する方法を説明しています。

動画チュートリアル：スプレッドシートのセルで高度なマージタグを使ってコンテンツを同期する

この動画では、CopyDocプラグインを使って、スプレッドシートのセルで高度なマージタグを使い、Figmaのテキストコンテンツを同期したりFigmaレイヤーの名前を変更したりする方法を説明しています。

マージタグの構文

CopyDocでは、#{columnName}というシンプルなマージタグ構文を使います。マージタグはテキストレイヤー内のどこにでも挿入でき、スプレッドシートの値に置き換えられます。

使用例

Figmaのテキストレイヤー：

Hello #{firstName} #{lastName},
Your order #{orderId} is ready for pickup!

スプレッドシートの列：

firstName	lastName	orderId
John	Smith	12345
Sarah	Johnson	67890

同期後の結果：

• Hello John Smith, Your order 12345 is ready for pickup!
• Hello Sarah Johnson, Your order 67890 is ready for pickup!

主なメリット

• 書式を保持：テキストスタイル、フォント、色はそのまま維持されます
• 複数のマージタグ：1つのレイヤーで必要な数だけマージタグを使えます
• 柔軟な列名：さまざまな形式の列見出しに対応しています
• スマートなフォールバック：一致する列が見つからない場合、マージタグのテキストはそのまま残ります
• ほかの行の参照：.N構文で特定の行のデータを取得できます
• 動的なレイヤー名：マージタグを使ってフレームやレイヤーの名前を変更できます

列見出しの柔軟性

CopyDocは列見出しを賢く照合します。次の形式はすべて使えます。

• 標準：firstNameは#{firstName}に一致します
• #プレフィックス付き：#firstNameは#{firstName}に一致します
• マージタグ形式：#{firstName}は#{firstName}に一致します

高度な機能

行番号の指定（.N構文）

.N構文を使うと、特定の行のデータを取得できます。Nは行番号です（1行目は見出しなので、2から始まります）。

例：

スプレッドシート：

firstName	lastName
John	Smith
Sarah	Johnson
Mike	Williams

1行目のFigmaテキストレイヤー：

Current: #{firstName} #{lastName} Next up: #{firstName.3} #{lastName.3}

結果：

Current: John Smith Next up: Sarah Johnson

次のような用途に便利です。

• 「次はこちら」や「前へ」といった参照を作成する
• ほかの行の関連データを表示する
• 比較表示を作成する
• 参照リストを作成する

マージタグでレイヤーの名前を変更する

マージタグは、フレームやレイヤーの名前の変更にも使えます。スプレッドシートの列の値にマージタグを使うと、レイヤー名を動的に生成できます。

例：

スプレッドシート：

frameName	firstName	lastName
#{firstName} #{lastName}	John	Smith
#{firstName} #{lastName}	Sarah	Johnson

結果： フレームの名前は次のように変更されます。

• 「John Smith」
• 「Sarah Johnson」

レイヤー名にも行番号の指定を使えます。

• #{firstName.2} vs #{firstName.3}で、比較用のフレーム名を作成できます
• 「ビフォー／アフター」や「オプションA vs オプションB」のような場面に最適です

レイヤー名の一括変更

よりシンプルに名前を変更したい場合は、たとえば6つのFigmaフレームの名前がすべて #My Frameなら、これをスプレッドシートの列名として使い、固定の値やマージタグの組み合わせで一括変更できます。

スプレッドシートのセル内での差し込み

スプレッドシートのセルでは、マージタグ構文を使ってほかの列を参照できます。この処理は値がFigmaレイヤーに適用される前に行われるため、計算した値を作成できます。

例：

スプレッドシート：

firstName	lastName	fullName	greeting
John	Smith	#{firstName} #{lastName}	Hello, #{fullName}!
Sarah	Johnson	#{firstName} #{lastName}	Hello, #{fullName}!

仕組み：

1. fullName列は「John Smith」または「Sarah Johnson」に解決されます
2. 次にgreeting列がその解決済みの値を使い、「Hello, John Smith!」または「Hello, Sarah Johnson!」になります
3. この最終的な値がFigmaのテキストレイヤーに適用されます

メリット：

• スプレッドシート内で再利用できる数式を作成できます
• 複数の列を組み合わせて、整形された文字列を作れます
• シンプルなデータの組み合わせから複雑なコンテンツを作成できます
• 似たパターンのコンテンツで一貫性を保てます

行の参照を使った高度な例：

product	price	competitor	comparison
Widget A	$99	Widget B	#{product} (#{price}) vs #{product.3} (#{price.3})
Widget B	$149	Widget C	#{product} (#{price}) vs #{product.4} (#{price.4})
Widget C	$199	Widget A	#{product} (#{price}) vs #{product.2} (#{price.2})

これにより、「Widget A ($99) vs Widget B ($149)」のような動的な比較テキストが作成されます。

よくある用途

• メールテンプレート：受信者の名前や詳細をパーソナライズ
• 名刺：連絡先情報の異なる複数のバリエーションを生成
• マーケティング資料：コンテンツの異なるローカライズ版を作成
• データの可視化：ラベルやタイトルを動的に更新
• 商品カタログ：商品名、価格、説明を一括更新
• 比較レイアウト：複数の行のデータを並べて表示
• 動的なレイヤー整理：内容に基づいてフレームに自動で名前を付ける

ヒント

• CSVでカンマを含む値は引用符で囲みます："42,580"
• デザイン全体に適用する前に、まずいくつかのレイヤーで試してください
• スプレッドシートをわかりやすくするために、意味のある列名を使いましょう
• 行番号は2から始まる（1行目は見出し）ため、.2は最初のデータ行を参照します
• スプレッドシートのセル内の差し込みが先に解決され、その後にFigmaレイヤーへの差し込みが行われます
• マージタグを工夫して組み合わせ、複雑な動的コンテンツを作成しましょう