Zeplin
Zeplin is not necessarily a prototyping tool, but it very much fits in that post-design and pre-development stage alongside prototyping. It enables you to take your design and prototypes, hand them over to developers and make sure that your ideas are executed well. You can upload your Sketch, Photoshop, XD and Figma files to Zeplin and it will create an environment for developers and designers to hand over the project, without the tedious task of creating guidelines. However, it's worth making sure that you need it first.
Advantages of zeplin
It goes beyond the design workflow and helps teams with the design hand-off. It allows designers to upload their wireframes or visual designs straight from Sketch and add them to project folders in Zeplin.
What is zeplin software?
Zeplin is a collaboration tool, built for UI designers and frontend developers. WithZeplin, collaboration between designers and developers becomes easy, effective and saves time. Designers can turn their designs into specs and guidelines, and developers can generate platform-related code snippets.
Create Pages to organize your content (for example: mobile designs, desktop designs) and Artboards inside these pages to mockup your product (for example: create a step-by-step customer’s journey).
Use the Inspector to find all the details about a specific object (size, positioning, colours, font styles, opacity and much more).
Use the Export feature to export Artboards or individual objects to specific file formats (PNG, JPG, PDF, and so on).
Zeplin is a collaboration tool for UI designers and front end developers. It goes beyond the design workflow and helps teams with the design hand-off.
It allows designers to upload their wireframes or visual designs straight from Sketch and add them to project folders in Zeplin. The best thing?  Annotations will automatically be added to the designs (sizes, colours, margins and even CSS suggestions for certain elements) which will leave you with an online repository that the whole team can contribute to.
Working With Zeplin
Once in Zeplin, you can navigate between projects and easily explore all the components within them. Finding out about specifications of certain elements is also intuitive; select the element you want , then  all the relevant information will appear in the right-hand side column.
Select the object you want to inspect.
Look at the right-hand side column for detailed information like font styles, color, and so on (information will be displayed according to the object you select).
Copy the suggested CSS.
If the design team allowed for exportable elements when importing the designs into Zeplin, the development team should be able to export individual assets. Assets will be available for download in SVG format and three different PNG sizes.
Why Your Team Should Make the Move
Working with Zeplin has many advantages, here are some examples:
- You’ll avoid building a specs document; something which is neither agile nor easy to update.
- Create instant annotated designs with all the relevant information for developers and other designers.
- You can create exportable designs, so developers gain quick access to individual assets.
- Create as many projects you want, then upload and update with only a few clicks.
- Create style guides that will help the design team stay consistent.
- Take advantage of Slack integration, instantly notifiying your team every time there’s an update.