Figma

Figma is where every digital project starts — wireframes, component libraries, and high-fidelity comps before a single line of code is written. The TOAKS design system lives in Figma as a shared library: typography scales, color tokens, spacing systems, and reusable components that map directly to what gets built.

Code Connect closes the gap between design and production. Components in the Figma library are linked to their code equivalents, so when Claude Code reads a design file it's working with the same tokens and component names that exist in the codebase. The handoff doesn't break.

For client work, Figma handles the presentation layer — prototypes that behave like the real thing, stakeholder review links, and annotated specs. It keeps design decisions visible and reversible before they become build decisions.