Design System
Migrating from Sketch to Figma
Overview
The company was using Sketch as its primary design tool. To improve workflow efficiency and consistency across multiple systems, 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 new system was based on the existing one rather than being built from scratch.
Due to limited capacity and time constraints, the migration was expected to take time, resulting in a temporary overlap between the old and new design systems within the product.
Role & Contribution
I played a key role in maintaining the accuracy and consistency of the design system:
-
Ensuring Design Accuracy– Refined existing components to maintain consistency across products and created new components as needed for ongoing projects.
-
Contributed to migrating- Helped migrate existing projects from Sketch to Figma, making the necessary design adjustments to replace outdated components that were not included in the new design system.
-
Identifying & Fixing Issues– Identified and resolved inconsistencies in component behavior, styles, and functionality
-
Collaborating with Developers– Worked closely with the development team to address implementation gaps. Components were developed in Storybook, which I reviewed to ensure alignment with the design system. We held weekly meetings to review issues from both sides, using visual examples and detailed notes to clarify design intent and support accurate implementation.
Component inspection in Storybook
Issues & Solutions
Fields Flexibility– There was a lack of clarity around how flexible the field components should be. Although three size variations were defined, the developers initially implemented them with a fixed width. To address this, I added detailed size guidelines and notes to clarify the intended behavior and allow for proper adjustments.
.png)
Before
After identifying the issue, I defined the sizes for components in the design system that were missing specifications, including minimum and maximum width constraints. I also added detailed explanations to the developer notes to clarify the intended behavior and support accurate implementation.
.png)
Color Adjustments
I contributed to defining the new color palette based on Material Design guidelines, while adapting it to the product's needs. The color system went through several iterations before the final UI was established.
Challenge
Disabled buttons appeared too light in the actual product. While they looked appropriate within the design system, they did not provide enough contrast in the product interface.
Solution
-
Fine-tuned grayscale shades to improve visibility and contrast.
-
Adjusted button colors for both light and dark modes.
-
Updated local variables to maintain consistency across the system.
