Pinwheel Figma Plugin

The Pinwheel Figma plugin can import Design Tokens JSON to Figma variables and export Figma variables to Design Tokens JSON. It’s a great way to transfer colors, numbers, and booleans to and from Figma to Pinwheel, or anywhere that can import Design Tokens Community Group formatted JSON.

Importing #

When importing, the mode and contrast popup buttons set which Figma document mode the corresponding Pinwheel mode will be imported into. For example, if you set up a dark mode color variant in Pinwheel, and you called your Figma document mode for dark mode colors Dark, then the Dark Mode popup should be set to Dark.

Please read the Design Tokens JSON help page for information on the JSON files imported by the Pinwheel Figma plugin.

Importing colors #

Imported colors will be converted to your document’s color space. This is because Figma supports per-document color spaces, rather than per-color color spaces. Design Tokens JSON files can have per-color color spaces, and in situations where colors are not in the document’s color space, they will have to be converted. This may alter the appearance or values of colors.

Exporting #

When exporting, the mode and contrast popup buttons set which Figma document mode the corresponding Pinwheel mode or JSON group the Figma mode will be exported to. For example, if the Figma document mode for dark mode colors is called Dark, then the Dark Mode popup should be set to Dark.

Please read the Design Tokens JSON help page for information on the JSON files exported by the Pinwheel Figma plugin.

Acknowledgements #

The Pinwheel plugin uses the amazing Color.js library.