Joseph
5:15
How to use Component variables in Framer
Learn how to use Component variables in Framer to expose the properties each instance should control, including labels, icons, colors, links, and visibility. Variables reduce the need for large sets of Variants while the Component keeps its shared structure, layout, and styling consistent across the project.
Lesson details
Component variables turn selected properties inside a Component into editable controls on each instance. Use them for values that change often, such as text, links, colors, images, or whether an icon appears. The Component still controls the shared structure and layout.
Create a variable from a supported property, give the control a clear name, and bind one or more layers to it. A single color variable can control the text and icon together, while a Boolean variable can show or hide optional content.
Keep Variants for meaningful style or layout changes, then use variables for the content and smaller property choices inside each Variant. The Agent can consolidate a crowded Component, replace repeated cards with instances, and preserve the content of each card as variable overrides.
Frequently asked questions
When should I use Component variables instead of more Variants?
Use variables when instances need different content or property values but share the same structure and layout. Labels, links, colors, images, and visibility controls rarely need separate Variants. Keep Variants for meaningful visual states or layout changes.
What can a Component variable control in Framer?
A variable can expose supported properties from inside a Component as controls on each instance. Common uses include text content, colors, links, images, visibility, and numeric values. The Component still defines which properties editors can change.
How do I create a Component variable manually?
Edit the Component, select the layer and property you want to expose, then click the plus icon and create a variable. Name the variable for the control it provides. Framer binds that property to the variable and shows it on Component instances.
Can one variable control more than one layer?
Yes. Create the variable once, then bind compatible properties on several layers to it. A color variable can control the text and icon color together, which gives each instance one clear control instead of separate settings for both layers.
How can a the Agent simplify a Component with too many Variants?
Ask the Agent to consolidate the Component to the fewest useful Variants and expose the remaining differences as variables. It can also turn repeated cards into instances while preserving each card’s text and artwork as instance-level values.
Continue watching
Load more