Back to Plugins
Token Press - DTCG & Style Dictionary Exporter

Token Press - DTCG & Style Dictionary Exporter

Export your Figma Variables, including Text and Effect Styles to W3C DTCG-compliant JSON files.

Plugin Preview

Token Press - DTCG & Style Dictionary Exporter preview

About this plugin

Token PressExport production-ready design tokens from Figma to code. Token Press transforms Variables, Text Styles, and Effect Styles into W3C DTCG-compliant JSON with intelligent composite compilation, multi-format output, and one-click Style Dictionary optimization.What Makes Token Press DifferentMost exporters dump variables one-for-one. Token Press treats Figma styles as the source of truth for composite tokens — meaning a heading text style becomes one typography token, not six scattered dimension/family/weight tokens. Multi-layer shadows become one shadow composite with all layers preserved. Motion variables collapse into proper transition composites with type-safe easing arrays.This difference matters on the consumer side: Style Dictionary needs minimal transforms, designers see tokens where they expect to see them, and your motion system ships as spec-compliant composites instead of CSS strings requiring parsing.-----Key FeaturesIntelligent Composite CompilationTypography Tokens - Text Styles automatically compile into complete DTCG typography composites with fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, and textDecorationShadow Tokens - Multi-layer drop shadows and inner shadows merge into proper DTCG shadow tokens with color, offsetX, offsetY, blur, spread, and inset properties for each layerTransition Tokens - Duration, delay, and timingFunction variables combine into production-ready DTCG transition tokens with cubic-bezier arrays (e.g., [0, 0, 0.58, 1])One-Click Presets: DTCG Spec or Style DictionaryMulti-Format OutputJSON (DTCG-spec) - Always emitted, fully spec-compliantCSS Custom Properties - Drop-in variables for direct browser useRaw JSON - Unprocessed flat structure with full Figma metadataDot Notation - Plain text token paths for quick auditingSmart Alias ResolutionBuilt-In ValidationPerfect For:Design system teams shipping tokens to multiple platforms and codebasesDesign ops engineers maintaining DTCG-spec compliance across toolchainsTeams using Style Dictionary who need minimal transform configurationOrganizations with multi-brand systems requiring per-brand token packages

Plugin Details

Version17
CreatedOctober 16, 2025
Last UpdatedJune 13, 2026
CategorySoftware development
CreatorAdam Forrester
Stats47 installs, 19 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:src/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    This plugin operates entirely client-side with no external network calls

  • Editor Types:
    figma
  • Allowed Domains:
    • none