Using Zeplin.io for your app design

Zeplin.io is a great tool that helps you be productive and bridge the gap between design and code. I have used Zeplin.io for several projects, both for web solutions and apps. You can get it for free, but with a one active project limitation. They have apps for Windows and Mac, but it also works well on the web.

Zeplin.io comes with several extensions, making it easy to translate design (exported from Sketch or Photoshop) into code. You can get extensions for Swift, HTML and others, but for no extension for Xamarin developers . Zeplin XAML extension was close, but optimized for UWP development, not Xamarin.Forms. Fortunatley, Zeplin has open up for other developers to provide their own extensions, so that’s what I did. I forked the existing XAML extension and made the necessary adjustment, plus added a few features, like StackLayout and Frame examples. And with the recent addition of CSS to Xamarin Forms, I also added CSS styling to elements.

CSS

Click on a element to see the CSS styling.

Label

Select a text element in your design, and a Label is generated. Please also note the CSS that can be copied into your code.

You can get a ready made Label with the content by selecting a text element in your design.

Image

Images are easily exported with Zeplin, and with my extension you can copy the generated Image element.

If the element has any assets connected, I have assumed that it is an image and created an image tag prefilled with source, pointing to the asset.

StackLayout/Frame

Generated Frame and StackLayout in xaml.

For other elements, I have set up example for StackLayout and Frame, but they are easily changed to other types of layouts or views.

ResourceDictionary

Easily transfer the projects style into the app resource dictionary.

Color or fonts added to the styleguide are converted to a resource dictionary, ready to be pasted into your app.xaml.cs file.

You can find the extension at zeplin extensions.