Built with Figma, Figma MCP, Cursor and MagicPath in a weekend. A solo end-to-end demonstration of what modern design-to-code workflow looks like in practice.
Button
A reusable React button family built from the current Figma button frames, including five semantic variants, three sizes, optional icons, and realistic implementation previews.
Tabs
Switch between sections with optional scroll arrows, icons beside labels, and a disabled state—documented in one interactive playground.
Input Field
Standard text input for most free-form entries with optional left or right icon, size and state controls, and implementation-ready code previews.
Dropdown
Selection input with a trailing chevron for controlled option lists, with size, state, and token reference specs.
Checkboxes
On/off choices for one setting or a related list where people can pick more than one option.
Radio buttons
Single-choice controls for one option at a time, shown alone, in a vertical list, or in a compact horizontal row.
Toggle
A switch that turns a setting on or off immediately, with playground controls for state and disabled.
Saturday started in Figma—every component, token, and variant defined once as the source of truth.
Figma MCP kept design tokens in sync with the repo; Cursor handled implementation and scaffolding; MagicPath helped on a few production surfaces. Together they became this doc site—one place for designers and engineers to share the same language.
