You create a component variable in Figma by first creating a variable and then applying it to properties within your component. Here's a step-by-step breakdown:
1. Create a Variable:
- Navigate to Local Variables: From any collection, click + Create variable.
- Select Variable Type: Choose the appropriate variable type from the dropdown menu (e.g., color, number, string, boolean).
- Name and Value: Assign a meaningful name to your variable in the first column and set its initial value in the second column. For example, you might create a variable named "Button Background Color" and set its initial color to a specific hex code.
2. Apply the Variable to Component Properties:
- Select the Component: Open your component in Figma.
- Select a Property: Select the specific property within the component that you want to control with the variable (e.g., the fill color of a button's background, the text content of a label, the corner radius of a shape).
- Assign the Variable: In the right sidebar, where you would normally set the property's value, you should see a variable icon (looks like a connected circle). Click on this icon.
- Choose Your Variable: Select the variable you created from the list. The property will now be linked to the variable.
Example:
Let's say you have a button component and want to make its background color easily customizable across your design system.
-
Create a Color Variable:
- Name:
Button/Primary/Background - Value:
#007BFF(example blue color)
- Name:
-
Apply to Component:
- Open your button component.
- Select the button's background layer.
- In the Fill property in the right sidebar, click the variable icon.
- Choose the
Button/Primary/Backgroundvariable.
Now, whenever you change the value of the Button/Primary/Background variable, all instances of your button component where you've applied the variable will automatically update.
Key Considerations:
- Variable Collections: Organize your variables into collections for better management. You might have a collection for "Button Variables," "Typography Variables," etc.
- Modes: Use modes to create variations of your variables based on context (e.g., light mode vs. dark mode).
- Scope: Consider where you want the variable to be accessible within your file or team library.
By using component variables, you can create more flexible and maintainable design systems in Figma, ensuring consistency and simplifying updates across your projects.
