A design system is a complete library of ready-to-use components and styles (Text, colours, spacing, etc.) that make up a product or, in some cases, all of an organisation’s products. It ensures consistency of visual style as well as interaction, making a product easier for users to complete their tasks, without needing to relearn different patterns throughout the product.
Design Systems have gained increased popularity over recent years, with most major organisations having implemented or looking to implement them. As we move into the era of AI design tools, the design system will likely become even more important as it will set the visual rules that the model must obey, as well as the components it should use.
My product will contain components that I will reuse; it makes sense to create a component library so I can design each component once and use it as often as required. I also want to go one step further and create a design system, which will not include only my components, but my colour palette, typography and spacing values all contained within a single Figma file and published as a library, so they can be used across any of my design files.
While my design system will not be as large or all-encompassing as an enterprise product, it will still offer many advantages for the consistency and professionalism of my product. It will also increase my skills in the vital area of design systems, which is a key skill for employment within the current design industry.
Building a design system from scratch is a huge undertaking, designing all the components needed across your product, making every design decision for each one. Including padding, shadow size, shape, etc. I do not have time to go into the detail required on each component to ensure they meet all the requirements, so I have decided to base my design system on an existing, publicly available design system, Google Material Design. This is not an uncommon practice, with many companies reaching for off-the-shelf solutions that they can then modify to their needs.
As I had already defined my colour palette as part of my brand for this project, I needed to set up the required colour styles within Figma, and once I published the library, they would be available across my design files. This didn’t take long, and I split the colours into light and dark modes. Before adding names, such as text and background, the name represented the intended use of the colour.
Similar to my colour palette, adding the typography rules I had already defined for my brand was a case of creating the required text styles and publishing the library. Again, I used a naming approach that indicated the use of the text style. Often, organisations with large design systems will name these to align with their token names in the code library, but this is not necessary for this project, given the significantly smaller size of the final product.
To add my spacing values, I needed to create Figma variables to cover the range of spacing sizes I would need. This is similar to adding a colour or text style, so it was not a difficult task, and I simply named the values from small to x-large for simplicity when creating the mocks.
While the Material Design 3 kit on Figma provided all the components I required, the included icon set did not have all the icons I would need. Therefore, I needed to find another Icon set which provided a larger selection of icons. I found the Huge Icons library containing over 4000 icons, which has an icon for every eventuality. I knew I wouldn’t need all of these icons, so I went through the library picking out the icons I needed to add to my design system. This keeps my design system lightweight and will make it much easier when I come to build my hi-fi mocks, as I won’t have to search through hundreds of icons to find what I need.
