Export variables, check WCAG color contrast, generate color scales, build responsive typography systems, and track variable usage across your Figma files.
MultiDes is a utility plugin that bridges the gap between design systems and codebases. It gives designers and developers precise control over colors, typography, accessibility, and design token exports — all from a single centralized dashboard within Figma.
Translate Figma variables into production-ready code instantly.
- Multi-Format Export: Generates clean CSS Custom Properties (
:rootor mode-specific selectors) or structured JSON Tokens (ready for Style Dictionary). - 5 Color Formats: Export colors in HEX, RGB, HSL, LCH, or OKLCH.
- Custom CSS Prefix: Define your own CSS variable prefix (e.g.,
--brand-or--color-). - Alias Resolution: Resolves variable references to standard dotted token structures (
{colors.primary}).
Ensure your designs comply with WCAG 2.1 AA and AAA standards.
- Smart Selection Sync: Select any layers and the plugin automatically detects foreground and background colors.
- Recursive Alpha Blending: Correctly blends transparent/semi-transparent layers to calculate true visual contrast.
- 2-Layer Overlap Analyzer: Resolves layer hierarchy for immediate contrast assessment between two overlapping shapes.
Create perceptually uniform color scales (-100 to -900) and draw them onto the Figma canvas.
- 3 Interpolation Methods: Perceptual LCH, Dynamic Hue-Shift, Classic Tint/Shade.
- Add to Figma: Creates a styled Auto-Layout frame with swatches, stop labels, and hex codes.
Build fluid and responsive typography scales perfectly sized for any screen.
- Custom Ratios: Choose from industry-standard scaling ratios (Balanced, Compact, Spacious, Expressive, Editorial) or define your own custom ratio.
- Fine-Grained Control: Select base font size, number of steps, and min/max limits.
- Add to Figma: Automatically generates text styles directly into your local Figma styles based on the chosen scale.
Easily find where specific variables are used across your Figma file.
- Scope Selection: Search within the entire document or limit it to specific pages or selections.
- Instant Navigating: Quickly locate frames, shapes, or text layers using a specific token.
- Centralized Tools Menu: Access all MultiDes features from a single, clean home screen.
- Recently Used Tools: MultiDes remembers your most frequently used features (like Color Grade or Typescales) and keeps them in a quick-access list at the bottom of the plugin window.
- Create Frame: Enter width and height in centimeters, millimeters, or inches. The conversion uses 72 Figma units per inch, matching PDF points, rather than the 96 px/in used for CSS. A 7 × 7 cm frame is 198.42519685 × 198.42519685 px; fractional dimensions are preserved. Print at 100% / actual size, rather than fitting to paper.
- Presets: Choose A1 (594 × 841 mm), A2 (420 × 594 mm), A3 (297 × 420 mm), A4 (210 × 297 mm), or 6 × 6 cm / 7 × 7 cm stickers. Presets populate the selected unit; switching units keeps the preset's physical size. Editing either dimension switches to Custom size.
- Bleed: Choose None or 2, 3, 4, 5, or 6 mm per side. Width and height describe the finished size; bleed enlarges both dimensions by twice the selected amount. A 7 × 7 cm sticker with 3 mm bleed becomes 7.6 × 7.6 cm. Four native Figma ruler guides mark the trim edges, at X and width − X horizontally, and X and height − X vertically. Enable rulers (Shift + R) to see them. Guides do not print or export; extend artwork to the enlarged frame edges for bleed coverage.
- Export PDF: Select one or more frames and a file name. Click Prepare PDF, then Save PDF to choose the destination where the host supports the system file picker. Download PDF uses the browser/Figma download destination when that picker is unavailable or blocked.
- Vector output: Each frame uses Figma's native PDF export in sRGB. The plugin copies the PDF pages into one document with bundled pdf-lib, preserving vector paths, text/glyphs, fonts, and transparency from Figma's export instead of converting whole pages into images. Photos and effects rasterized by Figma remain raster; text editability follows Figma's exporter.
- Convert text to outlines: Enable this checkbox to replace visible text (including text on paths and inside component instances) with vector paths in the exported PDF using Figma's flatten API. Conversion uses temporary copies, freezes auto-layout positioning, and leaves original frames and raster image layers unchanged. The PDF needs no fonts for the outlined text, which is no longer searchable, selectable, or editable as text. Fonts must be available in Figma during conversion; missing fonts stop the export with an explanation. Copies are removed on completion, error, cancellation, or plugin close.
- Exact physical size: Each selected frame becomes a page in selection order, using 72 PDF points per inch. Fractional page bounds are preserved, so a 7 cm frame produces a 7 cm PDF page. Vector output has no DPI setting or raster pixel limits.
- Print color: The previous raster CMYK conversion is removed. Figma's PDF API supports RGB profiles, not CMYK. For CMYK or PDF/X delivery, convert the vector PDF with the printer's ICC profile in a color-managed prepress tool. Bleed can be added when creating a frame; the plugin does not add printable crop marks.
- Export runs locally, without uploading artwork or modifying the original frames. Limits: 50 frames and 200 inches per PDF side. Rotated/scaled frames or parents must be reset before exporting. Selection is captured when preparation starts; avoid editing artwork until it finishes. Cancellation discards partial output.
Sizing and export behavior follow Figma's export settings and Plugin API export capabilities.
Run npm install and npm run build to refresh the embedded pdf-lib bundle in ui.html and validate the plugin JavaScript. Run npm test for physical sizing, preserved vector/text content, multipage PDF structure, and mocked Figma export/UI checks. The implementation lives directly in code.js and ui.html; npm run watch repeats bundling and validation when either file changes. The checked-in UI remains self-contained for Figma; no CDN access is needed for PDF export.
| File | Description |
|---|---|
manifest.json |
Plugin manifest metadata |
code.js |
Figma sandbox backend — variables collector, layer analysis, canvas manipulation |
ui.html |
Self-contained plugin UI with embedded pdf-lib for vector PDF page merging |
Tags: Design Tokens · Variable Export · Contrast Checker · Color Palette · Accessibility · Typography · Typescales
Keywords: CSS variables, JSON tokens, Style Dictionary, LCH color grade, OKLCH converter, WCAG contrast, typography scale, variable usage, fluid typography, color scale generator, theme exporter