Building a Component System from Figma: From Design to Code with Ladle

Building a component system from Figma doesn't mean starting from scratch. The key is leveraging your existing UI library (in this case, Mantine) and building up complexity systematically using Ladle (or Storybook).

The Approach: Start Simple, Build Complex

Instead of recreating everything, start with basic components from your library:

• Select components (Mantine Select)
• Button styles
• Card layouts
• Typography and spacing

Then, in isolation using Ladle/Storybook, combine these into more complex components:

• Stat Cards → Built from basic cards and typography
• Energy Dashboards → Composed of multiple stat cards, charts, and progress indicators
• Building Cards → Complex layouts with data visualization
• CO2 Slides → Full dashboard views with multiple components

Why Ladle/Storybook?

Both Ladle and Storybook let you build components in isolation, but they have different approaches:

• Ladle: Lightweight, fast, and focused on React. Uses Vite under the hood for blazing-fast builds. Perfect for smaller teams or projects that want minimal setup.
• Storybook: More mature ecosystem with extensive addons, better documentation features, and support for multiple frameworks. Better for larger teams that need advanced features like accessibility testing, visual regression testing, and design tokens.

Both tools let you:

• Build components in isolation without the full app context
• Test variants and states quickly
• Document your design system visually
• Iterate faster with hot reload

The Result

Starting from basic Mantine components like Select and Button, you can build complex dashboards that match your Figma designs exactly. Each complex component is just a composition of simpler ones, tested and refined in isolation.

Explore the component system: View all components in Ladle

Examples

• Stat Card - Simple card component
• Energy Flow Dashboard - Complex dashboard with multiple components
• Building Cards - Advanced card layouts
• CO2 Slides - Full dashboard views

The workflow is simple: extract measurements from Figma, use your library's base components, compose them in Ladle, and iterate until it matches the design perfectly.