How to Generate CSS Variables With Avocode 3 – Blancer.com Tutorials and projects

In this tutorial I’m going to show you how to generate CSS variables with Avocode 3. We’ll be using a design which has been imported from a design application like Adobe XD, or Sketch.

Avocode 3 can actually generate variables for preprocessors (Sass, LESS, Stylus etc.) but for the sake of simplicity we’re going to be working with native CSS variables. We’ll create variables for our design’s colors, typography, and some layout options. These are the aspects of our final product which we’re likely to want to change sometimes (it wouldn’t be very efficient to create variables for everything).

Avocode 3 and CSS Variables

This video accompanies my new course, and the design you see in the video is taken from that. Take a look if you’re interested in learning more about Avocode:

Adobe XD to Code With Avocode 3

When you’re taking a design and turning it into a fully coded website, working with the same software that was used to create that design in the first place…

Kezz Bracey

06 Sep 2018

Adobe XD

Starting With Colors

If you followed along with the course you’ll have seen we created a whole bunch of swatches to make it easy to generate a color scheme, and we named each one according to where it’s used in the design.

With our swatch selected you’ll see the actual color value displayed in the properties. In this case it’s #8b959d, so highlight and copy it.

Create a Variable

Underneath the value you’ve highlighted you’ll see the Variables window. Click the + button to add a new one.

In the dialog which pops up, paste the color value into the Replaced Text field. Then, in the Variable Name field, enter the variable name you’d like to use. Now, any instances of the color value found in the design will be replaced with the variable.

You’ll notice we used _color at the end of our variable string. This will be helpful once we move into code as we’ll be able to distinguish one type of variable from another.

Here’s how variables show up once they’ve been set:

Other Variables

The same process applies to other variables. Where we used hex values for colors in the first example, you can add font family names, numeric values, whatever you like. They can all be replaced with CSS variables in the same way.

You can therefore use variables for most aspects of your CSS. Sizes, media queries, units of measurement, it’s up to you! Check out the video for further explanation.

Export Code

Now for a very important part of all this: exporting the CSS code that will take our variables into the browser. Once all your variables are ready, in the Variables panel click the Import/Export button.

In the dialog that pops up, hit the Export tab. You’ll find all the variables waiting for you to copy. You can then paste the variables into a stylesheet, but make sure you include a :root element to nest them all in, like so:

:root {

    /* variables go here */

}

You might then find it useful to arrange your variables within this stylesheet so that they’re easier to manage (colors with colors, typgraphic variables with each other, and so on).

Conclusion

That’s how you can generate CSS variables from a design using Avocode! It’s much quicker doing this than coding CSS variables by hand, so it’s a very useful feature which I’m sure you’ll enjoy using.

Learn More

{excerpt}
Read More