Skip to content
Token Press - DTCG & Style Dictionary Exporter

Token Press - DTCG & Style Dictionary Exporter

by Adam Forrester

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

FreeFigma

Installs

61

Likes

21

Users

352

Views

861

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

More software development plugins

View all