Devtantra Blog

Tutorials about Android, Angular, ReactJS, PHP, MySQL and Web Development

Designer & Developer Collaboration

Android App development is today key of the market. There are huge kinds of applications available in a market as per your requirement. But usability of application depends on two things one is its Ui/Ux and second is the performance. As the designer is designing such as fascinating designs for apps. But after that designer need help to developer also for its slicing and further things as such as res icons/images. A designer who designs the app screens as such like app concept and developer will make it feasible for market/ clients as its requirements.

But in that case, designer work is double because he/she need to provide res as per developer requirement. But here we have a very effective tool which will help us to do it very easily and it is totally free. You never need to pay any extra for this.

Zeplin is the key to unlock this thing. It is available for two operating system environments one is mac and another one is windows and for Linux, it is available but with limitations.

Installing Zeplin

Zeplin is a collaboration tool between Designers and Developers. Designer can upload the designs directly on to Zeplin and it generate style-guides and assets, automatically. Usually, developer requests the designer for resources in multiple resolutions for multiple drawable dimensions. This process can be made automatic as Zeplin can generate the drawables for you.

a. Download and Install Zeplin. Alternatively you can use Zeplin’s web interface by signing into their website.

b. Once installed, login with your Zeplin credentials.

Importing the Project into Zeplin

Once you are done with design part, you can start exporting the project into Zeplin and check if everything is properly done.

a. Create a new project in Zeplin by navigating to Project ⇒ New Project, select Android as we have designed the android app. Give your project a name on the right sidebar.

b. Open designing app and Select the Art board folder on the left sidebar.

c. Goto Plugins ⇒ Zeplin ⇒ Export Selected Artboards. This will open Zeplin again.

d. On Zeplin, select the project you want the screen to be imported. It will start uploading the assets. Once done, you can see the screen on Zeplin’s dashboard.

Exporting App Assets from Zeplin to Android Studio

Zeplin has the intelligence to detect the elements on the document and provide styles-guides like font size, family, color and even gives you code suggestions needed for Android. It also generates the images into multiple dimensions required for Android development. All the images will be organized into drawable-xx folders, so you can directly add them to your android project.

a. In order to download the assets, you need to make them exportable using Slice tool in Sketch. To export the drawable, select the image and click on download button next to png assets on the right sidebar.

b. Select the path to your Android Project’s res folder and click on Export. This will place all the images into proper drawable-xx dimensions.

c. If you select labels, you can see the style-guides like font size, family, color and Android code suggestionson the right sidebar. You can directly add the code to your xml layouts.

I hope this article gave you good information to get started with android UI design. If you have any queries, please comment.

0
0

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: