Launched: Absolute position in Auto Layout

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.

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

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.

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 😁

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.

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.

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.

My colleague has found something similar to what we’re looking in the dropdown section of the Ant Design Open Source (Community) file in Figma. Whenever this icon (see image below) is displayed, the auto layout of the wrapper isn’t taken into account.

Has anyone seen this icon before? I could not find any options in Figma and google isn’t really helpful.

I stumbled across this icon the other day and my layer is behaving the same way (not responding to the parent auto layout frame). Haven’t been able to find anything either. Would love to know how to turn this on for other layers!

Wow, that is interesting. I hope someone figures it out, because I don’t seem to be able to. I wonder if there is an API for that a plugin could leverage - I’d be surprised, though.

A colleague of mine put in a support ticket about it and this is a snippet from the reply she got back:

“This was a bug where layers could accidentally be placed in an auto layout frame with absolute positioning (a feature we may or may not be working on 😉); this got fixed recently.”

So… make of that what you will.

They’re definitely working on it. A bug wouldn’t create an a complete new set of icons. Hopefully they’ll release the update soon.

I just started using auto layout today for a new project and I need this feature. I have a bottom drawer that a user can slide up that will cover content on the AL screen. It would be great to allow absolute positioning so it can go over the item. My non-ideal solution is to remove auto-layout for the frame I need.

super usefull!

Edit:

Now it is officially supported:
Absolute position

Original answer:

You can achieve the “absolute positioning in auto layouts” with a hack: Ghost elements.

Take this tooltip for instance(① and ②). The popup is “absolutely” positioned above the content element with auto-layout. And it’s always horizontally centered.

To do the hack, we use a “ghost element”, which is a frame with 0 width and 0 height. However in figma, whenever you set width/height to 0, it always gets clamped to 1.
(③ and ④)

But when you type in “0.001”, magic happens.
(⑤ and ⑥)

Now set both height and width to “0.001”, and uncheck “clip content”. You get a ghost frame which has no size but can contain visible children.
(⑦)

Put the ghost element into an auto-layout frame and add the elements you want to display absolutely positioned as its children, and adjust the position of the children, voilà!
(⑧)

Note: You need to set the auto-layout direction to make the ghost element correctly respond to the layout change

I have made a demonstration project:
Tooltip with auto-layout

Is there a reason as to why I can’t update the height of an absolutely positioned Component inside of another Component? Where as I can do it if the Component isn’t absolutely positioned?

Components inside other components shouldn’t have overridable sizing, no matter if they’re absolutely positioned or not. The fact that you can do it when it isn’t is weird. This is assuming we’re talking about an instance, not a master component. Otherwise yes you can edit child components, but then you should be able to do it no matter if it is absolutely positioned or not, so it’s still weird.

My thoughts exactly - left my head scratching. (It wasn’t a Master Component.)

Since then I’ve decided to achieve the same using a different workaround - so still an unsolved mystery.