user5599807 user5599807 - 9 days ago 7
Android Question

Best practice to move layout from zeplin to android layouts

What is the best practice to create the same layout on android side based on Zeplin mockup?

As I understand there is no simple dependency between pt and pd.

Answer
  • Install Zeplin app, it will prompt you to select Photoshop .exe file. It is necessary, because Zeplin need to install plugin for uploading you design files.
  • First, you need to define pixel density of your .psd design file, which you'll import design from. It is importaint, because you have to tell Zeplin current pixel density, see What is the difference between "px", "dp", "dip" and "sp" on Android?. Once you know your density in .psd file, create new project on Zeplin site under DESIGNER profile. It is importaint, because in free version only owner of project can upload design.
  • Open design file make sure you have Zeplin plugin installed, see video on their site.
  • Select layer you need (by changing visibility of all layers). Plugin can only import Artboard, so you have to create one. There is a problem - you need to place all layers into one group, so you can import those to Zeplin.
  • Besides of converting dimensions ito dps, Zeplin can convert all images into .png format for different pixel densities. In order to use that, you have to export all images in your Photoshop layer as assets. Simly export all images by expanding your artboard, selecting all objects and clicking button in Zeplin plugin. Pluggin will suffix names of asset images with -c-
  • Select your artboard and click 'export' in plugin . Once you have your design file exported, you'll be able to select any screen in it (screen is a single 'export' operation). On your screen select image and Zeplin will show its width and height in dps. When you selected image, move mouse to another picture and app will tell you distance to that image in dps. IMPORTAINT: If image were selected as asset, there will be buttons for downloading images on the right. Those images will be saved to folders, having names as in AndroidStudio project: drawable-mdpe, etc. Simply copy those images into your project.
Comments