Zeplin And Figma

Posted : admin On 1/29/2022

With the Figma Sync feature, you can export your Figma designs with one-click to the Zeplin project or styleguide they were previously exported to.

When you are publishing your designs from Figma for the first time, the plugin will show a regular export button

Exporting assets from a Figma design in Zeplin is quite straightforward. You can either mark a layer as exportable or use the Slice feature. Then, Zeplin will generate all the necessary images with different scales and formats automatically, tailored to the platform you’re designing for; Web, iOS, Android, or macOS. Exportable layers. Everything in one place. Figma is a tool intended for team collaboration in real-time. The Organization plan’s pricing is based on the number of designers and developers on the team, basically anyone who needs to upload designs or access specs, assets or code snippets. The base fee includes 12 seats, along with unlimited projects, components and versions. Figma mockups can be exported to Zeplin in a few easy steps. Whenever you download the Zeplin Mac app it will pre-install the Figma plugin for you.

Once you click the “Export” button and select the project or styleguide, the plugin will remember this. When you publish again from the same design file, the plugin will show a “Sync selected” button and automatically publish your designs to the same project or styleguide.

You can click on the “Sync selected” button to export the frames/components to the project or styleguide you exported to before. Below the button, you will see the name of the projects and the styleguides you previously exported your designs to in the plugin.

☝️ It's not possible to sync local colors and text styles. To publish them, you need to disable the sync feature first and export any frame or component in your design file.

Disabling the sync feature on Figma Plugin

To select another project or styleguide, you can easily disable the sync feature by turning off the switch at the bottom of the plugin:

Zeplin Figma Plugin

​​If you turn on the sync feature again, the plugin will allow you to keep sync your frames and components by remembering previous exports.

​​

​​​☝️​ Turning off the sync feature doesn’t affect already exported frames and components. Zeplin will keep them in your projects/styleguides.

Clearing Sync History on Figma Plugin

If you want a fresh start and don’t want to keep syncing your designs anymore, choose the frames and components you want to clear, click on the “…” button and select the “Clear” button from the menu.

Related articles:

  • Exporting text styles from Figma

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.

Why we chose Figma over Zeplin

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, team preferred to work in Figma.

The two main reasons being:

  • the export is way easier
  • communication with the project team or client doesn’t take as long.

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

Our designers were happy

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.

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

Making the switch from Zeplin to Figma in 5 steps

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

Zeplin

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.

1. Everything in one place

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 style guide you created there. There is no need for additional style guide export.

2. Flow preview and communication

Zeplin Io Download

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.

3. Code switching

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.

4. Exporting assets

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.

Figma

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.

Figma

5. Layer selecting

You can select or switch between layers in 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.

Figma Vs Zeplin

Sketch zeplin

What are developers' thoughts?

  • Nikola Šimunko, iOS developer
    The advantage I noticed right away is that you can see multiple screens at once in the Figma which helps to visualize the implementation of the flow when you group the screens as a whole. In this way, it seems to me that exporting in Figma is more advanced than in Zeplin, which is always a good thing, but I have actually exported very little to give you an objective opinion. One negative side of the Figma, as far as I heard from another iOS developer is that his Figma was quite slow, but that was not my experience.

  • Josip Krnjić, Android developer
    The pro with Zeplin was that if you mark everything under assets then you can export everything at once. While in the Figma you have to export 1 by 1. It has happened many times that a designer forgets to put something in Zeplin assets and then I can't export it, while in Figma I can always do it alone. But Figma is my absolute winner. It loads faster, it can load 50 screens into less memory at a time, while Zeplin takes 10 seconds for one screen to open.

Is changing your workflow worth it?

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.

Download Zeplin App

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

Zeplin Desktop

We're getting serious hippie vibes from Nikola Heged's cover art.