FIGMA
https://www.figma.com/design/yudyQFCPwX1FSLcXBXuVvY/Cathode-UI
What's inside
| Page | Contents |
|---|---|
Tokens | 5 Variable collections (Color with Dark + Light modes, Spacing, Size, Type, Motion) — 54 variables. Plus a visual swatch grid. |
Layout | TerminalFrame (5 variants), Card (10), HazardStripes (1). |
Forms | Button, TextField, TextArea, Select, Counter, Checkbox, Radio, Toggle, SearchBar, FormField, Chip — 39 variants across 11 sets. |
Data | Badge, Tag, Avatar, Kbd, DotLeader, Pill, CodeBlock, Table, StatusTile — 71 variants. |
Navigation | Tabs, Breadcrumbs, Menu, Pagination — 11 variants. |
Feedback | ProgressBar, Loader, Skeleton, PixelBar, ActivityBar, SignalBars, PulsingDot, Toast — 41 variants. |
Overlays | Dialog, Drawer, Popover, Tooltip — 11 variants. |
Misc | Stack, Accordion, Chat, ScanLine, TypewriterText, Countdown — 21 variants. |
Total: 8 pages · 45 component sets · 210 components/variants.
How it was built
The library was authored programmatically via the
Figma MCP server's
use_figma tool — which runs JavaScript against Figma's
Plugin API. No hand-crafting, no designer bottleneck. The same
tokens.json that drives the React CSS also drives the
Figma Variables, so the two stay in lockstep.
Scripts / process notes live in the Figma library section of implemented.md.
How to use it
- Open the library file in Figma and accept the "Enable variables" prompt.
- In your own Figma file, Libraries → enable "Cathode UI".
- Drag any component from the asset panel. Cathode Variables (color / spacing / type / motion) are available in variable pickers.
- To switch your mockup between Dark and Light, select the top-level page/frame and change Color mode in the right sidebar. Everything recolors because fills/strokes are bound to Variables, not hex values.
Static-Figma caveats
Figma is a static design tool; some Cathode behavior only exists in code. The library ships accurate at-rest representations of these, with notes on each component description:
- Animation-heavy primitives —
Loader,PulsingDot,TypewriterText,ScanLine,Countdown,Chat(streaming). Figma shows a single frame; the React version animates. - Composite overlays —
Menu,Popover,Tooltip,Drawer— ship as separate variants per open/closed state. Interaction in real use is handled bycreatePortal+ keyboard listeners in code. - ScanLine's repeating grid — Figma gradients can't truly tile like CSS
repeating-linear-gradient, so the grid layer is omitted. The sweeping beam is shown stationary.
Keeping it in sync
The library was built in one pass. Future primitive additions (or
token changes) don't auto-propagate — we regenerate the affected
components via use_figma when the React side changes.
Token renames are cheap because Variables are centrally updated;
geometry changes require editing the component.
Questions or feedback? The library lives at figma.com/design/yudyQFCPwX1FSLcXBXuVvY.