← Back to CopyDoc Video Tutorials

What this video covers

This tutorial shows how to use the CopyDoc Figma plugin to style Figma layers from a spreadsheet using CSS, including changing background color, text color, font size, opacity, and border radius. It also demonstrates syncing different rows to different selected layers, mixing style and content updates, using Google Sheets or Microsoft Excel, and finding supported CSS properties in the plugin's CSS docs.

Things you'll need

• A Figma file with layers named to match the spreadsheet headers
• A spreadsheet in Google Sheets or Microsoft Excel
• For Google Sheets, sharing set to "anyone with the link"

Steps

1. Open Figma, use the Resources icon to find CopyDoc, and save it to your plugins list.
2. Run CopyDoc from Plugins > Saved plugins, then open Sync Spreadsheet.
3. Prepare a spreadsheet with layer names in the header row and CSS rules in the cells, matching the names used in the Figma layers.
4. For Google Sheets, set sharing to "anyone with the link" and copy the sheet link; for Excel, use a local file with the same structure.
5. Paste the spreadsheet link or drag and drop the Excel file into CopyDoc, choose the tab, select the matching Figma layer or layers, and click Use Selected Sheet.
6. Click Sync Rows to apply the spreadsheet styles to the selected layers, including nested text layers or multiple selected frames.
7. Optionally switch selection order, mix style and content tabs carefully, and use the CSS docs link for supported properties.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Using CSS in your spreadsheet to update Figma layer styles
• Next: Rename Figma layers in bulk from a spreadsheet
• Open CopyDoc in the Figma Community