Add variables to X and Y fields

Just like driving width and height, I want to dynamically position elements in weird ways too.

But not weird like this:

variables-move-box

6 Likes

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 :smiley:

6 Likes

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.

2 Likes

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.

3 Likes

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 :wink:
[/quote]

6 Likes

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.

4 Likes

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 Like

+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 :heart:. 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! :slight_smile:

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