Design System
Migrating from Sketch to Figma
Overview
The company was using Sketch as its primary design tool. To improve workflow efficiency, ensure consistency across multiple systems, and adopt a more advanced design platform, the design team decided to migrate to Figma and build a new design system.
Since two existing systems (internal and external) were already built on the previous design system, the decision was made to base the new system on the existing one rather than starting from scratch. Due to limited capacity and time constraints, we anticipated that the implementation process would take time, leading to a temporary overlap between the old and new design systems within the product.
Role & Contribution
I have played a key role in the maintenance and accuracy of the design system:
-
Ensuring Design Accuracy– Refined components to align all products, and created new ones as needed for ongoing projects.
-
Contributed to migrating- moving existing projects from Sketch to Figma, ensuring a smooth transition while maintaining design consistency. Made necessary design adjustments to replace old components that were not included in the new design system.
-
Identifying & Fixing Issues– Raised and resolved inconsistencies in component behaviour, styles, and functionality.
-
Collaborating with Developers– Worked closely with the Dev team to address implementation gaps. Components were developed in Storybook, and I inspected them to ensure alignment with the design system. We held weekly meetings to review issues from both sides, providing visual samples and detailed notes to clarify design intent and ensure correct implementation by developers.
Component inspection in Storybook
Issues & Solutions
Fields Flexibility– There was a lack of clarity on how adjustable the fields components should be. Although three size variations were specified, developers built them with a fixed width. To resolve this, I added detailed notes with size guidelines to ensure clarity and allow for proper adjustments.
.png)
Before
After identifying the problem, I defined the sizes for all components in the design system that were missing specifications, setting minimum and maximum width constraints. I also provided an explanation in the developer notes to ensure clarity for implementation:
.png)
Color Adjustments- All colors in the new design system were updated. I contributed to defining the new color palette based on Material Design guidelines while ensuring adjustments aligned with the product’s needs. This process went through several iterations before finalizing the UI.
One of the challenges: Disabled buttons appeared too light, While they looked good in the design system, they lacked sufficient contrast in the actual product.
Solution-
-
Fine-tuned grayscale shades for better visibility.
-
Adjusted button colors for both light and dark modes.
-
Implemented updates in local variables to maintain consistency across the system.
