Data-Driven Design: How to Sync Spreadsheets with Figma
The Content Gap in Design#
One of the biggest challenges in modern design is keeping mockups filled with realistic content. Lorem ipsum might work for early concepts, but stakeholders and developers need to see real data to make informed decisions.
Sheets2Figma solves this by creating a live connection between your spreadsheets and Figma designs.
How It Works#
The workflow is straightforward:
- Prepare your data in Google Sheets, Excel, or CSV
- Set up markers in your Figma text layers using the
*ColumnNamesyntax - Run the plugin — data flows from your spreadsheet into the design
- Iterate — update the spreadsheet, re-sync, and your designs update instantly
Supported Data Sources
Sheets2Figma works with Google Sheets (via URL), Excel files (.xlsx), and CSV files. You can drag and drop files directly into the plugin window.
The Marker System#
The marker system is what makes Sheets2Figma powerful. By naming your text layers with a * prefix followed by a column name, you tell the plugin exactly where each piece of data should go.
Example spreadsheet:
| Name | Role | |
|---|---|---|
| Sarah Chen | Product Designer | sarah@company.com |
| Marcus Rivera | Design Lead | marcus@company.com |
| Anna Kowalski | Freelancer | anna@design.co |
Figma layer names:
*Name→ receives "Sarah Chen"*Role→ receives "Product Designer"*Email→ receives "sarah@company.com"
When you select multiple frames and run the plugin, each frame gets populated with the next row of data. Three frames = three team members, each with their own data.
Advanced: Image Sync#
Sheets2Figma can also load images from URLs in your spreadsheet. If a column contains image URLs, the plugin will automatically download and apply them to matching image layers.
This is incredibly powerful for:
- E-commerce catalogs — product images from your CMS
- Team pages — profile photos from your HR system
- Portfolio layouts — project screenshots from a shared drive
| ProductName | ProductImage | Price |
|-------------|-------------|-------|
| Widget Pro | https://images.example.com/widget.jpg | $29.99 |
| Gadget X | https://images.example.com/gadget.jpg | $49.99 |
Real-World Use Cases#
1. Multi-Language Designs#
Create one master design, then use different spreadsheets for each language:
content-en.csv— English contentcontent-de.csv— German contentcontent-ja.csv— Japanese content
Switch between languages in seconds, not hours.
2. A/B Testing Variants#
Quickly generate multiple design variants by changing the data:
- Version A: "Start Free Trial" / blue CTA / social proof with 10K users
- Version B: "Get Started Now" / green CTA / social proof with specific companies
3. Client Presentations#
Fill mockups with the client's actual brand content, product names, and pricing before presenting. Nothing impresses a client more than seeing their own data in the design.
Data Privacy
When using client data, make sure you have permission to use it in your design files. Sheets2Figma processes data locally — nothing is sent to external servers.
Getting Started#
- Install Sheets2Figma from the Figma Community
- Create a simple Google Sheet with 3-4 columns
- Name your Figma text layers with
*ColumnNamemarkers - Open the plugin, paste your sheet URL, and click Sync
The whole process takes less than 2 minutes for your first sync. After that, re-syncing is a single click.
What's Next?#
Check out our detailed documentation for advanced features like selection scope, custom mappings, and bulk operations.
Have questions? Contact our team — we're always happy to help you get the most out of Sheets2Figma.