Design Tokenizer parses style information from Figma and generates design tokens in JSON format. The JSON file is suitable for consumption by style-dictionary or similar framework.

Figma's Standard Styles

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

Custom-Parsed Styles

Design Tokenizer can generate tokens for your margin and padding spacers, radii, and border widths as long as you follow the conventions in the exmaple file.

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 corner radii “corner-radius/name”.
• The corner radius value is tokenized.

Border Width Rectangles

• Name border widths “border/name”.
• The stroke width value is tokenized.

Design Tokenizer limitations

• Image-based color styles are not supported.
• Only the size property of a layout style is parsed into a token.

Example Design Library File

Reference this file for an example of how to structure your non-standard Figma styles.