Skip to content

README.md

Latest commit

 

History

History
85 lines (59 loc) · 2.83 KB

README.md

File metadata and controls

85 lines (59 loc) · 2.83 KB

TEDI Variables Exporter

Export your Figma TEDI design tokens as CSS variables — all modes — with ZIP packaging and ready-to-use index.css.

Description

The TEDI Variables Exporter is a Figma plugin designed to help design and development teams quickly export design tokens from Figma as CSS files. It supports:

  • All modes export: Generate CSS files for all modes at once, bundled in a ZIP file.
  • Index file generation: Creates index.css that imports all exported CSS files, ready for use in projects.
  • Preserves variable aliases: Exports CSS variables with alias resolution.
  • Supports colors, typography, spacing, and other numeric/boolean tokens.

This plugin is ideal for design system workflows, where developers need consistent and automated token export from Figma.

Features

  • Export CSS variables for any Figma variable collection.
  • Export all modes in a single ZIP.
  • Auto-generates index.css for easy imports.
  • Supports color (HEX & RGBA), typography (px → rem), spacing, radius, z-index, opacity, and boolean values.
  • Handles variable aliases properly.
  • Lightweight, fast, and reliable download inside Figma.

Usage

  1. Install the plugin in Figma.
  2. Open the plugin in a Figma file containing TEDI variable collections.
  3. Enter a theme name (e.g., your-theme).
  4. Export all: Click Export all to download a ZIP containing all mode CSS files plus index.css.
  5. Cancel: Close the plugin anytime without exporting.

File Structure Example

Exporting all modes for theme your-theme will produce a ZIP with:

_color-variables__your-theme.css
_dimensional-variables__your-theme.css
index.css

index.css:

/* Theme: your-theme */
@import "_color-variables__your-theme.css";
@import "_dimensional-variables__your-theme.css";

This allows quick import into your project:

@import "src/variables/your-theme/index.css";

Supported Tokens

Type Format
Color HEX (#RRGGBB) or RGBA (rgba(r,g,b,a))
Typography font-size, line-height, letter-spacing (converted to rem)
Spacing margin, padding, gap, width, height (px)
Radius border-radius (px)
Boolean true / false
Numeric z-index, opacity, flex, ratio, scale
Alias Preserved using var(--variable-name)

Notes

  • The plugin requires allowed network access for CDN (JSZip) if using the online version.
  • Recommended for design system token management and automated CSS export pipelines.
  • Exports are safe and deterministic — aliases are preserved and numeric values are converted appropriately.