Export colors as code or Figma variables

Goal

Get your extracted colors into code or into a Figma variable collection.

Before you start

• A color list in Color Extractly.

Steps

1. Export as code Click Code Token to open Export Variables as Code Token. Choose a Format: CSS, JSON, JSON (Figma), SCSS, SCSS Map, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift or Web Tokens (DTCG).
2. Download or copy Click Download to save the file, or use the copy button to copy the code to the clipboard.
3. Create Figma variables Open the color list's menu and choose Import to Variables. The collection is named after the imported token file, or Extracted Colors if the colors did not come from a file.

Tips

• Rename your colors first, so the exported tokens carry the names you want.

Result

Your colors exist as a token file or as Figma variables.

Related guides

• CLEAN UP & NAMES
  Combine similar colors and name them Use Magic Clean to reduce duplicates and Rename to give every color a consistent name.
  →
• COLOR EXTRACTION
  Extract colors from CSS, code or text Paste CSS, SCSS, LESS or any text that holds color values and turn them into a color list.
  →