cipher

Cipher is a Figma plugin that helps design teams manage their design tokens — the colors, spacing, typography, and other style values that keep a product visually consistent. Instead of manually creating and updating dozens of color swatches or text styles one at a time, you can batch-edit them, generate full token systems from scratch, and export everything as production-ready CSS that developers can drop straight into their codebase.

At its core, the plugin works inside Figma and handles four main jobs. It lets you manage variables (like colors and numbers) in bulk — create, rename, move, or edit many at once. It manages styles (paint, text, effects) and can automatically bind unstyled elements to the right variables. It imports tokens from JSON or CSS files, detecting conflicts so you don't overwrite work by accident. And it exports everything to CSS or JSON, supporting modern formats like OKLCH color and Tailwind CSS v4 theme blocks, with output split into logical files like primitives, semantics, and type scales.

The standout feature is the Token Generator. You give it a brand color and a few preferences, and it builds a complete three-tier token system — from raw values up to semantic ones ready for use. It generates color scales (50–950), surface tones (light/dark), status colors, typography with configurable scale ratios, spacing, radius, shadows, and utility tokens like z-index and animation easing. This means a designer can go from a single brand color to a full design system in minutes rather than days.

The project is built as a monorepo containing the Figma plugin itself, a marketing website, and a landing page boilerplate. It uses React and TypeScript throughout, with a test suite of over 400 tests. The plugin is installed in Figma's development mode by pointing it at the project's manifest file, so it's currently set up for local development rather than a one-click install from the Figma Community.