Semantix - Design System and Token Generator

About this plugin

Semantix is a professional design system generator for Figma. Pick your colors, fonts, and base units — Semantix builds the entire token architecture for you: variables, text styles, effect styles, and annotated spec sheets, all in one run.❖ 6 COMPLETE DESIGN SYSTEMS🎨 Color SystemGenerate 10-shade primitive palettes for brand, neutral, and feedback colors. Every shade is auto-mapped to 200+ semantic tokens (background, text, border, interactive states, overlays, and more). Includes a built-in accessibility checker — preview WCAG AA / AAA contrast ratios before you create. Optional dark mode generates a full second variable mode with correct semantic overrides.→ Generates: Figma Color Variables (Primitives + Semantic, Light + Dark modes)✏️ Typography SystemConfigure heading, body, and mono font families from a curated library of 80+ Google Fonts — with live preview directly in the picker. Set your base size and choose from 6 type scale ratios. Outputs 10 scale steps and 18 semantic roles (display, heading, body, label, code, overline) as both Text Styles and Variables.→ Generates: Figma Text Styles + Variables (size, line-height, letter-spacing, font family, weight)📐 Spacing SystemChoose a base unit (2px, 4px, 5px, 8px, or 10px) and get a full 14-step primitive scale, plus 33 semantic aliases across component padding, layout gaps, inset, stack, inline, and squish categories — all aliased back to primitive tokens.→ Generates: Figma Number Variables (Primitives + Semantic)▭ Border SystemDefine custom border styles with name, width, radius, and color — or use the built-in defaults (6 widths from hairline to heavy, 9 radii from 0 to pill). Includes 21 semantic aliases covering inputs, cards, focus rings, dividers, and avatars.→ Generates: Figma Number Variables (Widths + Radii + Semantic)□ Elevation SystemBuild a multi-level shadow system with per-level blur, opacity, and z-index scales. Each level uses stacked ambient + direct shadows for realistic depth. Outputs 11 semantic aliases (card, dropdown, modal, toast, etc.) as Effect Styles you can apply directly to components.→ Generates: Figma Effect Styles + Variables (blur, overlay, z-index)⊞ Grid SystemDefine breakpoints with custom column counts, margins, and gutters — column width is auto-computed. Each breakpoint becomes a variable mode, so your layout tokens respond correctly across device sizes. Includes content-area and layout constant tokens (header height, sidebar width, section gaps).→ Generates: Figma Variable modes per breakpoint (columns, margin, gutter, column-width, canvas-width)❖ SPEC SHEETS INCLUDEDEvery module generates a fully annotated spec sheet directly on your Figma canvas — dark-themed, branded, and developer-ready. Share them with your team without any extra work.Each spec sheet includes a cover with stats, visual token tables, live previews, and component usage examples. Spec sheets are placed automatically to the right of previously generated frames — no manual arrangement needed.❖ BUILT FOR REAL TEAMS• Tokens follow a strict primitive → semantic alias model — no hardcoded values in your semantic layer• All variable collections are named and numbered for predictable order (01 Primitives → 11 Layout)• Re-run any module at any time — existing collections are updated, not duplicated• Dark mode on Colors requires a Figma Professional plan or above• No account required, no external services — font previews load from Google Fonts (free, open-source)Built for design system teams who want production-ready token architecture from day one.