Migrating to Figma: the why, the how, the challenges
This is the story of why we chose Figma over Sketch, how we migrated from Sketch to Figma. The journey, plugins, challenges, and so on.
Figma is probably familiar to anyone involved in digital products. From brainstorming and ideation to delivering to the development team, it provides collaborative tools to help us complete the product development cycle.
As I write this, several months have passed since the complete migration to Figma in the UX Design and UX Engineering chapter on Divar UX Guild*, and we got inspired to write about it to the public to help others make decisions.
Azadeh Aghaei explains in detail about the UX Guild here.
In the last two years, most teams and designers (at least those who polled on uxtools.co) chose Figma as their primary tool for various reasons, ranging from the features of the same tools to the needs and preferences of each team. In another article, I might take a closer look at a comparison of some well-known competitors in this field, independent of the requirements we had in our team.
So let’s talk about “Why” we chose Figma as our primary tool for designing user interfaces and delivering them to our development team, as well as “How” we migrated to it.
The Why
The increasing number of issues with Sketch
“Sketch” had problems synchronizing libraries that became much more serious since version 70. The connection between the component and its library was mysteriously lost in files that inherited their components from the library (the famous and curious case of Missing Symbols).
Even though they tried to fix it in the updates, it continued to occur. Each time, all the components having problems had to be manually reconnected to the library, wasting time and energy that could have been spent on solving the problem.
Sometimes it caused the delivered design to be less accurate; some components or color and other overrides were removed.
Delivering to the dev team
We used Zeplin for transferring design assets to the development team and Overflow to deliver the flows. Problems such as performance issues on Overflow or server-side problems with the Zeplin led us to look for better tools.
In addition, the variety of tools itself was annoying, especially since each time after the changes, the information had to be synchronized with others, and the problems in that part slowed us down even more. For example, syncing large sketches with Zeplin would require separating large sketch files.
Sketch was no longer the only tool
Until a few years ago, Sketch was the primary tool for user interface design, and many of the designers who joined our team had previously used Sketch. Things had changed, and new fellow designers were more familiar with Figma.
Figma better met our needs
Although Sketch added features for easier collaboration, the process was much better and more mature in Figma, and those problems mentioned earlier were not in Figma. In addition, more tools were provided, making both the design process and communication with developers easier. (Eg, variants, auto-layout, a large and active community, consequently more helpful updates).
Costs
The total amount per editor in Figma was less than what we had to pay for the Sketch and accessories. Moreover, Overflow changed its pricing plans, which made it expensive for teams of many developers.
In our view, Figma had a brighter future
As a result of a roadmap and features of Figma, its growth curve, strong recruiting, and five series of capital acquisitions (the last one being by Andreessen Horowitz in 2020), we found Figma as the better choice. Let’s take a look at some recent survey statistics from the design community:
It was the proper time to migrate
Each team had a design representative familiar with Figma. On the other hand, the UXE chapter was ready to help speed up file transfers and build tools. Moreover, we also had time to migrate based on the team plans and projects.
Although Figma had some limitations or issues, they were either solvable or negligible, like RTL support.
The How
Fortunately, Figma was capable of importing sketch files. However, unfortunately, the results were not very good. Components could not be attached to a library because you could not import a file as a library. Color styles or overrides were sometimes imported incorrectly due to differences in their structure. It was not possible to import prototypes and interactions.
So, before importing all the files, we searched and tested various tools to convert sketch files to Figma, but each had its drawbacks. The best of these was xd2sketch, recently renamed Magicul. It offered to convert files for a fee, but it still wasn’t what we wanted. (It may be better now)
In the end, we decided to import the Sketch files into Figma itself and then refine them. (The most important thing was to replace everything with similar components from our Figma library.)
Our migration route had three stations:
- Import and Refine
- We Imported the Sketch library to Figma and refined it based on Figma’s features. (Auto layout, Variant, etc.)
- We imported all the views and replaced everything with its component in the library. Almost every root item in our design files was an instance of a component, which we replaced with its library component using our custom plugin.
- Review by designers
- Designers checked the new Figma files, ensuring that everything was okay (Texts, Positions, etc.), and they fixed typos or missing components if needed.
- Set Interaction
- Interactions were set when needed.
The Challenges
RTL support and handoff
This was one of the primary reasons we hesitated to move to Figma. We had RTL PLZ Plugin to reverse texts as we typed, but the problem was this:
A good-looking RTL text in Figma is a reversed one.
Therefore, developers couldn’t easily copy texts as they had them in Zeplin.
We considered a few solutions, such as a JSON output representing the text and its relationships to the layers, thereby serving as a new vocabulary, but it costs the developers. Comments and component descriptions can also be used to keep original text accessible for developers, but they have some limitations, too. As another solution, we used Figma’s copy text feature, which was unused due to inverted texts, leading us to release the RTL PLZ Handoff Plugin.
This plugin puts the text of each layer as an invisible layer with the original not-inverted text in the same position, so when the developer tries to select the text and copy it, that invisible layer is selected, and the original text can be copied.
Since we had published the plugin before we considered a complete migration to Figma, this decision was easier.
Linking all instances to our Figma library
Rather than manually replacing each instance of a library component with a corresponding library component, we needed a tool that would automatically browse a file and replace every instance with the same library component.
So we created the FigLink plugin. At the very beginning, it simply stored a list of library components and browsed a file to replace an instance node with the same component name. After that, we improved it so that it could search across library components and replace any node with a corresponding library component while retaining the node texts.
Although Figma added switch libraries later, we still found the plugin helpful. In our case, even if the switch library feature had been available earlier, we would have also needed FigLink.
Flows Handoff (Inside Figma)
At that time (around July 2021), Figma did not show interaction arrows in the developers’ view, and they could not follow a flow visually. On the other hand, we would prefer to avoid third-party software as much as possible. So, we created ProToFlow, a plugin that automatically converts interactions into beautiful connectors that anyone can see. I will write more details about it another time.
Figma’s recent updates allow developers to view interactions on canvas by pressing Shift + E, so this part of converting interactions to connectors has been removed from the designers’ workflow.
Frames Annotations
As a way to keep track of the status of designs, we needed some tags to be attached to the frames. There were plugins, but still not what we wanted. This is why the FigTag plugin was created. It uses the Variant component power to tag frames. The designer provides the variant component (published in the library) as a tag, and the plugin places it on top of the selected frames. The frame tag can be changed in the plugin window or the variants section of the right sidebar without opening the plugin.
The migration was so exciting, and I learned a lot through technical and design challenges as well as problem-solving.
It is also interesting to note that from the very beginning, we considered releasing plugins to the community rather than as private plugins, so other Figma users could use them and help to improve them by feedback. As of today, Our plugins have been installed more than 30,000 times.
Last, if you are still hesitant, I, as a user who has been following Figma since the beginning, highly recommend Figma and suggest following other competitors like Framer.
