Zeplin is an awesome desktop application that can be used as a tool for collaboration between UI designers and front end developers. It can help the developers in building pixel perfect mobile apps.
Zeplin itself calculates all the pixels in DP so you don’t have to worry about PX to DP conversion to make it apply in your layout .xml files. It also can convert the image assets for all needed densities and resolutions like mdpi, hdpi, xhdpi, etc.
During the installation of Zeplin, it will ask you if it wants to install Zeplin plugin for Photoshop. This is required by Zeplin since it can upload your design directly from Photoshop to Zeplin.
With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop. Developers get a 'locked' design to build from, while designers can iterate on the next great release. Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be. Photoshop mockups can be exported to Zeplin in a few easy steps.Whenever you download the Zeplin Mac or Windows app it will pre-install the Photoshop plugin.
First things first! Once everything is setup, You need to define densities of the PSD designs which you are going to import to Zeplin. This is the most important step since Zeplin needs to know the current pixel density. Hope you know the difference between ‘PX’, ‘DP’, ‘DIP’ and ‘SP’ in Android.
Once you finalize the density of your design, log in to Zeplin, and create a new project under Designer profile. It is recommended you choose the Designer profile, because only the project owner will be able to upload the designs in a free version of the application.
Be sure you have Zeplin plugin installed in your version of photoshop. Now open the design file.
Select the layers you need to import. You can choose the layers by turning On / Off the visibility of the layers.
Since the Zeplin Plugin can only import Artboards, you need to create an Artboard before you can import into Zeplin. Also, Zeplin takes everything as a group, so you will need to put all the layers as a group and then import the Artboard.
Zeplin also has the potential to export all images in .png format for each and every pixel densities like mdpi, hdpi, etc,. To utilize this feature of Zeplin, you have to export all images in your PSD layer as separate assets. You can easily export the images by expanding the artboard objects, selecting them and clicking the export button. When the design file is exported at once, you can select any screen and in the image you will get to see the properties of elements such as width and height when mouse is moved over them. It will also display many other properties such as the distance between them in DP.
When images are saved as assets, these get saved to folders namely drawable-mdpi, drawble-hdpi, etc. These folders are ready to be copied to the Project res folder.
Best Practice to move from Zeplin to Android layouts
Be sure you check few pieces of auto-generated code before you use it in Android Project.
If your Layout has a TextView do Check for tools:text
and Change it to android:text
Or else the text will not be displayed in the app while running in an emulator or a real device. ( Please note that Android preview will display the text during development)
For example, Here is a snippet of what is generated by zeplin.
This is how it should look like
Zeplin is a collaboration tool, built for UI designers and frontend developers. With Zeplin, 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. Pelin Kenez from Zeplin team, shares more details with us about her startup in the interview below:
Q: What is Zeplin?
A: Zeplin is an app for UI designers and frontend developers, enabling them to collaborate efficiently and save time. Designers can quickly turn their designs into powerful specs and guidelines while developers can access all the resources they need in a single location and generate code snippets that are tailored to the platform they’re working on.
There are a lot of tools that focus on design or development processes, but for us it doesn’t seem right to think of them separately. On the contrary, we’re trying to build a common language between them. Why does UI work take more time then it should? Why is there always back-and-forths? As designers and developers ourselves, we tried to approach these questions both from design and development points of view. Zeplin is still in a very early stage but we believe this is the reason why people seem to support what we’re doing.
Related:Startup Mural.ly – Visual Collaboration For Creative People
Q: When do you plan to launch it? What’s the coolest use of Zeplin you’ve seen until now?
A: We’re trying to avoid this question all the time. 🙂 Hopefully in early 2015, Zeplin will no longer be in beta.
There are a lot different teams from all around the world, using Zeplin in their workflow but we recently learned that one of our users use Zeplin in their developer interview process. They give their applicants a design using Zeplin and see how good they’re at implementing detailed UIs. Something we never thought about!
Photoshop Zeplin 書き出し
Q: How big your team is and how are you funded?
Photoshop Zeplin Extension
A: We’re actually quite a small team: 1 designer, 3 developers. Before Zeplin, we were working together for 3 years and we all come from different sides of the problem: UI/UX designer, Android, Web, iOS developers; we have it all. We joined Startupbootcamp Istanbul accelerator program back in June and that’s where we got our initial funding from. We’re currently bootstrapping and will look to get more funding in 2015.
Related:Startup Front – Introducing Collaboration In Email
Q: How difficult was it technically to build it?
A: Our aim is to build a very easy solution to a complicated problem, trying to bring different platforms, different mindsets together; all in one app. It can be quite tough to build a product that works together with other tools though, in our case Sketch and Photoshop. At times it was challenging, we tried a lot of different approaches before deciding on which one to go with. I should also mention that the guys at Bohemian Coding were super helpful. Big thanks!
We’re actually just getting started. As we still have a lot more ideas in our heads, I’m sure it’ll only get tougher. 🙂
Related:POP App Transforms Your App Ideas Into Working Prototypes
Q: Do you have any new features in the pipeline? What’s your favorite upcoming feature?Djay 2 spotify.
A: Of course! The best thing about features is that, we decide on what to do next together with our users. We are quite lucky because they are also app makers. Everyday we are getting tons of feedback and that helps us decide our priorities. Currently, we’re working on a read-only web app, focused at developers without Macs. Photoshop support and asset generation (tailored to different platform needs) are the other two features we’re also working on.
Our favorite feature is definitely focused on the review process though. We really shouldn’t go into too much detail but we have some amazing ideas, it will be very exciting.