← Tokenmend
DocumentationSupport

How Tokenmend for Framer works

Import tokens

  1. Open Tokenmend from Framer's Quick Actions (Cmd+K or Ctrl+K).
  2. In Import, pick your token files. From Figma: right-click a variable collection, Export, and drop the ZIP in. Tokens Studio: the JSON export. CSS: any file with --name: value custom properties, including .dark or prefers-color-scheme: dark blocks and Tailwind v4 @theme.
  3. Check the Modes list: each mode is Light colours, Dark colours, Desktop, Tablet or Phone type, or Ignore. Tokenmend guesses from the names.
  4. Pick a folder (for example Tokens) and, if your token names start with a collection name you don't want in Framer, drop that leading group.
  5. Read the preview, then Apply. Changing existing styles asks for a second click.

Run it again whenever the tokens change. With "Remove styles in the folder that the files no longer have" on, styles you deleted from the tokens go too, and only inside the folder you chose.

Limits

  • Framer doesn't let plugins set custom uploaded fonts. Text styles that need one are listed and skipped.
  • Framer styles hold colours and type. Spacing, radius and shadow tokens are listed as left out.
  • A text style keeps at most 4 sizes (Framer's limit).
  • Styles used only inside code components or CMS rich text look unused in the audit. Deleting re-checks the project, but not code.

Audit

Scan the project to see every color and text style with where it's used, unused ones, duplicates, colours typed by hand on frames and borders, text layers with no text style, and every font in use. From there you can bind hand-typed colours to a style, replace a font, merge duplicates and delete unused styles. The scan and the CSV are free.

Export

Export your styles as W3C design tokens (one file with dark values inside, or a light and a dark file), CSS custom properties with a dark scheme, or a Tailwind v4 theme. Download or copy.

Trial and license

The trial is 10 runs over 7 days, each changing up to 40 styles and 200 layers. A run is one applied change set or one export. After that, buy a license on the Plan tab and paste the key from your email. A key works on two Framer accounts per seat; Deactivate frees one.