Design System Inspiration Library

To begin the process of designing my design system, I gathered inspiration from various websites such as Pinterest and Dribbble. I used Figma to create a file with multiple pages, including a Mood board, buttons, selection controls, and Forms. Each page was dedicated to a specific aspect of the design system, and I collected all the necessary screens and references to complete the design system. For instance, the Mood board page helped me structure and organize my components in the design system file, as well as choose the design style, typography, and color styles for the design system.

Buttons page: The buttons page of my design system file includes a collection of various button styles.

Selection controls page: The selection controls page includes radio buttons, checkboxes, and switch controls in multiple states and styles.

Text fields & Forms: The text fields & forms page includes all the necessary form elements and components, with multiple states and variants.

Navigation: The navigation page includes different types of navigation for both web and mobile applications, in various styles and screen sizes.

Cards: Finally, the cards page includes a collection of different types of cards, such as content cards and pricing cards.

This file is always a work in progress and it is my first go to place for all the process of the creation the design system. Every piece of inspiration will go there.