Avocode - Slicing & Dicing Designs

Submitted by fullcolorcoder on Wed, 11/08/2017 - 12:33

I thought I'd share a cool tool that a developer buddy of mine introduced me to called Avocode. This tool allows you to do a few handy things as a front end developer that make quick work of developing a site's styles. Their web interface is adequate and intuitive. If you've ever opened Photoshop for 5 minutes you're basically good to go generically. Create a project, upload and start clicking around. So I got a trial and hesitantly gave it a shot not expecting much but was pleasantly surprised.


Avocode is great for the simple stuff. At first I was a little skeptical in the simplicity but the basic tools really are time savers. You can export graphics in two clicks. Select an element and it gives you the CSS output of it. The color picker tool allows you to click anywhere on the document and copies the hexadecimal value to the clipboard. The same behavior of auto copying to the clipboard is true with the styles as well and I find very handy. In my career I've worked a lot with Photoshop and these things can be time consuming. It's small, but it adds up and I'm pretty impressed by how quickly and effortless Avocode makes it the basic things happen. 

Component Driven 

Another thing that makes me smile is the nature of common styles it has. Personally I like things to be neat and component driven and work with other people who feel the same. A nice feature Avocode has is when you select several elements at once in say a designed component (a box with a header, image paragraph an link or example) then the CSS output generated will only output the common styles of those selected elements. This is crazy awesome for building things out efficiently. 


The collaboration tools are pretty nice as well. Avocode makes annotations really easy, the UI is great here as well. Their revision tool makes it easy for you to upload several variations of a PSD from a designer and browse effortlessly through them to see what's changed and check out old notes. I think that's very handy. A lot of the projects I've been on still were in a state of design revision as I was coding. To have all of that centralized would have been crazy good. These features however are where the value either decreases or increases in my opinion though. If you're not working with a team then it's like great, cool. Or if you're the only one on your team wanting to use this, again you're limited to the coolness that the basic tools provide. If you're designing and developing on a freelance project, it would be nice to keep notes and check out revisions of your work however rather than sifting through basecamp notes or emails while developing. 


I would buy this plain and simple. The little things really do add up and Avocode does a really great job of keeping things in one place that are useful to a front end developer. One thing I think would be cool in their future versions is making use of em/rem font sizing and generating that from the various font sizes in the document. Allow you to set a base font size even. I think I'd fall out of my chair if that feature was in play.