A couple of weeks ago, we published an article that provided tips on making a smooth migration from Zeplin to Figma for developers.

In the design team, we changed the whole workflow from Sketch to the Figma. It was an agreement across the entire agency and in coordination with the clients and management.

We did it step by step, it took some time, but now we are ready to share knowledge and help others make the transition.

When you need to make the switch, Figma provides great import from the Sketch file. You need to clean up your file later, but it’s not such a big mess and the effort is worth it.

The first step to take is to create a new project in your Team File. You can invite Project Managers and Developers to the project so they can see the file. You can invite clients as well. If you prefer, it’s possible to limit access only to the people invited to the file.

First of all, if you haven’t, save your Sketch file locally from Abstract, if it’s stored there. Then open up Figma and create a new document. Next, go to File → New from Sketch File. After you choose that, it will take some time for Figma to transfer your file.

Now that your file is transferred, it’s time for some file organizing and cleaning up.

The Library is the first thing you need to create or edit. If you are confused, Library is actually a Symbols page in Sketch, only stored in another document connected to your working file. In Library, you can also create your colors & typography style guides.

Figma uses Components over Symbols that can be reused across your designs. When you reuse them, they are called Instances. You can differentiate them by their Symbols. Also, you access Instances in the Assets panel.

Depending on the size of your file or the preferred workflow, you can create Library inside your file or create a separate one. As you once had the Symbols page in Sketch, you now automatically have Library page inside your file.

For a smaller project, you can integrate the Library inside the same work file. In that case, there is no need to do a separated file. A major reason we did a separated library file was because of the project size and scope.

When you import the file from Sketch, everything is just one file. How can you create separated a Library file with an imported file?

Firstly, open your transferred file and go to Assets → Team Library and then click on Publish. Now, click on Move to Team Library and choose your team. The next step is to add some description if you want, then click on Publish and there is your Library.

Now that you published the Library, go to File → New. You need to create a new file in which you will copy all your screens from library Page by Page, and only leave Symbols page in Library that will consist of all your Components.

But if you want this to work, first you must connect your New File with Library. To connect it, in your new file go to Assets → Team Library and activate the library you published a minute ago.

Finally, it’s time to copy & paste. In New File, create New Page and start copying your screens Page by Page.

When you copy the first Page choose one screen and click on your Instance, ex Symbol. Then right click and choose Go To Master Component. If you are automatically switched to another tab which is your Library file, you have done everything perfectly!

Oh, and don’t forget to delete your screens from Library file which you copied in New file. Leave only the Symbols page.

Cleaning, cleaning and organizing. You’ve probably realised that some of your Icons or Text / Color Styles are messed up. To clean that up, open the Library file / page and take the following steps:

The great thing about your Library file / page is that now it is Components and Style Guide in one!

Rearrange your components by their functionalities separated by Artboards. That way, your file will be best organized and you will now that everything is in place. But first, focus on creating Color and Text Styles.

If your file in Sketch is not well organized, don’t bother organizing it in Sketch if you will transfer it to Figma. Figma handles some situations, as mentioned, different than Sketch so the best thing would be to start from the beginning in Figma.

Remember to expand all strokes and icons. That might stop them from deforming during transfer.

Finally, if your file is big and contains many components, maybe add color and text style to it when you use it next time. Doing this can save you some time if you won’t use all of your instances in a new design.

And don’t forget to write down a note for yourself or your team so you will remember to do this.

We believe this is the same situation as team Android or iPhone. Pick your poison according to your own preferences and needs.

If you do choose to make the switch, know that there isn’t even such a learning curve because Figma handles tools in the same way as Sketch. Also, no need to worry about your file storage. It’s is up in the clouds, safe and sound.

We are 100% percent for making the change. Give it a shot – chances are you will be, too.

Choosing between Zeplin and Figma is a lot like playing the loves-me-loves-me-not children’s game.

You have to decide between two awesome and useful handoff tools. How could you possibly pick just one?

The first steps when making the decision are comparing features, discussing, and compromising both on the design and the development team side.

The choice of the tool depends on a mix of own and client’s wishes and preferences. A Venn diagram might be helpful in this situation.

Based on experience from our agency during the past year, the team preferred to work in Figma.

The two main reasons are:

We discussed making the switch A LOT – it’s a big step! Finally, we did it.

The developers? Not so much.

To prepare our colleagues from development for the workflow migration and make the transition smoother, we decided to prepare a series of simple short tutorials and how-tos on switching from Zeplin to Figma.

Hey, maybe we can’t change the way Figma works, but we can sure come up with solutions beneficial for both sides.

So, you bought your tickets to the train of migration and you are ready.

We know, migration to another tool is hard and demanding. You’ve got to learn all this new interface and new tools.

The learning path is sometimes curvy, but we tried to show this in 5 easy steps so you could get the best of this new tool and get adjusted to it in no time.

Figma is a tool intended for team collaboration in real-time. So this means everyone is involved in the project from the beginning.

Designers have their preview and workspace, developers and other view-only users (eg. clients) have their own. There is even a presentation mode if there is a need for a prototype.

So, it’s all in one place, everything is connected and not separated into two or more tools. Also, view-only users can easily access to master components and see the style guide you created there. There is no need for additional style guide export.

Designers can sort all of the screens by the pages and in order by the flow. There is an easy flow presentation and no need for additional filtering.

With Figma, developers can be involved with the project from the beginning, give feedback, and ask important questions directly from the start. This way, everyone is connected with the design from the beginning of the project.

Plus, they can share a file with colleagues if they need help with anything. Viewers don’t require a billing account and can be added for free.

Code panel offers an easy way to extract code information from a specific page element.

The code will be displayed by clicking on a layer. Easy switching between CSS, iOS Swift Code, or Android Code. It may not always be the best or the optimal, but it is a great starting point for you to check out.

The panel supports two formatting styles for all three syntaxes: Table and Code. You can toggle them from a tab selector.

While the Code Panel is selected, Figma draws visual guides around the selected element for spacing and sizes, highlighting its spatial relations with the surrounding elements.

Choosing the export format for objects (PNG, JPG, PDF, SVG) is easy peasy.

Resources can be exported globally or locally, depending on your needs. If you’re looking to export all the assets that were marked as exportable on a file or frame, the Export Panel (Ctrl/Cmd + Shift +E) is the way to go.

It’s also possible to copy an item on the clipboard as CSS, SVG, or PNG by selecting ‘Copy as’ after right-clicking on a layer.

You can select or switch between layers on the left part of the screen.

This helps, for example, if you accidentally select the child layer instead of the parent layer.

Also, when you select the Text Layer, you can copy the selected text by using keyboard shortcuts or by selecting ‘Copy as’ after right-click.

Getting used to any tool can be frustrating – it’s a learning curve. But if it saves time and money for the whole agency, changing your workflow may be worth it.

If you’re team Zeplin, we hope these short tips and tricks can help you see a bigger picture of this tool and its features, and maybe give it a shot.

The dissatisfied developers from the beginning of this story grew to love it.