Back

Why I still use Zeplin when Figma ‘does it all’.

Zeplin is a design delivery tool that allows product designers to publish files in a format developers can understand.  This includes CSS styles and component libraries which should make the build of any application, easier.

Figma on the other hand is a high-fidelity design tool used by designers to design applications, and design libraries.  Over the years it’s expanded into a brainstorming and collaboration tool.

 

Version Control

When files are handed off to development, the design can and often does change.  This is where version control comes in.  Zeplin allows you to capture the version of each change; allowing developers and other product team members to see what has happened and why.  It’s a great place to store design decisions and iterations on a feature.

Version control within Figma does not exist, it’s more of an auto-save .  So any changes are lost, and only the most recent design is visible.

Zeplin version control.

Organise design files (that makes sense to the product team)

Yes you can easily organise your screens and design files within Figma using files and pages.  However, sometimes how you structure your design files isn’t necessarily how others want it organised.  When delivering on designs, it can be helpful to organise by feature release, features or based on how the team wants it rather than how you have it set up.

An added bonus is that after each project you can transfer ownership of the Zeplin project over to the team or client rather than give them access to your Figma source files.

 

Link designs to Jira

When you upload a design to Zeplin, you can then add that design to an Atlassian JIRA ticket.  This allows you to keep track of the progress of the development of your designs and quickly see the status of the relevant tickets related to that design – neat!

link designs to Jira tickets.

 

Design to code

Much like Figma, Zeplin give you the component, dimensions and CSS code for any design element with the click of the mouse.  This makes it easy to give development teams access to the CSS styles and HTML needed to code as designed.

As you can see below it also includes variables and any layer names which you can control straight from Figma.

Code for developers in Zeplin.

 

If you have any other reasons you love Zeplin, let me know and I’ll add it to this list.

For a more in-depth discussion about Figma to Zeplin workflow checkout my interview with Zeplin.

 

Stay informed,

Tania Richardson sign.

Tania
Tania
https://taniarichardson.com
10+ years as a product designer. Helping start-ups and organisations combine user research and design principals to deliver the best in online experiences.

Leave a Reply

Your email address will not be published. Required fields are marked *

We use cookies to give you the best experience. Cookie Policy