A Variable can be considered a customizable property control added to your components.
Variables allow anyone to easily change properties for any instance of your component, providing the freedom to slightly tweak an existing component instead of having to create a new one.
Any property can be a variable, from text to color to border-radius*.
Note: For the current Beta release, some properties cannot yet be turned into a variable. Read more on this here.
Why use Variables?
When you create a new state, or Variant, for your component, you are telling the component to animate to this specific state after a specific event (e.g. Hover or Tap).
A new state will mean the component displays new values for certain properties, for instance animating from a grey border-color to a light blue border-color.
Reusability of components
As components are made to be reused, you want to be able to tweak these properties for instances you create.
Therefore, if you want to use an instance of your component elsewhere in your design, you may require a slightly different hover state with a different border-color.
If the border-color property has been turned into a variable, back on the regular canvas any instance of your component will display the Variable within the Properties Panel, allowing you to easily customize its value for only this specific instance.
Editing a Variable
The Variables overview will present all the Variables that have been created for the currently selected component.
Decided to rename a Variable or give it a new min or max value? No need to dig into the properties panel — just edit them on the go within the Variables overview instead.
Configuring a Variable
From the Variables overview, you can even configure how a Variable should behave in the properties panel.
Depending on the type of Variable (e.g. Text, Number, Color) Framer provides the freedom to configure your property control.
Some examples of configurations you may encounter are:
- Variable Name
- Minimum value
- Maximum value
- Use a slider or stepper for numeric Variables
- Number of unit points controlled by a stepper/slider/number ticker
- Units (degrees or percentages)