Token Press - DTCG & Style Dictionary Exporter
Export your Figma Variables, including Text and Effect Styles to W3C DTCG-compliant JSON files.
Plugin 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
| Version | 17 |
|---|---|
| Created | October 16, 2025 |
| Last Updated | June 13, 2026 |
| Category | Software development |
| Creator | Adam Forrester |
| Stats | 47 installs, 19 likes |
| Pricing | Free |
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
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code