In my journey of designing my app, I realised the importance of having a design system in place. A design system is essentially a set of guidelines, principles, and reusable components that are used to create a cohesive user interface across a range of products and platforms. I decided to create my own design system for my app, designing reusable components that would help accelerate my development and prototyping process.

The benefits of having a design system are numerous. Firstly, it allows for consistency and coherence in the design of the product. By having a set of predefined design elements, such as colours, typography, and icons, I was able to create a consistent look and feel throughout my app, ensuring that users have a seamless experience.

Secondly, it helps to speed up the design and development process. By creating a library of reusable components, I was able to save time by not having to redesign the same elements repeatedly. Instead, I could simply drop in a pre-designed component and focus on customizing it to fit the specific needs of my app.

Another benefit of a design system is that it ensures scalability. If my app grows and evolves, having a design system in place means that I can easily add new components or make changes to existing ones without worrying about disrupting the overall design consistency.

Below is my final design system for Circle, it includes a library of components that are interchangeable 👇

Component Library - for Notion.png

🔗 View my Components on Figma

Takeaways

Creating a design system for my app has been an invaluable experience. Through the process of designing reusable components, I learned a lot about Figma prototyping and feel more confident in building components for future projects. I also discovered the numerous benefits of having a design system, such as ensuring consistency, speeding up the design and development process, and ensuring scalability.