I’m translating a design from Figma and I’ve reali...

# compose

[Chris Fillmore]

I’m translating a design from Figma and I’ve realized I’m not sure what the equivalent of position: absolute is in Compose.

[Chris Fillmore]

absolute removes something from the document flow and positions it relative to its nearest positioned ancestor.

But, for instance, if I have a Compose Box with its own padding, I can’t use BoxScope.align the way that CSS positioning allows for top, left and such

[Chris Fillmore]

Box {
  val outerScope = this
  Box(
    Modifier.padding(24.dp)
  ) {
    Text(
      text = "some text", 
      modifier = with (outerScope) { Modifier.align(Alignment.TopStart) }
    )
  }
}

hmm

[Chris Fillmore]

Just thinking out loud here

[Chris Sinco [G]]

Usually in CSS relative and absolute are used together between parent and child nodes — in Compose the equivalent would be offsetting a child composable in a Box

[Chris Sinco [G]]

In the snippet you have above, you want Text to be relatively positioned to the first box (grandparent) and not the parent?

[Chris Fillmore]

Let’s forget the example above for a sec. I’m working out of a Figma file that comes from outside my organization. What I’m building is basically a card. The card has a background image, and some combination of a badge, some text, a button.

The card seems like it has 24px padding inside. But in fact, everything in Figma is implemented as absolutely positioned elements relative to the boundaries of the card.

My first attempt at this, I had something like

Surface {
  Box(Modifier.padding(24.dp)) {
    // the contents of the card: badge, text, button 
  }
  // background image here
}

But then I realized that some elements within the card have CSS positioning like this:

position: absolute;
top: 72px;
left: 24px;

So now my 24.dp padding on my Compose Box is not very helpful

[Chris Fillmore]

Anyway I’m thinking I just need to drop the padding and build everything with offsets

[Chris Fillmore]

Or rather, there will be horizontal padding (to allow Text to wrap at the right boundary), and vertical offset for positioning

[Chris Fillmore]

Anyway I’m not at a loss for ways to actually do this, I’m just curious if there’s a better approach that I might be missing

[Chris Sinco [G]]

Gotcha. Yeah I would take the Figma CSS inspect code-gen details with a grain of salt for two reasons - 1) it’s highly likely a web dev would structure things differently from a designer, and 2) CSS and Compose layout systems are different. On #1 especially, as a designer myself, the way I construct a Card in Figma would be much different than how I’d do it directly in Compose code.

[Chris Sinco [G]]

I think what you are describing above works. There isn’t anything you’ve mentioned in your approach that would lead me to say there’s a definitively better way of doing that custom Card.

[Chris Sinco [G]]

Although now looking at this side-by-side it’s quite close hierarchy wise. But the details of how the layout works would still be different between Figma (Auto-Layout) and Compose

[Chris Fillmore]

Very interesting. Thanks for the example! I’m very new to using Figma so I wasn’t sure how to interpret the constraints as they’re presented. I appreciate the discussion.

[Chris Fillmore]

Ultimately I’ve stuck with the Box I originally had, and just subtracted the 24.dp padding from the offset I need to apply. It looks good 👍