Create or import variables and replacements rules in Avocode

Create variables from colors, measurements and other properties. Customize the code output by using replacement rules.

Written by Matous Roskovec Updated over a week ago

How are variables synced?

Variables and replacement rules will only apply to a project in which they were created. They do not apply globally. Variables and replacement rules are now synced across all team members and devices, therefore everybody in your team on any machine can see the same variables and replacement rules in one project. Also when you create a variable in your desktop app, you can see it in the web application as well.

How to import/export variables?

First go to the Variables panel and click on the Import/export icon.

Then either export all variables that you have created in this Avocode project, or paste your variables in to import them.

Please note that variables are synced across all designs in one project and are shared with the whole team. That means when you import new variables, your team members will be able to use them.

How to create a new variable?

Define any value in the code panel as a variable – such as colors, fonts, gradients or dimensions. Matching values will be instantly replaced by the created variable.

1. Click the "+" button to add a new variable

2. Fill the variable name and value it should replace

3. Create the variable and see it being applied in your code panel

How to create a new replacement rule?

You can easily customize the code output using a replacement rule. You can replace anything with anything. And you can even use regular expressions.

1. Click the "+" button to add a new replacement rule

2. Fill the replacement name and value it should replace (you can even use RegEx)

3. Create the replacement rule and see it being applied in your code panel