Get CSS and Layer Styles from a PSD/Sketch design in Avocode 2.11

Avocode

Published in

Avocode — From Design to Code

5 min readSep 26, 2016

Our latest update is all about giving you options. Let’s have a look:

Download Avocode 2.11

Get instant access to these 7 new features and improvements:

Stable file upload
Improved Code Panel
Layer Styles panel
Displaying group layer styles correctly
Adjustable zoom value
Toggle toolbar
More design preview options‍

1. Stable file upload

Losing internet connection during an upload can be a pain. Luckily, the new Avocode 2.11 will recognize that, pause the upload, and once you’re back online, it will pick up where it left of. You no longer have to start all over again. And not only is the upload more stable, but it’s also faster.

2. Improved Code panel

You probably know that once you click on any layer in Avocode you will get precise CSS.

In the past we allowed you to copy one or a few lines of code just by clicking at them in the Code Panel. Unfortunatelly, we foolhardily left out the option to copy multiple lines in the previous 2.10 update. We’ve fixed that now and added more options for how you can get your code:

select particular values from the window (then it’ll copy to your clipboard)
select whole lines — either by click the line number or inside
select multiple lines — either drag your mouse over the numbers or inside lines of code

TIP: Would you like to help us test new features in Avocode? Just send us an e-mail to community@avocode.com and join our private program of Avocode Beta-Testers.

3. Layer Styles panel

We found out that some front-end developers often only copy a particulcar value and like to write the rest of the code like “width” on their own. First of all, anyone can now pick the concrete value from the code panel.

But that wouldn’t be much of a new feature, would it? So we went futher and built a completely new panel called Styles (alternative to the Code Panel). It is pretty straightforward: it shows you a list of values which you can click at and they will copy to your clipboard, be it a font color or even a text alignment.

Give more precise feedback to your designers

The Styles pane will show you patterns, gradients, shadows and information about layer effects (like bevel and emboss) and blending modes. If you see a red exclamation mark next to any value, it means that it’s not possible to generate code from this effect. In that case you will know exactly what needs to be redesigned and you can give your designer more specific directions via Notes.

4. Displaying group layer styles correctly

Avocode used to render group layer styles individually for each child layer. Our rendering team finally came up with a solution and now Avocode displays group layer styles (effects like stroke, drop shadow, etc.) correctly as you would see them in Photoshop.

This also goes for exporting layer styles — when you select multiple layers with a group effect they should be exported exactly as they were designed.

FYI: There are still some edge cases, so please if you stuggle with this feature, make a printscreen, describe how you proceeded, and send it to team@avocode.com. Thank you.

5. Adjustable zoom value

Previously, you could only zoom in and out by either hitting the +/- buttons or by holding the ctrl (or cmd) key and rolling your mouse wheel. Now you can also click on the value and actually type in the exact percentage of the preview.

6. Toggle toolbar

If you just want to focus on the design for a minute or you already know all the shortcuts of Avocode (which you by the way can learn from Avocode/Preferences/Shorcuts) you can hide the panels.

Hit “TAB” key to hide both side panels
Hit “T” key to hide the tool bar.

7. More design preview options

When you’re going through the designs in your project, you might not have the time to open each one to look inside if it’s the right one. You can now hit SPACE and a preview of your design will pop up. Right now you can always choose if you want an original size (and therefore zoom in to fill the screen) preview or have it fit to screen in the switch next to the Open button.