Migrating Your Project From Sketch to Figma

Posted on: MAY 07, 2020

Ever since we decided to go all-in on Figma, we knew that along with onboarding new clients directly into Figma, we would also need to support our existing clients' migration to Figma. Recently, we migrated one of our existing clients from Sketch to Figma.

The process that is needed to onboard a new client in Figma looks different than the process to migrate an existing client from Sketch into Figma. In this article, we are going to share the process that we used at AMSD, to make this migration a success. This article will help those who are thinking about the transition and prepare you for what's involved. 😎

Note: Before deciding to migrate your project please consider evaluating your decision thoroughly to see if this is the right move for you and your team. Going backward is not very easy since Sketch does not import .fig files. However, here is one tool that you might find helpful if you are taking this on.

Find Your Motivation❓

Here are a few common reasons why you would want to switch from Sketch to Figma.

• You might be looking for an easy one-stop solution when it comes to collaborating with the developers as well as the clients which are still missing in Sketch.
• The cost might be a valid factor for you and your team.
• You might find a need to consolidate your workflow by having 3 tools in 1. Sketch + inVision + Zeplin. In the pre-Figma world, this combo was a hit. For any designer, the ability to work jointly in Sketch and Zeplin was a standard requirement. But Figma brought together the best of everything into the world of design.

Let's look at the Figma advantages:

• Works on all platforms (a browser-based tool)
• It includes collaboration features
• It has a free plan, to get started
• it is always up-to-date (being a browser tool)
• It saves files in the cloud

For this particular client project, we were using 2 tools, Sketch + Zeplin. Figma's collaboration features and ease of file sharing are the main two reasons we were motivated to consider this move from Sketch to Figma. A huge advantage of Figma's browser-based approach is that everybody, developers foremost, can open a design and inspect it right away, with no third-party tool needed.

We recommend Figma to our clients because we want them to have the smoothest workflow possible. Needless to say that we were super thrilled when our client said that they are ready to move to Figma. 🎉

Here are all the steps we took for the migration.

Step 1: Importing Sketch File into Figma

Step 2: Cleaning and organizing files

Step 3: Figma File Organization

Figma has a great import feature for Sketch documents. We had to clean up our file later, but that wasn't a big mess and the effort is worth it. There are 2 options for the import.

1. Drag and drop the Sketch file into the Figma file space.
2. Import via the toolbar.

Importing VS. Rebuilding

Figma does a great job of importing most of the elements. Ungrouping them before making the import definitely helped. We found that there were some elements that did not get imported completely. But there is a fairly quick workaround for this. There are 2 ways to tackle this.

• One way is to recreate those from scratch. Taking this approach will also help you practice the tool which is a great thing. 😉
• Another way is to export those screens individually as SVG's and then drop them into Figma. We lost some text styles along the way, but they were easily fixable.

Once we had the file imported, now it was time for some tidying up.

There are a few key differences to keep in mind. These are important to know at this point because, during migration, simple elements like icons will get transferred very easily. However, for some complex elements like components, nested symbols, etc. we will need to have to build them from scratch once everything is in Figma. In order to do that, we first need to know how some concepts work differently in both tools. So let's tackle those one at a time 💪🏽

• Symbols in Sketch are components in Figma
• Artboards in Sketch are Frames in Figma
• Libraries and how they work differently

⚡️Symbols in Sketch are components in Figma

In Sketch, symbols are a great way to reuse elements throughout all your design files. In Figma, we have something similar called components. They are mostly the same with a few differences.

In Sketch you can use Symbol Overrides to edit text or swap out nested symbols. But if you want to change anything else — say, text size, border weight, or background color — you’d have to Detach from Symbol and create a slightly different version of the same UI element.

In contrast, Figma lets you manipulate the instances of your components directly on the canvas. If you want to override the color of the button in an instance, you can just change the color. No need to navigate to the overrides panel to make a small change. This process is more flexible and makes creating/editing components much simpler. Whenever we change a property of a layer in the master component, those changes will only get propagated to instances for which that property hasn’t already been overridden.

