You can find the panel to create a replacement rule in the bottom-right corner. Once you create a variable or a replacement rule, it will instantly start applying.

NOTE:
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.
 

Variables

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

Replacement rules

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

Did this answer your question?