Skip to content

[Feature]: Add Figma Tokens (Tokens Studio) JSON export #33

Description

@nujovich

Which surface does this affect?

Export targets (new framework, new file format)

What problem are you trying to solve?

Once Mint produces a clean token set from legacy CSS, designers want the same tokens back in Figma — otherwise the design file and the codebase drift again from day one. The Tokens Studio (formerly Figma Tokens) plugin is the de-facto bridge, and it consumes a specific JSON shape. Users currently have to write that file by hand.

Proposed solution

Add --target tokens-studio that emits a JSON file in the Tokens Studio v2 schema:

{
  "global": {
    "color": {
      "primary": { "500": { "value": "#1976d2", "type": "color" } }
    },
    "spacing": {
      "3": { "value": "12px", "type": "spacing" }
    }
  }
}

Map every Mint category (colors.scale, spacing, typography.fontFamilies, borderRadius, shadows) to the corresponding type so the plugin renders them correctly.

Alternatives you considered

  • Style Dictionary export (filed separately) — different consumer; designers don't run style-dictionary build.
  • W3C Design Tokens Community Group format — promising long-term, but tooling adoption is still thin.

Additional context

Plugin: https://tokens.studio/ • Schema: https://docs.tokens.studio/

Sanity checks

  • I searched existing issues and didn't find this proposal.
  • This isn't something I could solve with existing CLI flags or playground options.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions