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.
- Persistent navigation: Switch between all eight tools from the sidebar. Tool settings and export steps stay available during the current plugin session.
- Readable workspace: Navy surfaces, blue actions, clear text, and controls beside live previews. The plugin opens at 760 × 760 px and adapts to narrower windows.
- Searchable menus: Filter presets, fonts, and other select options. Use arrow keys and Enter to choose, or Escape to close and return focus. Secondary settings live under expandable help and More options.
- 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.
- Open Generate QR code from the dashboard or QR code in the sidebar. Enter a link or plain text, including Unicode. The exact input is encoded without opening links, rewriting content, shortening URLs, tracking redirects, or contacting a QR service. Codes are static and do not expire; destination availability is independent of the code.
- Choose Classic squares, Soft squares, Rounded squares, Extra rounded squares, Round dots, Leaf, or Reverse leaf for the small modules, including timing/format modules. Corner square style offers the same styles independently for finder/alignment markers, or follows the modules with Same as modules. Merge neighboring modules joins their shared edges, rounding only exposed corners; leave it unchecked for individually styled modules. Classic squares already touch in either mode. Markers always use continuous rings with the original dark/light proportions. The styled result must still pass the local decode check. Output presets are 256, 512, 1,024, and 2,048 px; custom sizes range from 128 to 4,096 px.
- Upload a local PNG, JPEG, or WebP logo (up to 5 MB and 4,096 px per side), or reserve Empty space for an image added after import. Logo width presets are 10%, 14%, and 18% of the symbol; custom widths range from 8% to 20%, snapped down to whole modules. A one-module white buffer surrounds the logo. Uploaded logos are normalized locally to PNG at up to 512 px per side.
- Scan settings control error correction (M/Q/H), minimum module size (3–12 px, default 4), and white margin (4/6/8 modules). High correction is mandatory with logos or empty space. Output that would make modules too small is blocked with a suggested minimum size. Black modules and an opaque white background retain contrast; the required margin cannot be removed.
- Each styled preview, including the uploaded logo, must round-trip its exact UTF-8 bytes through the independent bundled jsQR decoder before Add to Figma is enabled. The encoder is the pinned, MIT-licensed Project Nayuki implementation, vendored in
vendor/qrcodegen.ts. Input is limited to 1,200 UTF-8 bytes; use shorter content for less dense codes. - Import creates editable vector artwork, a separate Logo image or Logo placeholder · replace fill frame, and locked Scan patterns · keep above logo artwork. Replace the placeholder's fill in Figma and keep it below the scan patterns, which can cross the logo at some QR sizes. Preserve the white buffer and outer border. Do not enlarge the placeholder over data modules.
- Decode checks are a software safeguard, not proof for every camera, printer, or viewing distance. Test the final artwork at its actual screen/print size with a phone, especially after resizing or replacing a logo. Error correction does not mean an arbitrary percentage of the visible code can safely be covered. See DENSO WAVE's quiet zone guidance and error correction guidance.
Run npm install and npm run build to refresh the embedded PDF/QR libraries and QR scripts in ui.html and validate the plugin JavaScript. Run npm test for print/PDF behavior, rendered QR decoding, and mocked Figma import checks. The runtime lives in code.js and the self-contained ui.html; QR sources live in scripts/qr-core.js and scripts/qr-ui.js. npm run watch repeats bundling and validation when these sources change. No CDN or network permission is needed for QR generation or 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