Customizing Prefixes for ThemeBuilder and Figma Variables

Choosing the right variable names for your development environment improves organizational clarity and makes your code more readable. Prefixes aid developers in quickly identifying and distinguishing custom variables specific to your organization and development processes. The right variable naming approach enhances code maintainability and allows smoother collaboration between design and development teams.

To support you with this task, the Project Settings in ThemeBuilder let you customize the prefixes assigned to the variables in the ThemeBuilder app and those exported using the ThemeBuilder plugin for Figma.

Customizing the ThemeBuilder Export Prefix

You can define a prefix that will be prepended to all variables exported from ThemeBuilder. Adding a prefix, such as my-company-name, lets you apply specific naming conventions to all exported variables. For example:

$my-company-name-primary: #04ba3bff;
$my-company-name-surface: #fafafa;
$my-company-name-primary-hover: #0dc847ff;
$my-company-name-base: #f5f5f5;

Utilizing such prefixes brings consistency and clarity to your codebase, particularly in collaborative settings. In addition, modifying the variable prefixes can help prevent naming conflicts with third-party libraries.

Customizing the Figma Plugin Prefix

You can also specify a prefix that will be prepended to the variables that you export using the ThemeBuilder Plugin for Figma, facilitating seamless integration with your development workflows. This prefix helps prevent namespace collisions and ensures that variables originating from the Figma Plugin are easily distinguishable from others within your project.

The ThemeBuilder Export Prefix and Figma Plugin Prefix are getting chained and the files exported from ThemeBuilder will include both prefixes.