‍

Another benefit is that the main component and their instances can live on the same page. This makes creating and editing components much easier because you can see in context how the changes affect all of the instances. Once you are done, usually it is a good idea to move the main components and organize them on a separate page. That way you can control the edit permissions for the design system that you will be sharing with the client's team later on in the process.

‍

⚡️Artboards in Sketch are Frames in Figma

In Figma, we have a parent object called a frame. Similar to artboards in Sketch, frames are used to contain content. However, unlike artboards, frames have default constraints and can be nested within each other.

⚡️Libraries and how they work differently

In Sketch, libraries are just .sketch files that we can specify as a library within the preferences panel. Then you can access the symbols contained within that Sketch file in other files.

The team library in Figma allows us to publish the components, and then access them across different files and projects. Unlike Sketch, when we create a library in Figma we publish only the components from the file (not other elements). In fact, we can specify exactly which components we want to publish.

In Figma, it's important to note that a team library is a paid feature that's part of a professional plan. You can still create components on the free Starter plan, you just can't access them across different files.

You'll improve your workflow with components a lot by taking advantage of Figma's library functionality, especially if you're part of a team.

To get started with publishing components, go to the Assets tab (in the left-hand layers panel in Figma) and then click on the Team Library button. Here you'll see the name of your file and a publish button.

This was the most exciting part of the process! There are a zillion different approaches when it comes to how can files be organized in Figma.

We came across a few good templates of how other design teams have been organizing their projects within Figma. One, in particular, caught our attention was a Shopify template. We did not follow the entire structure shown in this template but decided to borrow mainly the cover style. This template creates a predictable structure which makes navigating between files very simple and visually pleasing. You can grab the template here.

We have 4 tips that we want to share with you when it comes to organizing a project inside Figma.

1. Think about the Figma file structure.
2. Thumbnails are customizable, make them visually appealing.
3. Create a file template for a quick start.

⚡️ Think about the Figma file structure.

It's very important to have a clear hierarchy in mind for the project at hand so that everyone on your team can follow the same logic.

Here is an example of how we handled this for one of our clients. For this client, we were working on 3 projects. We created a new team and 3 projects within it.

Inside each project, we have multiple files.

Inside each file, we decided to have multiple pages to break down those files even further.

‍

We created different sections to organize the pages within, based on different stages of the design process.

The main sections that we defined are:

• Development Ready - Include the designs that are ready for developers
• Working Designs - Include the designs that we designers are iterating on
• Low Fidelity- Include designs that are in the exploratory phase like moodboards, wireframes etc.
• Mini Archive - Include designs that we have tried and decided to keep aside and not take forward in the process
• Future Thinking - Include designs/ ideas that we want to explore more in the future.

We then created individual pages under these sections. As we keep progressing through the project we can move the pages into the relevant sections. This keeps the file organized and easy to share with the client for feedback.

⚡️Thumbnails are customizable, make them visually appealing.

When you have multiple files within a project, it only makes sense to have some kind of categorization among them. For this project, we decided to split the files based on each feature of the project.

The cover of each file is the most important aspect when it comes to making them visually distinct from one another. Here we took the inspiration from Shopify in how the cover will look like, but we swapped the Get Sh*t Done (GSD) framework to show the design phase that a particular file is in. By doing so, anybody on the team can quickly understand what phase the project is in and it becomes visually very clear what to expect when you open this file.

‍

⚡️Creating a file template for a quick start.

Having a template to work off of is always a good idea while working on a project in Figma. This helps us save time in having to design it every time from scratch. We created a basic template that can be used every time we have a new feature to design. All we have to do is simply duplicate this file, change the title and we are ready to go!

‍

Conclusion 🎉

Now, that our client has been completely migrated into Figma, our design process is more efficient and collaborative than ever before. We at AMSD, make sure that the developers and the stakeholders do get quickly acclimatize to Figma. We have our own tools to make sure that this transition happens as quickly and as smoothly as possible. Do you want to know more about how we quickly onboard the entire team to Figma? Get in touch!