UX Design

In the dynamic realm of digital design, the ability to seamlessly adapt to diverse screen sizes and resolutions is paramount. Enter Figma’s Variable Design, a revolutionary approach to creating, managing, and innovating in user interfaces. 

This game-changing feature empowers designers to break free from the constraints of fixed elements and rigid layouts, offering a fluid canvas where creativity knows no bounds.

Variable Design in Figma unlocks a world of possibilities by allowing designers to define multiple states for an element, enabling it to morph and adjust based on various parameters. 

This newfound flexibility caters to the ever-evolving landscape of web and app design, ensuring a seamless user experience across devices. In this article, we delve into the intricacies of Variable Design, exploring its functionalities and providing insights into harnessing its potential to the fullest.

Variables in Figma are a way to save values that can be used for any design property or prototyping action. They can save time and effort when managing design systems, building prototypes, and making mockups.

Exploring the Varied Realms of Variable Types in Figma

Color: Specify colors for elements using this option. Background, text, stroke colors, and solid fills can be made using this option.

Number: Using this option, give elements numerical values. We can manage margins, Padding between elements as well as frames, corner radius, widths, heights, and auto layout using numerical variables.

String: Define text and word variations using the string option. For instance, we could modify a layout in another language using String variables.

Boolean: Using this option, we can give elements Boolean (true/false) values. The conditional visibility of elements and instances of variants with true/false values can both be managed with boolean variables.

Mastering Variable Management

Creating and Managing Variables 

To create variables in Figma, access any collection, and click on “+ Create variable.” Choose a variable type from the dropdown menu, then assign a name and a value. 

For duplicating a variable, select one or more variables and press ⇧ Shift Enter. To remove a variable, right-click on it and select “Delete variable.”

Grouping Variables 

For organized management, we should consider grouping variables into Collections and Groups. These groups can be categorized by attributes such as colors or fonts, simplifying the editing process and improving navigation. By grouping elements with similar functions into collections, you can establish connections between Figma variants, streamlining your design workflow.

Variable’s Alias

A variable’s alias, connects its value to another variable. This makes maintaining revisions to your designs more effective and enables you to implement design tokens.

 To create an alias right click on a variable and create.

Editing and Scoping a Variable

To edit a variable we hover over, right click and click on edit variable.

For bulk edit, select all the variables using control and right click to edit variables.

• Name the variable a new one.
• Include a description to specify how to use a variable.
• Change the value of the variable.
• In order to scope a variable, use the checkboxes.
• Include code syntax
• Withhold the variable from publication

We can restrict which attributes a variable can be applied to by scoping it. This removes the element of guesswork from design and offers you better control over where the variable can be used.

Scoping is available for number and color variables.

For number variables, we can scope:

• Corner radius
• Width and height
• Spacing and padding
• Text content

For color variables, we can scope:

• Frame fill
• Shape fill
• Text fill
• Stroke

Modes of Variables

Variable modes represent various design contexts, with each mode storing a unique value for variables within a collection. When a variable collection includes multiple modes, quickly switch between them to adapt designs for different scenarios on layers and elements.

These modes are useful for:

1. Switching between color themes like light and dark modes.
2. Testing different languages to check copy flow.
3. Adjusting device sizes for varying spacing and padding.

Objects with variables usually inherit their mode from the parent container. When there’s no mode set in any parent containers, objects use the collection’s default mode 

Transforming Wireframe to Design Using Variables

1. I initiated the project by crafting the initial frame and establishing the fundamental design.
2. With the basic design in place, the next step involved initiating the process of defining variables.

Creating Variables

• I started by defining the frame and creating variables on the right side. 
  
• Next, I established a collection called “Primitives-Netflix” and defined color, spacing, and radius variables within it.

Grouping Variables  

• I then grouped the variables into categories by selecting them with Shift and right-clicking to access the grouping option.

Creating Tokens and Alias   

• After establishing and organizing the primitives, I created a new collection named “token-netflix.” Here, I began the process of creating tokens and paid particular attention to naming conventions.
  
• In the context of colors, I chose a more efficient approach. Rather than defining entirely new colors, I created aliases for them directly from the primitives. This involved a simple right-click on the color value, enabling me to select the necessary color from the existing primitives.
• This tokenization process was extended to cover all aspects, including colors for borders, backgrounds, and text. To create aliases for numeric values, I followed a slightly different procedure. Instead of right-clicking, I clicked on the variable icon that appears when hovering over the value. This approach facilitated a streamlined and well-organized design workflow.

Creating Modes  

• To set up modes, I simply clicked on the plus sign in the upper right corner of tokens, defined the new colors using the same alias approach, and renamed the modes as necessary.

Managing, Editing and Scoping Variables  

• To edit a variable, simply right-click on it and make the necessary changes, including scoping it as needed. If  want to change the entire token, can edit the values directly in the primitives.

Applying the Variables in design  

• After creating the tokens, I applied them to the design by clicking on the variables button. Then, I chose the suitable token for padding, colors, and border radius.
  
• Once I finished designing, I duplicated the frame and used the icon next to the layers to apply the theme throughout the frame. It was an easy process – I just selected the frame and found the option below the layers to customize the theme or enable automatic adjustment when placing the design into predefined frames. This made for a straightforward and consistent design process.

Summary

Consistency is essential in the realm of design, and variables in Figma provide a whole new level of design management. Throughout this blog, we’ve explored the skill of creating and managing variables to improve your design productivity.

In conclusion, mastering variables in Figma isn’t just a design skill; it’s a strategic move towards efficiency and precision. Incorporate these techniques into your workflow and elevate the design with power of Variables.