Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Style Figma layers from a spreadsheet with CSS style sync - 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.. Machine-readable page: /copydoc/tutorials/style-figma-layers-from-a-spreadsheet-with-css-style-sync.md.

Style Figma layers from a spreadsheet with CSS style sync

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.

← 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