Design System Showcase

I followed Brad Frost's Atomic Design framework, a methodology for creating design systems by breaking down user interfaces into a hierarchy of components: atoms, molecules, organisms, templates, and pages. It's a way to think about UI development in a modular and scalable manner, starting with the smallest elements and building up to complex interfaces.

This embedded Figma file is fully interactive. You can explore the design system using the following controls:

Top-left (Dropdown Menu): Click to view and navigate between all pages of the file (e.g., Colors, Typography, Buttons, Inputs, etc.).

Top-right (Fullscreen): Click to open the file in fullscreen mode for a better viewing experience.

Bottom-left (Open in Figma): Opens the file directly in Figma (either in your browser or the Figma desktop app).

Bottom-right (+ / – Zoom): Use these buttons to zoom in or out of the file.

Feel free to navigate through the pages to explore the complete design system, built following the Atomic Design methodology.