Need to transform design to code? Don't hardcode it, Avocode it!
See how
January 4, 2017

Check uniformity of layer styles to create smarter selectors

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

When you're coding you can either define CSS style individually for each html element, or predefine it for multiple elements with a selector. You surely know, that the second variant saves you both clutter and size of your code.

But how can you know for certain that the design has some repetitive styles which can be used as types, IDs or classes? Without a style guide? No eye-balling?

With Avocode it's fairly easy. I'd like to show you on two basic examples:

How to export styles from layer intersections?

The STYLES panel will show you that you have selected an intersection of 2 layers. (You can obviously choose as many layers as you want like this.)

NOTE: By holding the SHIFT key you can selects as many layers as you want.

  1. Pick the Select tool
  2. Hold the SHIFT key and select 2 layers by clicking on them

Copy layer styles for multiple layers at once

If the styles of all layers in the layer intersection are the same, the STYLES panel will show something like this:

Screenshot 2016-11-15 12.24.08.png

NOTE: The little red exclamation mark is there to tell us that the given style (such as “Position: Inside”) cannot be represented in code. If you want to include this style in the output, export the layer as an image.

No layer styles in common

However, if you select two and more different layers that are different in every aspect - like text and a button rectangle, the STYLES panel will let you know that there are “No layer styles in common”.

Font styles

Checking layer styles with Avocode is helpful also when it comes to font styles. Again hit SHIFT and select multiple text layers. If they have the same style (or at least a same font-family) Avocode will show you.

When you see that both headlines carry the same values, you can create a class style for both of them. Either copy each value from the STYLES panel or again switch to the Code pane and export this code:

      .text {
      width: 476px;
      height: 167px;
      color: #999;
      font-family: "Adelle Sans W01";
      font-size: 16px;
      font-weight: 300;
      line-height: 30px;

I'm sure that you know what to do next, but just for the sake of finishing this example… Next create as many <div> element that should use the class we predefined earlier and include it in your html structure.

<div class="text">
       <h2>Our goal is to grow Avocode to its full potential</h2>
<div class="text">
       <h2>Become a part of our team with a global impact</h2>

Turn same colors into variables

As long as the layer have at least one style in common, Avocode will show you. For example, when you select a piktogram and a rectangle that carry the same color.

You can either click on the blue square and the color code will be copied to your clipboard, or you can switch to the CODE panel and Avocode will generate the entire style code for you:

/* Base style */
       background-color: #3cafe1;

However, if this color occurs more often in the design, perhaps you'd like to regard to it by something memorable than #3cafe1. How about something like "sky-blue"?

In that case, click on the color tile with the right mouse button and select "Add as a variable." A window, like the one below, will show up.

Name your variable anything you want. For this tutorial, I chose "sky-blue".

Note: You can use a variable for more than colors. Define any value from the exported code - such as font, gradient or a dimension. You can also use the REPLACE tab and create a rule for replacing certain code parts. For example you can decide to replace font-weight: 400; with font-weight: normal;.

Anytime you will generate code that contains this color, it will show a variable instead of the color code. You can edit the name of the variable or delete it at any time.

NOTE: If you don't delete your variable, it will stay there saved until the next time you open and inspect the design.

Did you find this tutorial useful?

How do you proceed when it comes to creating style sheets and classes with Avocode? Let me know in the comments below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: