Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Code
·
LAST UPDATED
December 9, 2016

Starting today, Avocode supports iOS, Android & React Native app development

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

1. How to get Avocode 2.12.0?

First of all, please download the new version of Avocode here. It works on Mac, Windows and Linux.

2. What's new?

I'm happy to tell you that we finally support not only web development but also mobile development workflow (iOS, Android, and React Native) and design scale settings that are synced across your team!

Plus we've increased the performance of our rendering, so your designs will be now rendered 70% faster on average so you can open them faster.

2.1 Choose a platform based on what you're building

From now on, when you create a project in Avocode, you will be asked to set a platform for the entire project.

56-layers.png

The platform you choose will preset design settings for all designs you add into this project. These settings will be synced across your entire team.

  1. Web will preset units in px, colors in HEX format and CSS code generation.
  2. iOS will preset units in pt, colors in UIcolor format and Swift code generation (Objective-C will be added later in 2017).
  3. Android will preset units in dp, colors in HEX8 format and XML code generation.

You can always change the platform and name from the project settings. Just go to your Avocode Manager, click the little cogwheel on the project folder, hit settings and adjust anything you like.

2.2 Design scale

When you upload a design into a project, you can rename it and choose the proper pixel density of the design. Yes! That means that from now on you don't have to divide everything by 2 when you're inspecting a @2x design.

These design settings will be also preset to the particular design and synced with your entire team.

There are 4 ways to access the Design Settings:

1. When you originally upload a design.

2. By clicking on the cogwheel on the design preview.

design preview.png

3. When you open the design and click on the cogwheel in the bottom left corner.

Screenshot 2016-12-06 11.18.28.png

4. When you open the design and click on the scale button in the bottom right corner between the Zoom and the Guides.

Screenshot 2016-12-06 11.15.05.png

For web you can set design scale @1x or @2x and for iOS you can set it @1x, @2x, @3x

For Android you can set scale: ldpi (@0.75x), mdpi (@1x), hdpi (@1.5x), xhdpi (@2x), xxhdpi (@3x), xxxhdpi (@4x)

2.3 Units and colors

When you're inspecting a design you are welcome to change the Measure tool units (px/pt/dp) and the Color picker format (HEX/UIColor/HEX8). Just open the Design Settings (described above) and go to the second tab called “Interface.”

These settings will not be synced with your team, however your app will remember them whenever you come back to the design.

2.4 Code templates

Even though your design platform is pre-set from the project settings, and therefore it will be reflected in the code output, you can change it.

1. Go to the STYLES panel on the right and make sure it's switched to code (brackets not the eye symbol)

Screenshot 2016-12-05 12.43.59.png

2. Hit the cogwheel wheel and a dropdown modal will show up.

Screenshot 2016-12-05 12.44.20.png

By scrolling choose between:

  • CSS (Web default)
  • Sass
  • Less
  • SCSS
  • Stylus
  • CSS in JS (for React Native apps)
  • Swift (iOS default)
  • XML (Android default)

2.5 Code Settings

You will now find Code Settings in the App Preferences. You can access the App Preferences from the window bar by clicking on Avocode and then Preferences… You can also use a shortcut cmd+, on Mac or ctrl+, on Windows and Linux.

The App Preferences that you are probably familiar with used to appear in a new tab in Avocode. From now on they show up in a pop up modal window.

The Code Settings allow you to choose the font size in the code panel, to show/hide comments in the code, and more importantly, show/hide and reorder parts of the code.

app preferences.png

You can also access these settings if you hit either the cogwheel in the bottom left corner, or the button between Zoom and Guides in the bottom right corner and then switching the tab to “Interface” and then hit “Advanced code settings”.

If you hit ADVANCED SETTINGS (works only for web languages) you will be able to adjust even more.

app preferences  - advanced.png

2.6 Path for exporting assets

Once your project is created, your export path will be pre-set by default to your Download folder. Obviously you can change that. Go to the Project Manager and click the cogwheel on the project folder and this window will show up.

When you will be exporting images from any design in this project, they will be preset to be exported into the folder on your computer you choose here.

Even though you have a preset default folder for exported assets, you can always change individually each time you actually hit export during inspecting the design.

Just a reminder, feel free to add as many variants of the exported image/slice - you can choose different scale (choose anything up to @4x or type in your specific resolution) for each and/or different format (JPG, PNG, SVG).

3. Team workflow use case

Just to make everything crystal clear:

  • Platform (web/iOS/Android) is set in the Project Settings, applies to all its designs and syncs with the entire team
  • Design scale (pixel density) is set for individual designs and also syncs with the entire team
  • Units, Color format and Code Settings is set for individual designs and doesn't sync with the entire team

Now, let's have a look at a process of building an iOS app with Avocode and how it changes when the design scale changes.

First you create a project for all designs for this app, name it and choose “iOS” as the platform. Then, all designs in this project folder will be preset for iOS. That means:

  • Swift code generation from layers
  • Units in pt (for the Measure tool and the sizes in the Swift code)
  • Colors in UIColor (for the Color picker tool)

a) iOS design @1x

When you upload a @1x design you should choose the pixel density @1x. When you select any layer and hit Export, the scale of all exported imaged will be automatically preset as 1x.

  • If you want to export an image in the same size as it is in the original, you need to choose the scale in the export modal as 1x.
  • If you want to export an image twice the size of the original, you need to choose the scale in the export modal as 2x.
  • If you want to export an image half the size of the original, you need to choose the scale in the export modal as 0.5x.

b) iOS design @2x

When you upload a @2x design and choose the pixel density @2x, all sizes will be automatically recalculated (in this case divided by two, so you don't have to do the math on your own for every measurement or font size).

  • If you want to export an image in the same size as it is in the original, you need to choose the scale in the export modal as 2x.
  • If you want to export an image twice the size of the original, you need to choose the scale in the export modal as 4x.
  • If you want to export an image half the size of the original, you need to choose the scale in the export modal as 1x.

And that's all

Let us know what you think about the Avocode 2.12, so we can make it better for you.

Happy avocoding.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: