CHASSIS FIGMA
Tokenized Figma Components with Built-In Documentation
30+ UI components, swappable asset layers, and documentation templates—all driven by Figma Variables that sync directly with production tokens via Tokens Studio.
Complete Design System Foundation
A Figma library system with tokenized components, swappable content assets, and documentation guides—structured for multi-brand theming from day one.
30+ Components with Variants
Buttons, forms, navigation, modals, tables, and mobile patterns. Each component ships with documented variants, interactive states, and auto-layout for responsive behavior.
Token-Driven Theming
All visual properties reference Figma Variables organized into brand, theme, and app layers. Switch color modes or create new brand themes by editing variable collections—no component changes needed.
Design-to-Code Token Parity
Component tokens map 1:1 to Chassis CSS and Chassis Tokens output. Named properties and specs tabs give developers exact values, states, and responsive breakpoints.
Beyond the Component Library
Components for building interfaces. Assets for flexible content. Documentation tools for specs and handoff. All token-driven, all in sync.
30+ UI Components
Each component ships as a single Figma file (cx.comp.*) with variants, interactive states, and auto-layout. Props, specs, tokens, and variant tabs are documented inline.
3-Layer Variable Architecture
Brand variables define identity (colors, type, radii). Theme variables control modes (light/dark). App variables style components. Change any layer without touching the others.
Swappable Asset Layers
Text blocks, icons, backgrounds, and skeleton loaders are separate asset instances inside components. Swap content by replacing the asset—the component stays connected to the library.
Guide Library for Documentation
Document covers, grid overlays, spacing scales, sitemap builders, user flow diagrams, and spec annotation tools. Build design documentation inside Figma using structured guide components.
Multi-Mode Color Tokens
Theme variables define light and dark palettes as separate modes in the same variable collection. Switch modes per frame or per page—components update without manual recoloring.
Auto-Layout with Breakpoint Variants
Components use auto-layout for fluid sizing. Mobile navigation (bottom nav, top nav), responsive tables, and layout sections include device-specific variants you can toggle via properties.
From Figma Community to First Component
Duplicate from Figma Community, publish libraries to your team, and start inserting components.
Duplicate & Publish Libraries
Duplicate the Chassis library files from Figma Community. Publish them to your team workspace so all members can enable the component, asset, and guide libraries.
Chassis Library Files
├── cx.tokens.* → Variable collections
├── cx.comp.* → UI components
├── cx.asset.* → Content assets
├── cx.guide.* → Documentation
└── cx.template.* → Page templatesConfigure Variables
The token library includes brand, theme, and app variable collections. Select a color mode, adjust brand values, or connect Tokens Studio for bidirectional sync with your codebase.
cx.tokens.* Variables
├── Brand → Colors, type, radii
├── Theme → Light / Dark modes
├── App → Component-level tokens
└── Sync
├── Tokens Studio ↔ Git
└── Figma Variables (native)Insert & Customize
Drag components from the assets panel. Override text, toggle boolean properties, select variants, and swap asset instances. Library updates propagate to all instances across files.
Component Instance
├── Variant → Size, style, state
├── Properties → Show/hide, labels
├── Asset Swaps → Icon, background, text
└── Tokens → Inherited from variables
└── Override per-instance if needed