<aside> 👋
This, and all of the blogs, give an overview of the process and steps taken for each part. I’ve included images taken from the Figma File where the majority of the work lives to illustrate the process.
If you would still like to see further details on each part, please view the Figma File in full.
It can be found at the end of this page, or on this master page.
</aside>
I’ve spent time throughout the design side of this project developing a design system (or component library) for my product. While this isn’t a full walkthrough of how I did everything, this blog will give an overview of how and why I’ve set it up in this way.
I like to set up variables early on in projects as it ensures consistency and makes late stage changes far easier. While I’ve worked with more extensive variable sets, I kept things simple for this project, using just a colour, type, and spacing set. The colour set features all brand colours, with a core set for the main UI. The type set is set up with primary, secondary, and tertiary variables, although I only ended using one typeface. The spacing set defines the units I can using throughout my work, keeping things consistent.
I made extensive variant set for different versions and states of components, such as having default, active, and inactive states for all buttons. Although this is a lot of work, I try to create them when I need them, so there’s very little back working to add states when I get to prototyping. In the long run, this saved me a lot of time.
To structure my design system, I use a fairly standard system. Icons, assets, information, and inputs are all groups of small components that feed into blocks, which often use multiple instances within the main component. These blocks can then be arranged into stacks, which are patterns of repeated or grouped blocks that make up pages or screens.
I also created an area of frequently used screen templates or patterns, to make building flows easier. The primary ones here are the Queastion/Answer screens, as they are so frequently used for tasks. Building screens into this format worked really well and allowed me to build the system map and prototype really quickly as most of the ground work was already done.
