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!

+1
Yes please! It’s very much needed and makes a lot of sense!
I’m currently working on a component and could really use this function right now …

Very clever workaround, thanks for sharing!

@Andria_Brown, any chance you could put together a demo of your workaround? I’m really struggling to understand how to implement it.

Thanks for this workaround ❤️. Although, I am still struggling, I am getting closer to the solution of my idea.

+1 from >100 ux engineers and designers from large enterprise client!

When building embedded software, we use absolute positioning super often, doing so for different screensizes needs x/y values on different modes (which represent different but similar screens).

hello,

it would be very much appreciated if it was possible to apply numeric variables to the x & y position of absolute positioned elements within components. Here is the case i am working on:

While everything is completely tokenized and adjusts to different screen densities, i cannot apply the positioning tokens to the design defining the absolute positioning of the dropdown -list flyout. As you can see the distance needs to be adjusted as well. This would be solved if a dynamic token was applied.

This flyout needs to be absolute positioned, so it can be above other elements in forms.

Please make it possible to apply variables to the position of absolute positioned elements! 🙂

Plus one for the numeric x & y values to be exposed for variables. This would lead to more possibilities with interactions in prototyping.

One year later, and this still hasn’t been implemented?

+100 to this. It would be a very valuable way to build common component structure across many platforms. Please implement asap!

This would also be highly useful for defining a variety of on-scroll events even without having an on-scroll trigger. As scrolling is moving content through the viewport along the Y or X axis, variables could then be assigned to the position of various elements.

Look at the progress bar in this thread for instance – if you wanted to recreate it in a prototype with X and Y variables, you could assign an Y variable to the top of the thread and define conditional statements for set increments. "If scroll-variable == -120px set variable progress-date to “July 2023"”, you get the gist. The possibilites would be endless!

I would love if I could set a frame to position: absolute via a variable. I don’t believe this is possible, but it seems like a basic functionality that could yield prototyping benefits.