Deconstructing Auto vs. Absolute positioning in Figma as an Android developer.

How to translate auto and absolute positioning properties from Figma to Jetpack Compose

In my previous post, I talked about Auto Layout, a Figma property that lets you create designs that grow or shrink as you want. This makes it easy to evolve your design as you add new layers to it.

Here is an example of how easy it is to add a new image to an existing list without making any other modifications. The frame has the following auto-layout properties set:

1. Layout direction: Vertical. This indicates that objects are added or removed along the y-axis.
2. Spacing: 20. This sets the gap between items.

When a new item is added to this frame, it is added in the vertical direction, spaced from the item above it by 20 px.

However, there might be instances where we do not want a child of the frame to adhere to the auto-layout properties of the parent frame. Maybe this is an image (the green check) that stays in the same position no matter how many photos are added to the list. This can be achieved using Absolute Position.

To enable absolute position, select the child of the auto layout frame and click the [+] button in the right sidebar. Absolute position excludes the child from the auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move.

Because objects with absolute position are treated as objects in a regular frame, you can apply constraints to determine how they respond when its parent auto layout frame resizes.

In Jetpack Compose, children with absolute and auto positioning can be handled by splitting them up. The children that are auto-positioned are added to a row or column which in turn is added as a child of a Box with the other absolute positioned children. The Align and Offset modifiers can be used to manage the positioning of all elements within the Box.

Using the Upspeed Figma plugin, here is an example of how the above design with both auto and absolute positioned nodes can be translated into the Jetpack Compose.

Summary

In this post, I talked about how Figma’s absolute position property allows nodes to be excluded from the auto layout flow while still keeping them in the auto layout frame. I, also, described the easiest way to translate this into Jetpack Compose.

In future posts, I’ll continue to dive into the details of Figma and how they translate to a developer building on Jetpack Compose.