Lesson 2: Make It Easy For Your Team To Access Assets

In the past a few years, a lot of different screen sizes and measurement units emerged across iOS, Android, and Web platforms.

We need to consider this and make it as easy as possible for our teammates to access assets in the right format for their platform so that they can start development, so that we don’t have to manually reproduce assets for the right platform, and so that we don’t get caught in back-and-forth email chains last minute while engineering is trying to make a sprint planning deadline.

iOS engineers use pt (points) as their main development unit. This is different from the typographical ‘point unit’ that is available to us in our design tools.

Android engineers use dp (density-independent pixel) as the main unit and sp (scale-independent pixel) for text size.

In Web, there are even more options. Some engineers simply use px (pixels), some use percentage values, and some of them use em/rem values. Both rem and em are relative units, px is not. Relative units are mostly used for building responsive designs.

In the past, you would have to know all the units of measurement that the different platforms would require and manually export and convert assets appropriately. Now, instead of going back and forth converting assets into the right @2x and @3x sizes and converting across dp, sp, px, you can let your handoff tool automate the process.

In Zeplin, when you export your file, you specify which platform your design is tailored for (Web, iOS, Android, and Experimental) and from there Zeplin will automatically convert your measurements and assets tailored for your development platform.

This saves your engineer time because they they don’t have to convert the measurements themselves, they can export the asset with one click and know that it’s in the right size for their platform.

For example, an Android developer may appreciate that Zeplin auto-generates font size, family, color, and generates code snippets to facilitate development with images already placed in drawable-xx folders that simply need to be dragged and dropped into the project. It’s really all about these little details.