A Variable can be considered a customizable property control added to your components to customize the look and feel of your component’s instance.
Variables can be used in two main ways:
- For standard properties such as Opacity, Visibility, Background
- For events, to enable navigation from elements in a component
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.
Most properties can be linked to a Variable, from text to color to border-radius. Support for most text properties, such as font-size or font-weight, is on its way.
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 also want to be able to tweak the properties for instances you created.
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 main 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.
Where your Variables can be used
The core idea around Variables is that you are enabling yourself and others to customize and use certain properties and events of elements within your component.
In short: we are creating a control for ourselves to tweak our component anywhere we use it.
However, the moment we are creating a Variable for e.g. the text of a button, we enable ourselves to tweak the text wherever we use an instance of our button.
Availability of Variables in nested components
This sounds straightforward for a simple button that is placed directly on our canvas. However, if we nest our button in a navigation component, we can no longer tweak the button’s text from our navigation component.
This is because a Variable gets 'lifted up' one layer higher, to where we display our component. If we then have a button nested within a navigation component, any Variable of this button is now only available within the navigation component’s canvas. This means we can edit the text of the button only when we are in the navigation component, and not on the main canvas anymore.
To have the text of the nested button component become customizable on the main canvas, we need to lift the Variable up once more by turning the Variable property control into another Variable.
While most Variables you create will be for standard properties like opacity or fill, you may also find yourself creating an Event Variable.
These can be used to select specific elements within a component that should trigger an interaction such as a Modal or Instant transition.
Creating an Event Variable
To create an Event Variable, follow the steps below.
Tip: Carry out these steps within the Primary layer, so your changes affect all your Variants.
- Open the Component Canvas of your component
- Select the layer that should contain a trigger-able event.
- To the top-right of the Properties panel, click the + Interactions section
- Choose Create Event
From the Variables window that opens, you can now add a custom name for your event to recognize it later on.
Editing a Variable from the overview
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 configure how a Variable should behave and display in the properties panel.
Depending on the type of Variable (e.g. String, Number, Color) Framer provides the freedom to configure your property control.
The variable overview also shows the different variable types that can be created:
|Number||add any numerical value to your layer|
|String||can be used on any text layer, allowing you to replace the text contents for any instance|
|Boolean||gives you to option to toggle between two choices, such as true or false for the Visible property|
|Color||alter the color of the layer within your component|
|Image||enable image fills to be added to a layer|
|Event||adds actions to any layer within your components, so you can create transitions based on a custom created event|
Note: Not every variable can be added to any property. For example, an image fill logically would not be customizable with a String variable.
Depending on the type of Variable, you get even more control over the type of configuration you want to allow.
For example, a number value can be set in different units, such as percentages, degrees, or absolute values.
Some other 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