Tokenmend

Design tokens to Framer styles

Tokenmend reads the design tokens you already have and turns them into Framer color and text styles: light and dark values, fonts, sizes and responsive breakpoints. Change the tokens, run it again, and your styles update in place. Then it audits the styles in your project, binds colours typed by hand to the right style, replaces fonts, merges duplicates and exports everything to code.

Email us to get TokenmendBuy a license

What you get

• Imports Figma's own variables export (the ZIP or its .tokens.json files) with no Figma login, plus Tokens Studio JSON, W3C design tokens, CSS custom properties and Tailwind v4 themes
• Light and Dark modes become one color style with a dark value; aliases are followed per mode
• Desktop, Tablet and Phone modes become text style breakpoints
• Type tokens become text styles with font, weight, size, line height, letter spacing, case and HTML tag, linked to their color style
• A preview of every style it creates or changes, before anything is touched
• Sync: run it again after the tokens change; optionally remove styles your token folder no longer has
• An audit of every color and text style: usage, unused, duplicates, hand-typed colours, text without a style, fonts in use, and a CSV
• Bind hand-typed colours to styles, replace fonts with the nearest weight, merge duplicates, delete unused
• Export to W3C design tokens, CSS custom properties with a dark scheme, or a Tailwind v4 theme

Pricing

Free trial: 10 runs over 7 days, each changing up to 40 styles. Reading files, the preview, the audit and the CSV are always free. Then $119 once, $89 a year or $12 a month per seat. Teams pick the number of seats at checkout and share one license key.

$119 once$89 a year$12 a month

Already bought? Manage billing. How it works. Privacy.