Working with Figma

There’s a few ways to integrate Pinwheel with Figma, ranging from easier and manual, to automated programatic methods.

A screenshot of the Pinwheel and Figma desktop apps, showing how colors, shadows, numbers, and strings can be imported.

Importing and exporting variables #

To export color, number, boolean, and string variables from Figma to Pinwheel, the Pinwheel Figma plugin can be used. This will export a Design Tokens JSON file that can then be imported into Pinwheel by choosing File › Import Colors From › Design Tokens JSON.

The Pinwheel Figma plugin can also import Design Tokens JSON files. This helps import colors, numbers, booleans, and strings from Pinwheel and other sources.

A screenshot of the Pinwheel Figma plugin.

Automated solutions #

If you’re looking for a more automated way to sync Pinwheel and Figma, the Figma Variables REST API is a great way to go.

Pinwheel can be run from the command line, which means it is possible to use Pinwheel as your design system source of truth, then run a script to export all the formats needed, which may include SCSS, SwiftUI, or other formats.