Video Tutorial: Sync merge tags in Figma text layers from a spreadsheet

Video Tutorial: Sync content with advanced merge tags in spreadsheet cells

Merge tag Syntax

CopyDoc uses a simple merge tag syntax: #{columnName}. You can insert these merge tags anywhere in your text layers, and they'll be replaced with values from your spreadsheet.

Example Usage

Figma text layer:

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

Spreadsheet columns:

firstName	lastName	orderId
John	Smith	12345
Sarah	Johnson	67890

Result after sync:

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

Key Benefits

• Preserve formatting: Text styles, fonts, and colors remain intact
• Multiple merge tags: Use as many merge tags as needed in one layer
• Flexible column naming: Works with various column header formats
• Smart fallback: If no matching column is found, the merge tag text is preserved
• Cross-row references: Pull data from specific rows using .N syntax
• Dynamic layer naming: Use merge tags to rename frames and layers

Column Header Flexibility

CopyDoc is smart about matching column headers. All of these formats work:

• Standard: firstName matches #{firstName}
• With # prefix: #firstName matches #{firstName}
• Full merge tag: #{firstName} matches #{firstName}

Advanced Features

Row Index Override (.N Syntax)

Pull data from specific rows using the .N syntax, where N is the row number (starting from 2, as row 1 is headers).

Example:

Spreadsheet:

firstName	lastName
John	Smith
Sarah	Johnson
Mike	Williams

Figma text layer in row 1:

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

Result:

Current: John Smith Next up: Sarah Johnson

This is useful for:

• Creating "up next" or "previous" references
• Showing related data from other rows
• Building comparative displays
• Creating reference lists

Renaming Layers with Merge Tags

Merge tags work for renaming frames and layers, too. Use them in your spreadsheet's column values to dynamically generate layer names.

Example:

Spreadsheet:

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

Result: Your frames will be renamed to:

• "John Smith"
• "Sarah Johnson"

You can also use row index override in layer names:

• #{firstName.2} vs #{firstName.3} creates comparative frame names
• Perfect for "before/after" or "option A vs option B" scenarios

Bulk Layer Renaming

For simpler renaming, if you have 6 Figma frames all named #My Frame, you can use this as a column name in your spreadsheet and rename them in bulk with static values or merge tag combinations.

Spreadsheet Cell Content Interpolation

Spreadsheet cells can reference other columns using merge tag syntax; this happens before the value is applied to Figma layers, allowing you to create computed values.

Example:

Spreadsheet:

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

How it works:

1. The fullName column resolves to "John Smith" or "Sarah Johnson"
2. The greeting column then uses that resolved value to become "Hello, John Smith!" or "Hello, Sarah Johnson!"
3. This final value is applied to your Figma text layers

Benefits:

• Create reusable formulas in your spreadsheet
• Combine multiple columns into formatted strings
• Build complex content from simple data pieces
• Maintain consistency across similar content patterns

Advanced Example with Row References:

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})

This creates dynamic comparison text like "Widget A ($99) vs Widget B ($149)"

Common Use Cases

• Email templates: Personalize recipient names and details
• Business cards: Generate multiple variations with different contact info
• Marketing materials: Create localized versions with different content
• Data visualizations: Update labels and titles dynamically
• Product catalogs: Batch update product names, prices, and descriptions
• Comparative layouts: Show data from multiple rows side-by-side
• Dynamic layer organization: Automatically name frames based on their content

Tips

• Add quotes around values with commas in your CSV: "42,580"
• Test with a few layers first before applying to your entire design
• Use meaningful column names to make your spreadsheet easy to understand
• Row numbers start at 2 (row 1 is headers), so .2 references the first data row
• Spreadsheet cell interpolation resolves first, then Figma layer interpolation
• Combine merge tags creatively to build complex dynamic content