FUPS
Design System
2022
I have been working at FUPS as the designer responsible for Design Systems for 2 years. Within FUPS, our team structure was as follows:
1x Director
1x Team Lead
1x Design System Designer
3x Senior Product Designers
2x UX Researchers
Transition from Sketch to Figma
When I joined FUPS, I migrated all projects from Sketch to Figma. Due to differences in component structures between Sketch and Figma, I created a new component library. Additionally, I established some basic rules for consistent naming of Artboards and the use of Auto Layout to ensure easier usage.
Bank Project
After transitioning to Figma, our entire team focused all our attention on the bank project. The bank was a completely different project with needs very different from e-money. Therefore, instead of continuing with the Design System we created for E-Money, we decided to create a new Design System.
Dark Mode
When Figma introduced the Variables feature, we started discussing Dark Mode. As soon as the Variables feature went live after the Config event, we transferred all colors defined as Styles to Variables. Along with this, we defined the counterparts for Dark Mode. Today, a screen that we work on in standard Light Mode can be switched to Dark Mode with a single click.
Increasing Project Count
While the bank project was ongoing, different requests started coming in from business units. We addressed these requests over time, and today we have 16 different projects within FUPS that the design team is responsible for, all of which are fully dependent on Design Systems. Apart from the bank and e-money, these 16 projects also include panel projects used by FUPS employees. As the number of projects increased, the Design System grew and some challenges emerged.
Initially, since the panel projects came specifically for the bank, we decided to feed these projects from the Bank Design System. Later, as the number of panel projects increased and their needs became very different, we started needing smaller standard sizes for almost all components. This led to increased management costs.
One of the most critical points was that panel projects also started coming in for E-Money outside of the bank. At this point, we decided that the Bank Design System would not suffice and decided to create a separate Design System for panel projects.
In this way, within FUPS, we have 3 different Design Systems: first for e-money, then for the bank, and finally for panel projects.
Documentation
Recently, I have been working on documenting 3 different Design Systems to share on a website for designers and developers. This documentation will include usage details, variants, correct and incorrect usage examples, and code counterparts for the components.