Flare
Bitso's design system.
1 of 6
The challenge
Bitso been an international brand, there was a need Improve the visual, content, brand, and functional consistency across products and platforms.
2 of 6
The basics
The first thing we needed to do was stablish our foundations.
These foundations represent Bitso's Design Language through basic guidelines for designers and developers to make informed decisions about style. One highlight from this is that, for colors, we organized them into theme-like structure so you could change between them really easily in every platform.
3 of 6
The components
Once the foundations were stablished, we started creating components for the mobile app and for the website. Each one following the best practices and our component guidelines.
4 of 6
Flare inspector
The Flare inspector was a Figma plugin I created to increase the adoption of the design systems on other squads, it can tell you what are the things that does not align with the design system guidelines and how to correct them.
5 of 6
Galileo
Mantaining a Design system is not easy, so I also created a service that uses data in a spreadsheet to automatically update our code base, our documentation and it also conects to a Figma plugin so you can get updates libraries really easy.
6 of 6
Final thougths
Flare was an incredible challenge about scaling a Design system to serve different teams with on different platforms, each one with it's own little identity that branches from the main brand.