Building from the ground up
Icons have been taken out of the system, rebuilt in Figma and transformed in componants & vairants to use.
Most companies are now convinced that design systems increase efficiency in product development. With a consistent design language in place, it becomes easier to design products that are consistent in aesthetics, user interface, and user experience. Design systems also promote collaboration, since handoffs across teams become easier, as well as scaling.
In our case, the design team arrives way after the product is up and running. This year was time to reverse engineer a lot of patterns and enter as many elements as possible into the design system.
Typography
Working on a robust typescale was one of my priorities when I started working on Sciforma’s Design System. The challenge was to identify the few existing patterns we wanted to keep and create the missing pieces in order for the type scale to function. The goal was to have enough contrast between styles for them to find their use in specific layouts.
This work was inspired by Material Design and comes with internal guidelines that teams can follow when creating layouts.
Colors
The process with colors was very similar to the work done on typography: identifying the needs (a solid grey palette + main colors) and finding the best hues for a homogenous result.
We wanted the main colors to stand out (number fives) and needed a few tints for each of them. The result is a solid yet restrained palette, with all the necessary shades. Picking colors from the Design System helps create streamlined design and illustrations.
Objects and variants
It’s all about creating the object, giving it the right constraints, and making sure all the states are covered. Tedious to do, but so rewarding when done!