Xamarin.Forms and Zeplin: Speed Up Your Design to Development Process

Avatar

Arnstein

This guest post was contributed by Arnstein Johansen, a Norwegian software engineer interested in mobile and web development. He works for Itema AS, a consultant agency in Trondheim, Norway and a two-time winner of best workplace in Norway. Arnstein has made several Xamarin apps, 3 of them together with his fellow team members at his last client, Evry. Xamarin has made it possible to use his favorite IDE (Visual Studio) and language (C#) when creating the client and back-end. Arnstein likes to share his knowledge through his blog (codejunkii.com) and by delivering talks at conferences or holding workshops.

Zeplin and Xamarin.Forms

Working in a small team with frequent design changes, the extension for Zeplin helps us quickly implement the design. It is also convenient due to its ability to generate a ResourceDictionary for Xamarin.Forms with all your colors and style.

Whether you are developing for web or creating mobile apps, Zeplin is a great tool that can boost your productivity by bridging the gap between design and code. Zeplin is a service available for free, but with one active project limitation.

Extensions

The several extensions it comes with, make it easy to translate design (exported from Sketch or Photoshop) into code. Extensions are offered for Swift, HTML, and others and as Zeplin has opened up for all developers, an extension for Xamarin.Forms was possible.

The Xamarin.Forms Zeplin extension was created to ease the development for Xamarin developers. It generates elements based on the design in Zeplin, then prints out XAML elements and CSS classes ready to be pasted into XAML pages or CSS file.

With Xamarin.Forms 3.0, CSS became another tool in the toolbox for Xamarin developers. While Xamarin.Forms support for CSS is not complete yet, most of what you would expect is there. You can still create apps the old way, however, if CSS is preferable to XAML styles it is worth exploring.

How to use Zeplin with the Xamarin.Forms extension

  • First, you need to add the extension to the project.
  • Assuming that you have one or more projects in Zeplin, go to the extension homepage.
  • Click on the Add to Zeplin button on the right.
  • Select one of your projects and the extension is added to the project.
  • Open the project, select a page and click on an element. Both XAML styles and CSS are available for each element.

The extension offers ready-made XAML elements for StackLayout/Frame, Image and Label. Note that in order for the image to be properly identified, they have to be exported as assets.

In addition to the XAML, you will see the CSS and can choose to either add it to a CSS file or add it inline using the StyleSheet class. Read more about how to use CSS in your Xamarin.Forms app in the Microsoft docs.

In the bottom right corner you will see the output from the extension.

If you go to the Styleguide tab, you can also find a downloadable ResourceDictionary with colors and styles.

Autogenerated Color and Style elements for XAML.

The Xamarin.Forms extension and others can be found at the Zeplin Extenions.

Avatar
Arnstein Johansen

Senior Consultant

Follow Arnstein   

0 comments

    Leave a comment