@patternfly/design-tokens

Export Patternfly Tokens Plugin

This plugin exports Patternfly tokens out of Figma and creates JSON files that can be added to the design tokens repo and processed by style dictionary.

Setup

• Clone the design-tokens repository.
• Open the Figma app.
• In Figma, select Plugins > Development > Import plugin from manifest.
• Browse to design-tokens\packages\module\plugins\export-patternfly-tokens and select the manifest.json file from your cloned design-tokens repository and click Open.

The Export Patternfly Tokens plugin should now be available to use as a development plugin in your Figma environment.

Usage

Once the plugin has been added to Figma via the manifest file:

• In Figma, select Plugins > Development > Export Patternfly Tokens > Export Tokens.
• Click Export Tokens. The text area will display a concatenated list of all tokens exported from the Figma library. Links to each exported JSON file are displayed at the bottom of the dialog.
• Click each JSON file link to save them locally (do not rename the JSON files!).
• Copy the local JSON files to your cloned design-tokens repo:
  • Copy base.dimension.json, base.json, semantic.dimension.json, semantic.json, and palette.color.json to \packages\module\tokens\default.
  • Copy base.dark.json, semantic.dark.json, and palette.color.json to \packages\module\tokens\dark to \packages\module\tokens\dark.
  Note that palette.color.json is saved to both the default and dark directories.