Token Press - DTCG & Style Dictionary Exporter
by Adam Forrester
Export your Figma Variables, including Text and Effect Styles to W3C DTCG-compliant JSON files.
Installs
61
Likes
21
Users
352
Views
861
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 allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.