Avocode 2.10: Back at it again with a brand new UI
Download the new Avocode 2.10 here
On assets and how to get them
As a developer you don’t need all of the nifty features designers tools. Your hands are full with Atom, SourceTree, Github, Stack Overflow and various Content Management Systems. All you really need is the brick and mortar — colors, fonts, shapes and CSS. Thanks to Avocode, getting all of that without ever laying your eyes on the complexity of Photoshop or Sketch is easy peasy.
There is always a lot that could be done better. Our major improvements really started a few months ago when we’ve rebuilt the code architecture in the 2.8 update. It allowed us to improve things faster, and since then we’ve introduced scalable export of vector shapes to bitmaps, Notes in the app, the Activity bar and more. Now we’re finally changing the interface.
All changes in the app reflect our user tests and the workflow of thousands of teams all around the world.
Mouse clicking instead of hard coding
The first thing you’ll probably notice in the new Avocode 2.10 app is that now you can see all the tools right in front of you at all times.
When you click on a layer…
…it will reflect in the right panel.
- In the top right corner you will see the layer type, blending modes, position and size.
- Below you will see either text (which you can copy or export as a bitmap or a vector shape) or a preview of your layer which you can export.
- Next you will see CSS code. If you click the little settings wheel you can adjust the prefered language (CSS, Less, Sass or Stylus). You can either select any part of the shown code or copy entire lines by clicking the line numbers.
- In the next part of the panel you can create Variables from any code value (such as colors, fonts, gradients or dimensions).
- The last bit is for zooming in, showing guides and contacting our support.
Tip: You can not only show Designer’s guides but also create your own. Just click My Guides and then pull the guides with your mouse from the side or top rulers.
What happens when you click two times?
It depends on the type of the layer:
- Vector shapes and bitmaps will take you directly to the Export modal.
- Text will be copied to your clipboard.
- Smart objects open in a new tab.
Create color style guides
Choose the Color picker from the top bar and just click around. You’ll notice that all of your colors will be added to a palette in the side panel. Even when you change tools and then go back to the Color picker all the colors will be there. When you select a color you can either: 1) Add it as variable, 2) Remove it or 3) Copy it to clipboard.
Fixed Sketch symbols
Avocode finaly reads Sketch symbols! Sketch symbols are no longer shown as flat images but correctly. No longer do you have to detach each symbol from its master.
Seamless workflow
We’ve finally added four things that you were asking for.
1. Share your design
There a new more visible button for sharing. Once you click it you will get a public link copied to your clipboard.
2. Edit in Photoshop or Download
There are times when you need the actual design file to edit it now and then. You can download and open a PSD file in Photoshop if it was directly uploaded to Avocode (not via a plugin). In case of images (PNG, JPEG) the button will say DOWNLOAD IMAGE. Does this make sense to you? Let us know in the comments below.
3. Move in between designs
You can use the Ctrl+tab hot key to move in between tabs. You can also drag the tabs back and forth as much as you like.
4. Open recent designs
Just go to File / Open Recent and choose whichever project you want.
Tell us what you think
We want Avocode to really fit your workflow, so we will greatly appreciate any feedback.
Avocode is a design hand-off and inspect tool for teams which are building next-generation Web, iOS, & Android projects.
