Figma Token Gen

v1.0.0

Export Figma-compatible design token JSON for colors, spacing, and typography

Builds W3C Design Token Community Group JSON from colour, spacing, typography, border-radius, and shadow definitions — ready for Figma Tokens, Style Dictionary, or any DTCG-compatible pipeline.

How to use

→Switch between category tabs (Colors, Spacing, Typography, Border Radius, Shadows) to define tokens for each group.
→Name every token clearly (e.g. 'primary', 'sm', 'body') — blank names are silently omitted from the output.
→The live JSON preview updates as you edit; click Copy JSON to place the result on your clipboard.
→Import the generated JSON directly into Tokens Studio for Figma or pipe it through Style Dictionary for multi-platform output.

Color Tokens

Generated Design Tokens (W3C DTCG JSON)

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#10b981"
    },
    "secondary": {
      "$type": "color",
      "$value": "#14b8a6"
    }
  },
  "spacing": {
    "xs": {
      "$type": "dimension",
      "$value": "4px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "8px"
    },
    "md": {
      "$type": "dimension",
      "$value": "16px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "24px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "32px"
    }
  },
  "typography": {
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": "400",
        "lineHeight": "1.5"
      }
    },
    "heading": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "24px",
        "fontWeight": "700",
        "lineHeight": "1.2"
      }
    }
  },
  "borderRadius": {
    "sm": {
      "$type": "dimension",
      "$value": "4px"
    },
    "md": {
      "$type": "dimension",
      "$value": "8px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "16px"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": {
        "offsetX": "0px",
        "offsetY": "1px",
        "blur": "2px",
        "spread": "0px",
        "color": "rgba(0,0,0,0.05)"
      }
    },
    "md": {
      "$type": "shadow",
      "$value": {
        "offsetX": "0px",
        "offsetY": "4px",
        "blur": "6px",
        "spread": "-1px",
        "color": "rgba(0,0,0,0.1)"
      }
    }
  }
}