Design Tokenizer

Design Tokenizer parses style information and generates design tokens in JSON format. The JSON file is suitable for consumption by a build system framework like style-dictionary.

A basic design libarary is available for you to study, as well as an example project that demonstrates end-to-end integration of design tokens. Just click the help link!

_______________________________________________________________________

How the plugin works:

Figma stores your text, color, effect, and layout styles as internal style objects. Design Tokenizer will parse everything it can from these objects.

Additioally, Design Tokenizer can generate tokens for your margin and padding spacers, radii, and border widths as long as you follow certain conventions:

Frame

- Create a frame and name it “Sizes.”

- Created rectangles for each custom style.

Spacer Rectangles

- Name spacers “spacer/name”.

- The width and height values are tokenized.

Corner Radius Rectangles

- Name radii “corner-radius/name”.

- The corner radius value is tokenized.

Border Width Rectangles

- Name border widths “border/name”.

- The stroke width value is tokenized.

_______________________________________________________________________

Limitations:

- Image-based color styles are not supported.