Avocode; the amazing tool to integrate designers and developers.

Maya | February 4, 2019

4 mins read

80% of the time, developers begs the designer for every little detail regarding a project, or forced to do it themself by using photoshop or sketch that are tools for designers not developers.

At Maze we use an easier and smarter tool, called Avocode. Whatever you need it’s there with a few clicks. It has made our design-development process & life extremely easier.

Avocode is a design-to-code tool, that helps you build Websites and Applications exactly like they were designed.

Avocode supports more design formats including Sketch.

Designers have different workflows and each of them uses a different design app. How developers are supposed to know about all the ways to crop images, pick colors, export assets in Photoshop or Sketch? Avocode provides the same experience for all developers, regardless of the designer’s software. The designer can use Photoshop or Sketch but there is only one place to share the designs with you . Just drag and drop any design. On any OS, without plugins. Whatever design tools the team uses, it is compatible with Avocode.

Avocode is a cross-platform.

When you work with Photoshop files you can’t use Linux and you can only use Mac if you work with Sketch designs. It is annoying to switch between computers just to get one image from a PSD. Forget that with Avocode, developers can work with any design format on any operating system they want. Being universal makes Avocode a great fit for teams with big and diverse development workflows.

Get all the assets from one place.

Get everything you need from Sketch, Photoshop, Adobe XD, Illustrator or Figma file to turn it into the real product – all in the focused, developer-first UI. No need to buy design tools or ping the designer all the time.

Measure tool: is the first tool you will experience when you open a design in Avocode. It allows you to know:

sizes of selected layers
distances between individual layers
distances between a selection of multiple layers and another layer
the position of the layer on the X and Y axes

Measure units in px, pt (iOS) or dp (Android)

Export Images: With Avocode you can hide/show, scale, rename, and export any layer. No need to mark layers as exportable beforehand thanks to our Monroe rendering engine. Export assets as PNG, JPEG, SVG, WebP and Base64. State-of-the-art SVG image export. Automatic image optimization for exported assets.
With Avocode: 80% image compression / With others: 50% image compression.

Pick Colors: Handpick any color code and copy it from any pixel displayed in Avocode to your clipboard automatically just by clicking on it.

Export colors in Hex, Hex8, RGBa, HSL and UIColor

Export Code: Generate CSS, Less, Sass, SCSS, Stylus, Swift, Android, CSS in JS, React Native, and Styled Components code from any design. Avocode automatically generates useful code so you don’t have to code stylesheets from scratch. Adjust the code output and speed things up with project-wide synced variables.

Copy Style: Instantly recognize and inspect same layer styles across PSD, AI, Sketch, XD, and Figma designs. It lists all fonts (including font-size) and colors that appears right next to the design.