Compos

About this plugin

ComposA design system that builds itself, from inside your fileCompos doesn't hand you a static UI kit — it scaffolds a real token Foundation (Primitives → Semantic Tokens) in your file, then generates production-ready components bound to those tokens. Change a token later and every component, pattern, and template built from it updates with it.Builds your Foundation first.One click creates 7 real Variable Collections — Primitives, Semantic Tokens, Icons, Typography, Grid, Layout Gap, Motion — with Light/Dark mode and 4 responsive breakpoints (Mobile/Tablet/Desktop/Large Desktop) baked in.Everything is token-bound, not just styled to match.Every component, pattern, and template binds directly to your Semantic Tokens — no hardcoded hex values or magic numbers hiding underneath.3 layers, one system.Atoms (41 core components) combine into Patterns (12 reusable blocks), which combine into Templates (21 full screens) — all traceable back to the same Foundation.Multiple brands, one file.Add a brand by name and a single color — Compos generates its full tinted palette and adds it as a new Light/Dark mode pair alongside your default theme, no manual token duplication.Guided Picker.Select any layer and see only the tokens that actually apply to it, complete with a live WCAG contrast rating — pick one to bind it instantly, no digging through Fill/Layout panels.Linter with auto-fix.Scans your page for hardcoded fills, radius, padding, and font sizes that skipped the token system, jumps you straight to the layer, and can rebind it to the closest matching token in one click.Overview for non-designers.A plain-language snapshot of what's ready to use — screens and components with thumbnails, no tokens or jargon — built for PMs and stakeholders checking progress.History, built in.Every Foundation/Component/Pattern/Brand run in the file is logged with a timestamp, so you always know what changed and when.Export real code.Turn your tokens into CSS, Tailwind, shadcn/ui, SCSS, Swift, Kotlin, React Native, Flutter, JSON, a shareable HTML styleguide, or a Figma Code Connect scaffold — one click, ready to hand to a developer.Built for the designer still learning the system, not just the ones who already know it.What's inside?FoundationPrimitives, Semantic Tokens, Icons, Typography, Grid, Layout Gap, MotionLight/Dark mode + 4 responsive breakpointsUnlimited additional brand themes, generated from a single color eachAtoms (41)Icon · Divider · Status Dot · Avatar · Product Thumbnail · Button · Icon Button · Input Field · Badge · Segment Item · Segmented Control · Tab Item · Breadcrumb · Pagination · Tooltip · Progress Bar · Alert · Date Cell · Date Picker · Date Range Picker · Checkbox · Radio Item · Radio Group · Switch · Select · Multi Select · Textarea · Search Field · Stepper · Validation Message · File Upload · Image Upload · Slider · Label · Skeleton Loading · Time Picker · Popover · Toast · Menu Item · Menu · TablePatterns (12)List Item · Card · Toolbar · Stat Card · Navbar · Pricing Card · Sidebar Nav · Form Field · Empty State · Modal · Bottom Tab Bar · Mobile HeaderTemplates (21)Login Form · Sign Up · Forgot Password · List Screen · Card Grid · Booking · Dashboard · Pricing Page · Settings Screen · Empty State Screen · Data Table Screen · Notifications Screen · Landing Page · Mobile Onboarding · Mobile Login · Mobile Sign Up · Mobile Home Feed · Mobile Profile · Mobile Settings · Mobile Chat List · Mobile Product DetailToolsGuided Picker (with WCAG contrast) · Linter (with auto-fix) · Overview · History · Export Code (Web / Tailwind / shadcn/ui / SCSS / iOS / Android / React Native / Flutter / JSON / Styleguide HTML / Figma Code Connect)Free vs ProFree gives you unlimited use of Compose (Foundation, Component, Pattern & Template) up to 5 actions total, plus the Styleguide HTML export with no limit. Pro removes the action cap and unlocks every other export format plus multi-brand support (Add Brand).