Warlock DX

About this plugin

Warlock DX – Tokens and Design System Tools

Plugin for teams using or building design systems: extract tokens from Figma and generate ready-to-use variables for your files, then export

them in multiple code formats.

Token Extraction

- Export primitive and semantic tokens from Figma's Variables and Styles.

- Output in W3C Design Tokens (JSON) format, compatible with Style Dictionaries and token pipelines.

- Options: primitives only, semantic only, or all.

Export Code (Multi-Format)

Export your tokens in multiple code formats ready to use:

- CSS Custom Properties – Native CSS variables (:root)

- SCSS Variables – Variables and maps for Sass

- Tailwind Config – Configuration for tailwind.config.js

- TypeScript – Typed constants object

- Swift (iOS) – SwiftUI/UIKit extensions

- Kotlin (Android) – Objects for Jetpack Compose

- W3C Design Tokens – Standard JSON format

Preview code before exporting. Select multiple formats at once.

Scale Generators

Create Figma variables from generated scales:

- Colors – Palette from a base color (50-950 shades)

- Sizes – Spacing and dimension scales

- Typography – Font size scales with harmonic ratios

- Border Radius – Radius scales (sm, md, lg, xl, full)

- Shadows – Elevation scales (y-offset, blur)

- Opacity – Standard opacity scales (0-100%)

Similar Elements

Select one or more elements and search the page for similar nodes.

- Filters: same node type, similar size (±10%), same color (solid fill)

- Results list with type, size, and badges for Component/Instance

- Navigate to elements or their main components

---

Useful for: maintaining visual consistency, documenting design tokens, and preparing output for development across web and mobile platforms.