First of all, please download the new version of Avocode here. It works on Mac, Windows and Linux.
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.
From now on, when you create a project in Avocode, you will be asked to set a platform for the entire project.
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.
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.
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.
3. When you open the design and click on the cogwheel in the bottom left corner.
4. When you open the design and click on the scale button in the bottom right corner between the Zoom and the Guides.
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)
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.
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)
2. Hit the cogwheel wheel and a dropdown modal will show up.
By scrolling choose between:
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.
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.
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).
Just to make everything crystal clear:
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:
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.
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).
Let us know what you think about the Avocode 2.12, so we can make it better for you.