Add variables to X and Y fields

Hey @IraX,

Thanks for posting and sharing this idea!

After taking the time to think about it, I could indeed see a few situations where this could be quite useful and I have noted it for our Product team as a feature request!

At this point, I can’t guarantee this will be implemented as such or at all but I can confirm our teams will definitely take it into consideration as we’re currently focused on improving and updating these new features (variables and others) to make sure they cover all our community needs 😃

I am also looking to use X & Y coordinates as variables. In my situation, I would like to have overlayed elements appear at the top and bottom of a scrolling table window. Basically, when the “Y” value of the table’s content is =0, the overlay elements would be hidden. When the contents of the table is scrolled or the “Y” value then becomes less than 0, the overlay elements will then become visible.

In addition, I would also like to use this value for controlling the scrubber location.

Example Image:

Hey @mfelix, do you know why it wasn’t implemented for the beta?

I was surprised when I couldn’t add variables to the x and y values, all the other layout properties have this ability. I wanted to use them to control drawing outside the bounding box changing between modes.

Same here - I’d like to apply a variable to the X/Y fields, for an absolutely positioned element in an auto layout frame.

Specifically, this can be useful for positioning tooltips above content with the same offset - set via a variable.

This is a VERY common use case — developers can easy change the transform x-position in CSS and this is the exact same thing.

A typical use case would be “When this thing is tapped/clicked, that thing moves 40px to the left”…this absolutely needs to be standard 😉
[/quote]

Any updates? I’d also like to use this feature.

I’d love this feature too. Right now, I’m making a slider (range input), and I was hoping to use variables to change the y position of the slider thumb and have the colored slider progress change in height at the same time. I can do the latter, but I had to come up with a workaround for the former.

Workaround

Wrap the node that you want to change the x or y position of with another node (group, rectangle, etc.), apply the variable to the width or height of that wrapper node, and use auto-layout to position the inner node wherever you’d like within the wrapper. You can also do this with multiple nodes in one wrapper.

For my slider, I put the progress and the thumb in a group and did the workaround, and then I applied a negative vertical gap to get them to overlap.

I just ran into this for the first time. In my case, I have a navigation drawer which can either be a modal (slides in and on top of the main content when someone clicks the “show menu” control), or, for wider width screens, fixed (always sits on the left side, takes up 360px in width). I wanted to make it so in the second case, the content width changes to screen width-360px and shifts over to X position 361. I’ll try out the workaround mentioned above, but so far it’s been unsucessful because the width needs to shrink and go to the right, not the left. Because of the modal mode, the nav is on a different layer from the content.

Yes, I also really want to be able to add variables for the X and Y coordinates, and also to the SPACING number. Thanks!