HyperSync

About this plugin

HyperSync brings your spreadsheet content straight into Figma. Name Excel columns to match Figma layer names (use the # prefix), upload your file, optionally point to a local image folder, and sync selected rows. Perfect for product cards, banners, catalogs, and repeated content at scale.

Key Features

Text + images: Updates text layers and image fills by name.

Local + online images: Use filenames or full image URLs in Excel.

Multi-sheet support: Switch worksheets inside the plugin.

Row selection: Sync specific rows; multi-select supported.

Auto compression: Optimizes large images before applying.

Clear feedback: Progress bar, per-row status, helpful errors.

Requirements

Sample data: https://docs.google.com/spreadsheets/d/1-UNxt0cc8cqEEboSGUSCQXNMYLCHwzTr/edit?usp=sharing&ouid=111148165392851497245&rtpof=true&sd=true

Figma Desktop or Figma in browser with plugin network access.

Excel/CSV file with headers in the first row.

Local images (optional): a folder containing filenames referenced in Excel.

Excel Setup

Headers must match Figma layer names and include the # prefix.

Example headers: #title, #price, #image, #description

Cell content supports:

Text: any string

Local image filenames: product-01.jpg

Online image URLs: https://images.unsplash.com/...

You can mix filenames and URLs in the same column.

First row = headers; data starts on row 2.

Layer Naming

Name target Figma layers exactly to match headers (including #).

Examples:

Text layer: #title

Rectangle/frame intended for an image fill: #image

Keep names consistent across frames/instances for bulk updates.

How To Use

Prepare Excel/CSV

Add headers matching layer names (with #) and fill rows.

Put image filenames or full URLs into the #image column.

Open HyperSync

Launch HyperSync from your Figma file.

Upload file

Drag & drop .xlsx/.xls/.csv or click to select.

If multiple sheets exist, pick the sheet to preview.

Handle images

If local filenames are detected, select the folder containing those images when prompted.

If using only URLs, skip folder selection.

Review and select rows

Preview the table; click rows to select. Use Shift/Ctrl for multiple.

Sync

Click Sync. View the progress bar and status. Text layers update and image layers receive fills.

Example CSV

Headers: #title, #price, #image, #description

Rows:

Smart Thermostat, $199.99, thermostat.jpg, Energy efficient smart home device

Wireless Camera, $89.99, https://images.unsplash.com/photo-xyz, HD security camera with night vision

Tips

Naming: Layer names must match headers exactly (including #).

Images: Keep local images in one folder; use descriptive filenames.

Start small: Sync a few rows first to validate setup.

Mix sources: Combine local filenames and online URLs as needed.

Troubleshooting

File won’t load: Confirm .xlsx/.xls/.csv, and that row 1 is headers.

Images missing:

Local: Ensure the selected folder contains the referenced filenames.

URL: Ensure it’s a direct, accessible image URL and network allows access.

Layers not updating: Verify layers exist and names exactly match headers (with #). Confirm correct sheet and row selection.

Slowness: Sync fewer rows at once; large images are auto-compressed.

FAQs

Multiple sheets? Yes — switch sheets in the plugin.

Mix local and online images? Yes — in the same column if you like.

Which layers are updated? Any layers whose names exactly match the Excel headers (with #). Text layers update characters; image layers receive an image fill.

Do I need to select frames first? No. HyperSync finds layers by name across the file.

Permissions & Privacy

Network access: Used only to fetch image URLs you provide.

Local files: If you choose local images, the plugin reads from your selected folder to apply fills. No analytics or tracking.

Known Limitations

Image URLs must be publicly accessible.

Very large images are compressed to improve performance.

Some SVG sources may rasterize depending on environment/source.