Design system at Grieg Connect
Project lasted from 2020 to 2022
Shortly after starting my journey at Grieg Connect in October 2020 me and our Head of Design Sindre decided to use Figma instead of Adobe XD which has been used prior to me joining the team. That made the creation and the maintenance of our design system so much easier.
I was responsible for maintaining the UI side of the design system. Things like color styles had to be updated every time we started working on new products. Sub-components and Components also had to withstand the evolution of Figma’s functionality, we were happy to update our components when auto layout arrived.
How we started
We started out relying on the principles of Material Design. The development team had already picked the React library MUI prior to my start at the company. In the start when we still were testing the waters we relied heavily on the Material Stickersheet which was supported in Figma, that helped us form some of the foundational principles of where we were heading visually. I would just copy the components I needed for different projects, and then just duplicate and reuse frames and elements containing those components as necessary.
We needed a better way
I started off by creating what I called “Lo-Fi” sub-components as a test project, where I would use them in the wireframe stages of the projects I was working on to see what else I needed and what could be improved. I later learned which sub-components I definitely need in all of our designs and started setting them up.
I also created a collection of so called “Sci-Fi” components, we coined the name because it made sense for the use case, these designs were supposed to show a simple picture of our vision for sales, without getting into nitty gritty details.
After setting up the Sub-Components I started setting up bigger sets of Components, such as dialogs, drawers and modals. We utilised Figma’s Component Variants heavily and started testing out Component Properties a bit as well. Our UI system was never finished, I was always tweaking and updating it to our needs, keeping it alive, and it aided us very well.
Check out the videos below showcasing the structure of each file.
