# Render your colors to the canvas as a sheet, styles or variables

> Draw the color list as a sheet on the canvas, then add the colors as Figma styles or variables that the sheet uses.

## Goal

Get a visible color sheet in your file and, in the same go, color styles or variables your designs can use.

## Before you start

- A color list in Color Extractly.
- Edit access to the Figma file.

## Steps

1. **Get the list ready** Clean up and rename the colors first. The bar under the color list holds New, •••, Code Token and Render Colors to Figma.
   ![Color list of 64 colors after Magic Clean, with New, Undo, •••, Code Token and Render Colors to Figma in the bar below.](https://raiken.io/assets/kb/colorextractly/colorextractly-render-colors-to-figma/color-list.png)
2. **Render the sheet** Click Render Colors to Figma. Color Extractly draws a frame named Sheet - Extracted Colors in the middle of your view, with a card for every color grouped by name, and zooms to it. If you filtered the list, only the filtered colors are drawn.
3. **Add the colors as styles** The dialog Are you happy with the colors? opens. Click + next to Add as style(s). Each color becomes a color style named after the color, with hyphens in the name turned into folders. A style that already has that name is updated. The cards on the sheet are linked to the new styles.
   ![Dialog Are you happy with the colors? with a + button for Add as style(s) and one for Add as variable(s).](https://raiken.io/assets/kb/colorextractly/colorextractly-render-colors-to-figma/render-dialog.png)
4. **Add the colors as variables** Click + next to Add as variable(s). Each color becomes a color variable in a collection called Colorly. If a variable of that name already exists, the new one gets a number added. The cards on the sheet are linked to the new variables.
5. **Close the dialog** You can add both styles and variables. When you are done, click ✕ or anywhere outside the dialog.

## Tips

- On the Typography and Numbers tabs the same button reads Render Text Styles or Render Number Sheet, and offers to add text styles or number variables afterwards.
- To create variables without drawing a sheet, use Import to Variables in the ••• menu.

## Result

A color sheet on the canvas, and color styles or variables in your file that it is linked to.

## If something goes wrong

- **The styles or variables include colors the sheet does not show.** -> Add as style(s) and Add as variable(s) use the whole list, even when a filter limited the sheet. Take the colors you do not want out of the list first, with the Remove color button on their row.

## Common questions

### How is this different from Import to Variables?

Import to Variables creates variables only, in a collection named after the imported token file or Extracted Colors. Render Colors to Figma draws a sheet first and puts its variables in the Colorly collection.

### Where does the sheet go?

On the current page, centred on what you were looking at. Figma zooms to it when it is done.

## Related guides

- [Export colors as code or Figma variables](https://raiken.io/kb/colorextractly/colorextractly-export-and-variables): Download or copy your colors as a token file, or create Figma variables from them.
- [Combine similar colors and name them](https://raiken.io/kb/colorextractly/colorextractly-clean-up-and-name): Use Magic Clean to reduce duplicates and Rename to give every color a consistent name.
- [Render reference sheets of your styles and variables](https://raiken.io/kb/colorextractly/colorextractly-render-sheets): Draw the color variables, color styles, text styles, effect styles or all variables of a file as a sheet on the canvas.

---

Source: https://raiken.io/kb/colorextractly/colorextractly-render-colors-to-figma (Color Extractly help centre). Reviewed: 2026-10-30.