What is Design System?
A design system is a comprehensive collection of guidelines, principles, components and resources that define and govern the design and development of a product or brand.
It serves as a centralized repository assets and documentation, providing a structured framework for creating cohesive, consistent and user-centered experiences across various digital touchpoints.
Why I started?
The idea was simple yet powerful - I wanted to create a design system for my personal projects, learn how to build it, and eventually offer it as a free, open-source resource for startups and small companies with limited design resources, allowing them to focus on building their products without worrying about design consistency. This journey would help me grow as a designer and give back to the community.
The Methodology - Atomic Design
To build the design system, I used the Atomic Design methodology. Atomic Design is a methodology for creating design systems that breaks down user interfaces into smaller, reusable components. These components are categorized into five levels: atoms, molecules, organisms, templates, and pages.
I built the design system step by step, starting with small elements (atoms), then combining them to create larger elements (molecules and organisms), and finally putting it all together to create entire pages. This structured approach ensured that each component was reusable and consistent throughout the design system.
Research and Inspiration
I began by researching existing design systems from Google. I studied Material Design System to understand their structure, components, and guidelines. This research phase was crucial as it provided me with a solid foundation and inspiration for my own design system.
To further deepen my understanding, I also undertook the "Introduction to Design Systems" course provided by Figma. This course was incredibly insightful, offering practical knowledge and tips on building and maintaining design systems.
The Core Principles
With a clear understanding of what makes a great design system, I defined the core principles for my project:
Building the Foundations
I started by setting up the basic structure of the design system. This included:
Typography: Defining a set of fonts and typographic scales.
Color Palette: Choosing a versatile color palette that could be adapted for different projects.
Spacing and Layout: Creating guidelines for spacing, grid systems, and layout.
Creating Components
With the foundations in place, I moved on to creating individual components. These included buttons, forms, navigation bars, modals, and more. Each component was designed with consistency and reusability in mind.
The design system is a big project, and I'm still working on it during weekends. It’s not yet complete, but I’m getting closer every day. Very soon, I’ll make it available online. If you have any feedback or are interested in collaborating, please contact me. Building a design system takes time, but I’m excited about the progress and what’s to come.
