Launched: Absolute position in Auto Layout

This would take auto layout to the next level. Needed oh so badly. When needing to do asymmetrical layouts or add design elements ‘randomly’ placed behind text etc with non-standard offsets, we really need the ability for elements within auto layout to essentially ignore all positioning. Absolute position as the title states is exactly what is needed to be applied to elements. Help us, Figma Team. You’re our only hope.

2 Likes

+1 for this

+1 for this. would really help to add stuff like three-dot-menu dropdowns to components/variants

There’s also the option to hold spacebar before dragging elements on top of auto layouts to ignore positioning. But there’s no solution when it’s already inside.

I should probably create another thread because the spacebar behavior is a bit bugged too.

3 Likes

Would like to see this feature in some future version:
Absolute positioned objects inside Auto Layout Frames

Thank you for the spacebar hack :slight_smile: I was looking for that shortcut for a long time and finally found it :slight_smile: This really helps a lot

Yeah, this absolute positioning is a must. Autolayout is great, but often a pain. Like when you want to have a “x” in top right corner of autolayouted component. Not possible. And it seems like an obvious feature. I know some people who reject autolayout because of this.

1 Like

This solution may help to build all those transparent layers in Material Design components that made me mad. Great idea, guys :heart_eyes:

It’s actually is a little doable already.

You frame the element and move it to the position inside.

The number sit -10px on x and y and the “Clip content” is off.

the component is an autoframe and hug contents, so it scales correctly when I change the text.

In case you wanna make a tooltip to hover over the element, then make another autoframe and do vertical alignment. Then change the frame hight to 0.0001 px and position the element inside to the correct place. On horizontal scale, the tooltip will stay centered.

Hope it helps.

5 Likes

Hi @bourscheid, you can see my file in Figma Community:

Oh! You’re such an angel. Your file is amazing, and those buttons work as fill container too, I’m impressed. Just the overlay doesn’t follow the fill container rule. Thank you for sharing your file with us, @tank666 :grin:

sharing that workaround would be lovely!

Hey @Tannie_Low ,
There might be a better way but this is the solve I have. I built out the section of the the Buy Box area and made an instance with the Mouse Enter to to spawn the tooltip. I dropped that into the page and the element then replaces itself, looking like just the tool tip is activated.

1 Like

It would be great to use the same kind of logic with the grid in Figma as CSS Grid. 1fr or 6fr.

When I make new cards using my component in the component library, I have to frame it and set its resizing to be UD, LR every time, then get to work on the content. If I want to make autolayout content, I have to manually resize the background to fit the size of the content so the card is the right size.

This is a problem when using all of my container components. Ideally, I just want to have an auto layout frame be the highest level, without having the card component as the lowest layer of a regular frame. I’m thinking I could solve this with styles for each part of the card (stroke, effect, background color), but it misses some like corner radius.

What I want is a frame that IS my container (full frame styles?), or at least have the card component behave as a true background so I can use autolayout on the main frame.

For now, is there a way / plugin to bulk add styles to a frame? One that I could be used and updated for my whole team? I know it will still miss radius, but I’m fine with memorizing that.

You could use nested components for this. More here Placeholder Components — Editable components without detaching in Figma - YouTube

I want this as well.

It’s easy enough to create a variable length progress bar using hidden text to change the length of the bar. And you can use Auto Layout to expand the bar around text. But you can’t use a component.

I want to use a component because I don’t want to have to rebuild that for every instance of where that bar is used.

Please and thanks!

This would be so good for a processing state on a text-width button component. I could add a loading animation to the center of the auto-layout button, without it needing to be within the auto layout, and the text layer could be hidden. This way it would respect the width of the button from the previous state and add a loading indicator on top.

currently, you have to move it using arrow keys instead of mouse courser, so you can do the following:
1- put the layer that you want to be floated at the place to you want (visually), it will be nested into the auto layout component automatically to be next to the object not above it (floated) its okey.
2- in the layers panel reorder the layer and move it outside the auto layout component, place into none auto layout component.
3- select the the layer use arrow keys to move it.

1 Like

In case you wanna make a tooltip to hover over the element, then make another [autolayout frame] and do vertical alignment.

I’ve used a 0 size frame hack to position things inside an autolayout wherever I want, but for that to be possible it’s important that the frame is not an autolayout frame.
Is this what you really meant? Otherwise I’m curious how you do it because I don’t understand how that would work.