Set Variable/Property to values

You can already assign a variable for width, height, and many other properties. The value can be modified via the Local variables panel or with variable modes - that’s what I do when creating responsive components.

In an auto layout frame, it looks like this:

In a regular frame, hover the field to see the “Apply variable” button:

Damian_Oczki wrote:

You can already assign a variable for width, height, and many other properties. The value can be modified via the Local variables panel or with variable modes - that’s what I do when creating responsive components.

In an auto layout frame, it looks like this:

 

In a regular frame, hover the field to see the “Apply variable” button:

 

hey dear damian 
yes we can use variables to give value to our component and elements. 
but imagine this: i have component that has 4 style and 5 size, untill now we have to create all 5 scale for 4 style it mean we have to create 20 variant. but if we could give property to their height and width and give them value by variables ( as you said ) we just had to design 4 style and controll them all throgh properties. 

If I understand you correctly, then yes, you can do all that.

See the screenshot below. There’s one component with 4 color styles, while width/height/radius is managed via 5 variable modes, so the result is 20 different elements.

Here’s how the variables are defined:

And how they’re applied to width, height, and radius properties:

Damian_Oczki wrote:

If I understand you correctly, then yes, you can do all that.

See the screenshot below. There’s one component with 4 color styles, while width/height/radius is managed via 5 variable modes, so the result is 20 different elements.

Here’s how the variables are defined:

And how they’re applied to width, height, and radius properties:

 

Yes, this approach will work, but we are discussing a single component. What happens in a real project with many components? In that case, we need to create a set of variables for each component to manage its size, radius, and padding.

This is necessary because the standard size for different components is not the same. For example, a medium-sized button might be 48 px, while a medium-sized slider might be 24 px. We cannot manage all components with a single set of variables. 
  

My point is that we can assign Property ( Like “Value” ) for scales and values, similar to how we set properties for “text”.

I will restate, if I understand the OP correctly, as I have a similar problem. 

• In a frame I have three objects (1,2,3).
• Object 2’s height is dynamic based on content within it so it has an infinitely variable height value.
• Objects 1 and 3 need to have the same height as object 2 and
• The frame’s height needs to hug the contents (driven by the dynamic height of object #2). 

Is it possible to set a variable to have a value that references the height value of an object, like the height of object 2?

I could reference that for the height of objects 1 and 3 and set the frame height to hug.

e.g.

1. Object 2’s contents change and its height changes from 100px to 200px.
2. That change updates a variable “Object_2_Height” to have a value of 200.
3. Objects 1 and 3 height is set to variable “Object_2_Height”, so their height is changed to 200px.
4. The frame height changes to 200px because it is set to hug.

Not to talk trash here but I could do this very easily in AxureRP. I’m not a Figma expert and it’s highly possible I just don’t know how to do this. My question is two-fold: Is this possible and if so, how?

​@Roger Soucy You don’t need variables for that; auto layout is enough.

1. Set the frame to hug height.
2. Set the tall object (2) to hug as well.
3. Finally, set the smaller objects (1 and 3) to fill height.

Just in case, here’s how I’ve set up the card to keep the link stuck to bottom:

You could also achieve this using absolute positioning + increasing card’s bottom padding.

Thanks Damian,

I did figure that some objects’ height wasn’t set properly and that fixed the example issueI gave. However, I still would love to be able to set a variable vale to reference a property value.