Component Variables

Variables give your components super powers.

Variables allow you customize small parts of a component like a button title or background color. They will appear as properties for the used instances of your component:

When you create a component, Framer automatically creates some variables for you from text fields and image fields. But you can manually create and use as many variables as you like. Just edit a component and find the Variables button in the top right corner. From there you can add different types of variables.

Now that we have a new variable, we have to connect it to a property to use it. Let's hook this Tint up to the button background color. Find the background color property and click the plus next to it. Then, select the Tint variable.

Now if you select a component instance on the canvas you'll see that you have two properties that you can customize: title and tint.

Component Variables

Variables give your components super powers.

Variables allow you customize small parts of a component like a button title or background color. They will appear as properties for the used instances of your component:

When you create a component, Framer automatically creates some variables for you from text fields and image fields. But you can manually create and use as many variables as you like. Just edit a component and find the Variables button in the top right corner. From there you can add different types of variables.

Now that we have a new variable, we have to connect it to a property to use it. Let's hook this Tint up to the button background color. Find the background color property and click the plus next to it. Then, select the Tint variable.

Now if you select a component instance on the canvas you'll see that you have two properties that you can customize: title and tint.

Component Variables

Variables give your components super powers.

Variables allow you customize small parts of a component like a button title or background color. They will appear as properties for the used instances of your component:

When you create a component, Framer automatically creates some variables for you from text fields and image fields. But you can manually create and use as many variables as you like. Just edit a component and find the Variables button in the top right corner. From there you can add different types of variables.

Now that we have a new variable, we have to connect it to a property to use it. Let's hook this Tint up to the button background color. Find the background color property and click the plus next to it. Then, select the Tint variable.

Now if you select a component instance on the canvas you'll see that you have two properties that you can customize: title and tint.