Design system
Turning a Figma file into a design system the whole organisation can use
Components existed. A system did not. GyanDhan had 384 component families spread across 41 Figma pages, 85 Rails ViewComponents and 212 un-componentised partials — all of it readable only by the designer who drew it. The work was consolidating that into one published system that engineers, PMs and marketing can build from without opening a design file.
--- 01 Problem
A file only its author could read
384 families in the file. Most were the same component re-drawn per page, eleven card families, four duplicate icon libraries, a dozen numbered Frame 12726… fragments. Nothing was named for search, nothing lived outside Figma. Every new page started by re-drawing what already existed.
--- 02 Approach
Count what exists before you draw anything new.
Three sources went into one audit: the Figma kit, Live Website, merged Rails components and unmerged input-component branch. Every family got a decision — consolidate, build, or skip with a reason.
Inventory
384 Figma families and 85 built components and 50+ website pages audit side by side, with real instance counts.
Consolidate
Eleven card families became one MasterCard family of eight presets.
Skip, with reasons
Raw shapes, bitmaps, device shells — logged as intentional skips, not oversights.
Fill the gaps
Charts, Pagination and Modal added against Blade, Carbon, Material 3 — components the Figma file never had.
Live Website Audit
Merged Component Imported From Codebase
--- 03 New in Claude
131 components - well past what Figma shipped
Charts, Modal, Pagination, Skeleton, Toast, and a full input-field standard didn't exist in the Figma file. Built here against real precedent, on the same tokens as everything migrated over.
Charts
DonutChart, TrendChart, GaugeChart — no chart family existed in the kit.
Overlays
Modal, Popup, AuthModal, FilterPanel — unspecced in Figma, built and documented here.
Feedback
Toast, Skeleton, EmptyState, AlertBar — filled from the shared-partials backlog.
--- 04 Live
Rendered from the Claude-built library, not a screenshot
Charts, Modal, Pagination, Skeleton, Toast, and a full input-field standard didn't exist in the Figma file. Built here against real precedent, on the same tokens as everything migrated over.
Interact with Design System here