<?xml version="1.0" encoding="utf-8"?>

Naming conventions for variables

Naming conventions for variables Bad Practice
Naming conventions for variables Best Practice

When it comes to naming variables in Figma, using descriptive names is key. The goal is to choose names that clearly convey the purpose of each variable, making it easy for both you and your teammates to understand and locate them.

Imagine you have a color variable that represents the primary color in your design system. Naming it "primary-color" or something similar instantly communicates its purpose. This descriptive name eliminates any confusion and helps you quickly identify and utilize the variable throughout your design. It ensures consistency and clarity in your design system.

Another valuable practice is to group variables together based on their functionality. For instance, you can create collections or groups to organize your color variables, typography styles, or any other relevant categories. By doing so, you establish logical groupings that simplify the management and navigation of variables.

When you're working with a large design system, this organization becomes even more crucial. It enables you to locate specific variables without hassle and fosters a more efficient workflow.

Improve your UX & Product skills with interactive courses that actually work