Feb 12, 2024
Intro to Figma variables: Frames X variables best practices
Streamline the design system with variables in Figma
Intro to Figma variables
Variables are essential for design systems, allowing you to store reusable values such as colors, spacing, size, and many other visual design aspects. Utilizing variables throughout your designs will allow you to achieve a fully customizable UI with less labor work.
Variables can future-proof your design decisions and ensure the handoff to the development process. Using variables' best practices will save time in the long run and reduce costs on every new project or sub-brand you create with them.
Explaining variables
What are variables? In Figma, variables have a single source of truth with the benefit of having multiple modes/variants attached. You can think of variables as styles with variants.
Like a style can have multiple color sources attached to a single source, a Variable can have only one source with multiple colors/modes added. If you're familiar with coding, you can think of a style as a CSS class and a variable as a custom CSS property.
A mode in variable represents a different variation for a piece of design it stores. For example, if a color variable is placed into a dark-mode container, the dark mode variant will be activated, and the stored dark mode color will be displayed.
This way, every variable can store up to four modes (variants) on a regular Figma plan. These modes act as transistors for variables, activating specific variable properties based on applied conditions.
The benefit of using variables for UI design
In Frames X, variables are configured to give you 100% control over your project’s branding by default. Aiming for robust functionality without adding excessive visuals effects to your work.
You can easily adjust any part of the system or the whole branding of your designs by changing variable modes from the right menu and seeing changes happen in real-time.
Tip: You can control modes for the whole page in Figma. Deselect everything and click on the variables icon in the Layer panel.
Variables best practices for multi-brand design systems
At Frames X, we have developed an efficient and friendly system for designing systems. Our tool enables the creation of projects compatible with multiple themes and modes without constraining your creativity flow, ensuring high-quality results when combined with custom branding.
Frames X comprises two key elements: the naming convention and the variables structure. Fused into a practical foundation that can be used for large enterprise organizations and, at the same time, can be shrunk for smaller-rapid projects.
Naming convention
Frames X naming convention aims to help you with this decision-making process without putting restrictions on your stylistic choice. The naming convention has a high level of abstraction, which allows for both functional and numeric names used at the same time.
This approach is called contextual naming convention.
Scale-based or value-based names are most common in product design, such names as blue-500, base-300 are highly scalable and helpful for big systems.
However, functional naming is often more readable and can leverage natural language to help better understand the context behind UI, branding and its stylistic decision.
For example, a primary-active variable applied to an element will instantly describe its state and branding color to the end user who is familiar with the basics of web design. While primary-500 will only tell the same person about the position of color within a range of other colors.
Balancing these two approaches in your design is the key to successful communication around the naming convention.
When working with Frames X and design systems in general, you can use functional and scale-based names for your variables. However, there are five fundamental principles to follow for a successful naming your variables:
Avoid vague names such as atoms, molecules, or primitives to name variables and collections. Instead, opt for descriptive words that create a clear hierarchy for the collection. When naming collections, use uppercase letters and choose names that reflect the intended functionality or purpose, e.g., Color, Spacing, Theme, Elevation, etc.
Do not mix variables of different types in the same group. Instead, partition the collection into multiple groups. This will ensure proper organization, avoid confusion when searching for a particular variable, and help keep track of your variables.
Note: When partitioned, each group will still adhere to the collection modes they included.Do not mix functional names with scale-based ones. If your group consists of functional names like color-default, color-hover, or color-pressed, avoid including value-based names such as blue-500, base-200, etc. This will help keep your naming consistent minimizing mistakes when working with variables.
Use scale-based names for similar/identical variables (more than >5) to indicate their position in the group. When a group consists of scale-based variables (name-1x, 2x, etc.,.), it is easier to identify them by their numeric prefix as a reference point for any operation on the entire list, both in Figma and code.
For example, in the case of Spacing variables collection, where the values can range from space-1 to space-x, applying a numeric tag will help you navigate the whole group faster.
Stick to one naming convention. Frames X uses the kebab naming convention with a hyphen (-) to indicate spaces for better readability in the table views. Talk to your developer friend and stick to one method for naming all your variables to ensure better sync when exporting to code.
Applying these principles alone will ensure that your variables are uniform and can be read by others. However, aligning it with your project structure will make these principles shine on your project, helping you scale designs and ultimately transfer them to development.
Organizing variables
Once you have named your variables, organizing them is another crucial step to streamline your work in Figma. At FramesX, we follow a structure convention designed to accommodate projects of any size and ensure consistency.
Frames X structure hierarchy comprises three segments. You can leverage each segment to your advantage by including or excluding it in the final path to your variable. Let’s explore each segment and gain a better understanding:
The category is the top-level folder for your variables. Use a name that is easy to understand and reflects the essence of properties to your variables control, such could be: Shadow, Typography, Spacing, etc. Avoid vague terminology for this segment at all costs.
The context, or the subcategory, is the segment that describes the significant similarities between all variables in the group.
The end value that is applied with a variable. This segment narrows the context to a single property. When choosing names for values, consider the context of the previous subcategory included. For example, if the subcategory is named State, it will be wise/expected for values inside to be named after certain interface states, e.g., active, hover, disabled, etc.
Not all variables should include all three levels of hierarchy
Some variables, like spacing or other single-folder collections, could only have a category name and an end value. Whether or not to add context to a variable depends on if there are any other variables in the group (under the same context).
Avoid unnecessary grouping
Use grouping to provide more precise explanation of the variables' intended use. When creating groups, avoid redundancy and fit your project structure with minimal hierarchy steps possible.
Prioritize groups with special tags e,g. '$"
Add a unique tag or symbol to the top-level group name. Put the most important groups on top of the menu list and access frequently used variables faster when working with selection colors in Figma.
Avoid per-component groups
It is recommended to avoid using component-only groups unless they are needed for prototyping. As they increase time to manage and create organizational debt, slowing you down.
Instead, generalize. If needed, make a separate Component collection where you can set global variables to apply to all of your components, improving the consistency of your elements.
Use scoping to limit variables' visibility
After naming and structuring your variables, adjust the visibility of your variables with Scoping. Click on the adjustment icon in the variables menu to limit which properties they can be applied to.
If you want to dig deeper into how we structure our work around variables, we invite you to visit our interactive guide in Figma and click the Preview button to take tour.
Intro to Figma variables
Variables are essential for design systems, allowing you to store reusable values such as colors, spacing, size, and many other visual design aspects. Utilizing variables throughout your designs will allow you to achieve a fully customizable UI with less labor work.
Variables can future-proof your design decisions and ensure the handoff to the development process. Using variables' best practices will save time in the long run and reduce costs on every new project or sub-brand you create with them.
Explaining variables
What are variables? In Figma, variables have a single source of truth with the benefit of having multiple modes/variants attached. You can think of variables as styles with variants.
Like a style can have multiple color sources attached to a single source, a Variable can have only one source with multiple colors/modes added. If you're familiar with coding, you can think of a style as a CSS class and a variable as a custom CSS property.
A mode in variable represents a different variation for a piece of design it stores. For example, if a color variable is placed into a dark-mode container, the dark mode variant will be activated, and the stored dark mode color will be displayed.
This way, every variable can store up to four modes (variants) on a regular Figma plan. These modes act as transistors for variables, activating specific variable properties based on applied conditions.
The benefit of using variables for UI design
In Frames X, variables are configured to give you 100% control over your project’s branding by default. Aiming for robust functionality without adding excessive visuals effects to your work.
You can easily adjust any part of the system or the whole branding of your designs by changing variable modes from the right menu and seeing changes happen in real-time.
Tip: You can control modes for the whole page in Figma. Deselect everything and click on the variables icon in the Layer panel.
Variables best practices for multi-brand design systems
At Frames X, we have developed an efficient and friendly system for designing systems. Our tool enables the creation of projects compatible with multiple themes and modes without constraining your creativity flow, ensuring high-quality results when combined with custom branding.
Frames X comprises two key elements: the naming convention and the variables structure. Fused into a practical foundation that can be used for large enterprise organizations and, at the same time, can be shrunk for smaller-rapid projects.
Naming convention
Frames X naming convention aims to help you with this decision-making process without putting restrictions on your stylistic choice. The naming convention has a high level of abstraction, which allows for both functional and numeric names used at the same time.
This approach is called contextual naming convention.
Scale-based or value-based names are most common in product design, such names as blue-500, base-300 are highly scalable and helpful for big systems.
However, functional naming is often more readable and can leverage natural language to help better understand the context behind UI, branding and its stylistic decision.
For example, a primary-active variable applied to an element will instantly describe its state and branding color to the end user who is familiar with the basics of web design. While primary-500 will only tell the same person about the position of color within a range of other colors.
Balancing these two approaches in your design is the key to successful communication around the naming convention.
When working with Frames X and design systems in general, you can use functional and scale-based names for your variables. However, there are five fundamental principles to follow for a successful naming your variables:
Avoid vague names such as atoms, molecules, or primitives to name variables and collections. Instead, opt for descriptive words that create a clear hierarchy for the collection. When naming collections, use uppercase letters and choose names that reflect the intended functionality or purpose, e.g., Color, Spacing, Theme, Elevation, etc.
Do not mix variables of different types in the same group. Instead, partition the collection into multiple groups. This will ensure proper organization, avoid confusion when searching for a particular variable, and help keep track of your variables.
Note: When partitioned, each group will still adhere to the collection modes they included.Do not mix functional names with scale-based ones. If your group consists of functional names like color-default, color-hover, or color-pressed, avoid including value-based names such as blue-500, base-200, etc. This will help keep your naming consistent minimizing mistakes when working with variables.
Use scale-based names for similar/identical variables (more than >5) to indicate their position in the group. When a group consists of scale-based variables (name-1x, 2x, etc.,.), it is easier to identify them by their numeric prefix as a reference point for any operation on the entire list, both in Figma and code.
For example, in the case of Spacing variables collection, where the values can range from space-1 to space-x, applying a numeric tag will help you navigate the whole group faster.Stick to one naming convention. Frames X uses the kebab naming convention with a hyphen (-) to indicate spaces for better readability in the table views. Talk to your developer friend and stick to one method for naming all your variables to ensure better sync when exporting to code.
Applying these principles alone will ensure that your variables are uniform and can be read by others. However, aligning it with your project structure will make these principles shine on your project, helping you scale designs and ultimately transfer them to development.
Organizing variables
Once you have named your variables, organizing them is another crucial step to streamline your work in Figma. At FramesX, we follow a structure convention designed to accommodate projects of any size and ensure consistency.
Frames X structure hierarchy comprises three segments. You can leverage each segment to your advantage by including or excluding it in the final path to your variable. Let’s explore each segment and gain a better understanding:
The category is the top-level folder for your variables. Use a name that is easy to understand and reflects the essence of properties to your variables control, such could be: Shadow, Typography, Spacing, etc. Avoid vague terminology for this segment at all costs.
The context, or the subcategory, is the segment that describes the significant similarities between all variables in the group.
The end value that is applied with a variable. This segment narrows the context to a single property. When choosing names for values, consider the context of the previous subcategory included. For example, if the subcategory is named State, it will be wise/expected for values inside to be named after certain interface states, e.g., active, hover, disabled, etc.
Not all variables should include all three levels of hierarchy
Some variables, like spacing or other single-folder collections, could only have a category name and an end value. Whether or not to add context to a variable depends on if there are any other variables in the group (under the same context).
Avoid unnecessary grouping
Use grouping to provide more precise explanation of the variables' intended use. When creating groups, avoid redundancy and fit your project structure with minimal hierarchy steps possible.
Prioritize groups with special tags e,g. '$"
Add a unique tag or symbol to the top-level group name. Put the most important groups on top of the menu list and access frequently used variables faster when working with selection colors in Figma.
Avoid per-component groups
It is recommended to avoid using component-only groups unless they are needed for prototyping. As they increase time to manage and create organizational debt, slowing you down.
Instead, generalize. If needed, make a separate Component collection where you can set global variables to apply to all of your components, improving the consistency of your elements.
Use scoping to limit variables' visibility
After naming and structuring your variables, adjust the visibility of your variables with Scoping. Click on the adjustment icon in the variables menu to limit which properties they can be applied to.
If you want to dig deeper into how we structure our work around variables, we invite you to visit our interactive guide in Figma and click the Preview button to take tour.
Intro to Figma variables
Variables are essential for design systems, allowing you to store reusable values such as colors, spacing, size, and many other visual design aspects. Utilizing variables throughout your designs will allow you to achieve a fully customizable UI with less labor work.
Variables can future-proof your design decisions and ensure the handoff to the development process. Using variables' best practices will save time in the long run and reduce costs on every new project or sub-brand you create with them.
Explaining variables
What are variables? In Figma, variables have a single source of truth with the benefit of having multiple modes/variants attached. You can think of variables as styles with variants.
Like a style can have multiple color sources attached to a single source, a Variable can have only one source with multiple colors/modes added. If you're familiar with coding, you can think of a style as a CSS class and a variable as a custom CSS property.
A mode in variable represents a different variation for a piece of design it stores. For example, if a color variable is placed into a dark-mode container, the dark mode variant will be activated, and the stored dark mode color will be displayed.
This way, every variable can store up to four modes (variants) on a regular Figma plan. These modes act as transistors for variables, activating specific variable properties based on applied conditions.
The benefit of using variables for UI design
In Frames X, variables are configured to give you 100% control over your project’s branding by default. Aiming for robust functionality without adding excessive visuals effects to your work.
You can easily adjust any part of the system or the whole branding of your designs by changing variable modes from the right menu and seeing changes happen in real-time.
Tip: You can control modes for the whole page in Figma. Deselect everything and click on the variables icon in the Layer panel.
Variables best practices for multi-brand design systems
At Frames X, we have developed an efficient and friendly system for designing systems. Our tool enables the creation of projects compatible with multiple themes and modes without constraining your creativity flow, ensuring high-quality results when combined with custom branding.
Frames X comprises two key elements: the naming convention and the variables structure. Fused into a practical foundation that can be used for large enterprise organizations and, at the same time, can be shrunk for smaller-rapid projects.
Naming convention
Frames X naming convention aims to help you with this decision-making process without putting restrictions on your stylistic choice. The naming convention has a high level of abstraction, which allows for both functional and numeric names used at the same time.
This approach is called contextual naming convention.
Scale-based or value-based names are most common in product design, such names as blue-500, base-300 are highly scalable and helpful for big systems.
However, functional naming is often more readable and can leverage natural language to help better understand the context behind UI, branding and its stylistic decision.
For example, a primary-active variable applied to an element will instantly describe its state and branding color to the end user who is familiar with the basics of web design. While primary-500 will only tell the same person about the position of color within a range of other colors.
Balancing these two approaches in your design is the key to successful communication around the naming convention.
When working with Frames X and design systems in general, you can use functional and scale-based names for your variables. However, there are five fundamental principles to follow for a successful naming your variables:
Avoid vague names such as atoms, molecules, or primitives to name variables and collections. Instead, opt for descriptive words that create a clear hierarchy for the collection. When naming collections, use uppercase letters and choose names that reflect the intended functionality or purpose, e.g., Color, Spacing, Theme, Elevation, etc.
Do not mix variables of different types in the same group. Instead, partition the collection into multiple groups. This will ensure proper organization, avoid confusion when searching for a particular variable, and help keep track of your variables.
Note: When partitioned, each group will still adhere to the collection modes they included.Do not mix functional names with scale-based ones. If your group consists of functional names like color-default, color-hover, or color-pressed, avoid including value-based names such as blue-500, base-200, etc. This will help keep your naming consistent minimizing mistakes when working with variables.
Use scale-based names for similar/identical variables (more than >5) to indicate their position in the group. When a group consists of scale-based variables (name-1x, 2x, etc.,.), it is easier to identify them by their numeric prefix as a reference point for any operation on the entire list, both in Figma and code.
For example, in the case of Spacing variables collection, where the values can range from space-1 to space-x, applying a numeric tag will help you navigate the whole group faster.Stick to one naming convention. Frames X uses the kebab naming convention with a hyphen (-) to indicate spaces for better readability in the table views. Talk to your developer friend and stick to one method for naming all your variables to ensure better sync when exporting to code.
Applying these principles alone will ensure that your variables are uniform and can be read by others. However, aligning it with your project structure will make these principles shine on your project, helping you scale designs and ultimately transfer them to development.
Organizing variables
Once you have named your variables, organizing them is another crucial step to streamline your work in Figma. At FramesX, we follow a structure convention designed to accommodate projects of any size and ensure consistency.
Frames X structure hierarchy comprises three segments. You can leverage each segment to your advantage by including or excluding it in the final path to your variable. Let’s explore each segment and gain a better understanding:
The category is the top-level folder for your variables. Use a name that is easy to understand and reflects the essence of properties to your variables control, such could be: Shadow, Typography, Spacing, etc. Avoid vague terminology for this segment at all costs.
The context, or the subcategory, is the segment that describes the significant similarities between all variables in the group.
The end value that is applied with a variable. This segment narrows the context to a single property. When choosing names for values, consider the context of the previous subcategory included. For example, if the subcategory is named State, it will be wise/expected for values inside to be named after certain interface states, e.g., active, hover, disabled, etc.
Not all variables should include all three levels of hierarchy
Some variables, like spacing or other single-folder collections, could only have a category name and an end value. Whether or not to add context to a variable depends on if there are any other variables in the group (under the same context).
Avoid unnecessary grouping
Use grouping to provide more precise explanation of the variables' intended use. When creating groups, avoid redundancy and fit your project structure with minimal hierarchy steps possible.
Prioritize groups with special tags e,g. '$"
Add a unique tag or symbol to the top-level group name. Put the most important groups on top of the menu list and access frequently used variables faster when working with selection colors in Figma.
Avoid per-component groups
It is recommended to avoid using component-only groups unless they are needed for prototyping. As they increase time to manage and create organizational debt, slowing you down.
Instead, generalize. If needed, make a separate Component collection where you can set global variables to apply to all of your components, improving the consistency of your elements.
Use scoping to limit variables' visibility
After naming and structuring your variables, adjust the visibility of your variables with Scoping. Click on the adjustment icon in the variables menu to limit which properties they can be applied to.
If you want to dig deeper into how we structure our work around variables, we invite you to visit our interactive guide in Figma and click the Preview button to take tour.
⟡
⟡
⟡
Frames X is the most extensive and advanced UI library to exist for Figma. If you haven't already, get the Frames X now to receive all future updates and enhance your design workflow — complete design projects faster and get paid more.
See you in the next article!