Code Export and Deployment
Project Settings
Enabling CSS Variables for code export

Enabling CSS Variables for your code export

Learn how to enable CSS Variables for a more scalable and manageable design system.

Using CSS Variables for improved scalability

CSS Variables are custom variables that are created to be reused throughout your stylesheet.

This allows you to easily make changes to your app styling by changing the value of just one variable, and also enables powerful runtime effects like theme switching and more.

How Locofy generates CSS Variables

Locofy generates CSS Variables based on:

  • Styles defined in your Figma style library
  • Frequently reused values for properties

Figma style library

Figma allows you to create styles for color, text, layout and effects. You can then apply the styles to layers and object.

When you make a change to the style - like updating a color from red to a lighter shade of red - Figma will apply those changes to any objects using that style.

Locofy detects the styles you have and generates corresponding CSS Variables.

The CSS variable names are based on the names used in Figma - so do make sure to name them meaningfully

Frequently reused values for properties

If you are not using Figma style libraries, we’ve got you covered. With CSS Variables enabled, Locofy detects frequently used styles in your design to automatically generate CSS Variables.

The purple colour #8A53FF, is detected to be used multiple times and will be converted into a CSS Variable automatically.

Creating a new project that uses CSS Variables

When creating a new Web project, you’ll need to set up your framework settings. Ensure that CSS Variables is checked and click “Create” to continue

Enabling CSS Variables for an existing Web project

If you have an existing Web project, you can edit your Code settings in multiple locations:

  1. Before syncing your designs to view code in Builder, click the gear icon to edit Code settings
  1. In Locofy Builder, click the gear icon in the code panel to view and edit Code settings
  1. On the Locofy dashboard (opens in a new tab), head to project settings and click the “Code Generation” tab to view and edit Code settings