Design System Showcase
Ahkam Khan
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.
Brad Frost - Atomic Design
How to Explore the Figma File
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.
Like this project
Posted Aug 15, 2025
Experienced in creating end-to-end design systems, as showcased in this Figma file.
Likes
0
Views
21
