Winden Tokens - Design System ToolKit

About this plugin

A powerful Figma plugin for managing design tokens (variables) with advanced features for color generation, scale management, visual relationship editing, and bulk operations.Gives you the ability to manage Design Tokens with a spreadsheet-style interface for fast bulk editing. Generate complete color shade palettes with advanced Bezier curve controls, define number scales with preset ratios, and visualize token relationships through interactive node graphs—all from one unified tool.Create and update your tokens using the intuitive UI or import/export via JSON. Modify multiple values simultaneously, create variable aliases with {variableName} syntax, see how colors and numbers connect through visual node editors, and ensure your color combinations meet accessibility standards.Supported FeaturesColor ManagementComplete shade palette generation (50-900) from any base colorAdvanced Bezier curve editor for lightness, saturation, and hue controlReal-time contrast checking against WCAG 2.1 guidelinesNumber ScalesDefine mathematical ratios for design system progression (typography, spacing, sizing)Preset ratios: Minor Third, Major Third, Perfect Fourth, Golden Ratio, and morePreset naming: T-shirt sizes (xs-3xl), Numeric (1-10), Gutenberg, or customBulk EditingSpreadsheet-style interface for simultaneous token editingSelect, modify, and update values across entire collectionsJSON editor for batch imports and exportsNode ColorsVisual node graph showing color variable relationshipsDrag connection points to create or remove variable aliasesGroup-based layout with draggable headers for organizationPan/zoom controls with keyboard shortcutsNode NumbersVisual node graph for numeric (FLOAT) variable relationshipsSame powerful interface as Node Colors for spacing, sizing, and typography tokensTrace references and dependencies at a glanceVariable AliasingReference tokens with {variableName} syntaxCreate semantic color and number tokens that point to primitivesVisual connection lines show alias relationshipsAccessibilityAutomatic contrast ratio calculationForeground/background color pair verificationWCAG 2.1 compliance indicatorsVariable TypesSupports all Figma variable types:COLOR — displayed as rgb()/rgba() in UIFLOAT — numeric valuesSTRING — text valuesBOOLEAN — true/falseUsage GuideCreate tokens — Use the spreadsheet interface to add new variables to your collectionsGenerate shades — Select a base color and fine-tune with Bezier curves for lightness, saturation, and hueGenerate scales — Create number progressions with preset or custom ratios for typography and spacingBulk edit — Select multiple tokens and modify values in one operationCheck contrast — Verify color pairs meet accessibility requirementsNode Colors — Visualize and edit color relationships by dragging connections between variablesNode Numbers — Same visual editing for numeric tokens—spacing, sizing, typography scalesExport/Import — Use the JSON editor for batch updates or external syncGetting StartedAfter installing the plugin, access it via Plugins menu in Figma. Import your existing variables or create new collections from scratch.Open SourceThis plugin is open source! Feel free to contribute, report issues, or suggest features at https://github.com/krstivoja/winden-tokens