How to use Absolute Position within an Auto Layout frame in Figma

A step by step guide on creating a UI element that uses absolute position within an auto-layout frame.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 09/01/2023 at 15:43
Last Updated on 09/01/2023 at 16:32
<p>A flower that represents Figma with the text "Absolute Position within Auto Layout" beneath it.</p>

A step by step guide on creating a UI element that uses absolute position within an auto-layout frame.

SubscribeCheck out our Figma Resources Guide

Step One: Create the Auto Layout Frame

<p>A screenshot of Figma showing a frame that uses auto layout.</p>

In Figma, create auto layout frame that will hold the UI element with the absolute position.

How to use auto layout in Figma

Step Two: Add the UI Element

<p>A screenshot of Figma showing a frame that uses auto layout. A circle has been added that looks out of place.</p>

Add the UI element that will have an absolute position to the auto layout frame.

Step Three: Activate Absolute Position

<p>A screenshot of Figma showing a frame that uses auto layout. A circle has been added that looks out of place. We have highlighted the absolute position button that is found on the right menu side bar, on the top right.</p>

Click the Absolute Position button on the top right of the right side bar.

Step Four: Set the Absolute Position

<p>A screenshot of Figma showing a frame that uses auto layout. A circle has been added that looks out of place. We have highlighted the x, y, width and height values that appear on the right menu side bar. Change these to change the absolute position.</p>

Configure the absolute position of the UI element through the inputs on the right menu side bar or by clicking and dragging.

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe