MenuClose
Sketch to Figma
A Case Study Of Migrating Design System
Initial conditions
A medium size IT company developing products and services for mobile operators. Design team of 15+ members using Sketch as the main design tool and Zeplin for interacting with developers.
MegaFon operator component library built in Sketch and containing over 450 symbols. Dozens of design files linked to it.
Objective
Migrate the team from Sketch to Figma along with all of the projects. Transform the library into a full-scaled design system.
I made the decision to manually reconstruct the library block by block instead of porting it directly to Figma. I started by developing a simple the two-level hierarchy of font and color styles instead of multi-level system used in Sketch.
Unlike Sketch, Figma allows you to create more flexible components using Auto Layout. Components in Figma differ from Symbols in Sketch in a more complex architecture, while becoming simpler and more versatile in use.
Thanks to Auto Layout, all components allow quite flexible customization of their appearance and content, while remaining tied to the original library.
The work on this project coincided with the release of the Figma Variants feature, which allowed me to turn such complex component as Button or Text field, which used to have dozens of different options and states, into a single component with visual state settings.
When developing the library, I was guided by the three principles of programming: Inheritance, Encapsulation and Polymorphism. Complex components with dozens of variations inherit their properties and structure from a single base elements. All buttons are derivatives of one Basic Button, and all text fields variations are derivatives of one universal Mega-Field. If one day in the future you need to change the structure of all kinds of buttons, you will need to do it in just one place.
These principles allowed me to take into account all the nuances and implement a more flexible structure for such responsive components as Header, Footer, Menu, etc. All these components could now be easily resized, and the transition through the breakpoints could be made with just one click of the mouse.
A usage guide was written for each component. It allows developers and fresh designers to quickly dig into the library and component structure.
As a result we have a Figma library that differs from original one in Sketch in its visibility, flexibility, and ease of use.
The front-end team implemented each element in code, which made it possible to significantly speed up the development process, from wireframes to a finished product. Now designers and developers use the same blocks to build interfaces, only in different environments.
