Render reference sheets of your styles and variables

Goal

Give your team a visible overview of the design tokens that already live in the file.

Before you start

• Color Extractly open in Figma.
• Local styles or variables in the Figma file.
• Edit access to the Figma file.

Steps

1. Open Render Sheets Click Render in the sidebar. The view is called Render Sheets and lists one card per sheet.

   

2. Render color variables Click Color Variables. Choose a Collection (All Collections, or one) and, when the Mode list is shown, a mode; leave it on the default to use each collection's default mode. Then click Render to Canvas.

   

3. Render styles or all variables Click Color Styles (paint and gradient styles by folder), Text Styles (a typography specimen grouped by folder), Effect Styles (shadows, blurs and other effects) or All Variables (every variable type, grouped by collection). These render straight away.
4. Find the sheet Each sheet is a frame named Sheet - followed by what it shows, for example Sheet - Color Styles. It is placed in the middle of your view, and Figma zooms to it. A message confirms the result, for example 'Color styles rendered to canvas.'
5. Refresh a text styles sheet After you change text styles, select the Sheet - Text Styles frame itself and click Update Sheet. It refreshes the sizes, usage and footer date in place and keeps your previews and edits.
6. Run it from Quick Actions Press Cmd + / (Ctrl + / on Windows) and choose 🎨 Render Color Variables to canvas, 🅰️ Render Text Styles to canvas, 📊 Render Variables to canvas, ✨ Render Effect Styles to canvas or 🌈 Render Color Styles to canvas. Color Extractly opens and renders the sheet; the color variables sheet then covers all collections.

Tips

• Render a new sheet after larger changes: Update Sheet only refreshes the details of a text styles sheet, it does not add or remove styles.

Result

A sheet on the canvas that shows the file's styles or variables.

If something goes wrong

• 'No variable collections found in this file.'

  The file has no local variables. Create or import variables first, for example with Render Colors to Figma or Import to Variables.

• 'No local color styles found.', 'No local text styles found.' or 'No local effect styles found.'

  The sheet only shows styles defined in this file. Styles from a library are not rendered.

• 'Select a generated sheet (the "Sheet - …" frame) to update.'

  Select the outer sheet frame, not a layer inside it, then click Update Sheet again.

Related guides

• EXPORT & VARIABLES
  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.
  →
• CANVAS & MATCHING
  Link a design's colors to matching variables and styles Replace hard-coded fills and strokes in a selection with the closest color variable or style, local or from a library.
  →
• COLOR EXTRACTION
  Import a token file or this file's styles and variables Load the colors of a JSON, CSS, SCSS or LESS token file, or of the color styles and variables already in your Figma file, into the color list.
  →