Need: web standards! Position absolute, z-index, independent borders?

[Christoph_M]

Hi,

to achieve a move to Figma for our design system, we need more techniques to build our existing web components… please !

• Independent borders (border-left, border-right…)
• Border-radius styles
• Position absolute (for placements of closing-X etc.)
• z-index (you have a layer hierarchy, but in autolayout, sometimes elements need to break that)

To give you an example from our code library:

This is not (!) achievable in Figma if you use autolayout… (I am aware of the 0-px hack, the inner-shadow-hack and some other quirks… but they do not work all the time/in combination). Do you have any other ideas how to achieve that? If not, it would be great to put in on your roadmap! Thank you.

[Gleb]

You can vote for existing ideas and create your own in the #product-ideas category if they don’t exist yet. Some relevant ones I found:

• Partial CSS border support (independent borders for sides)
• Create style for radius
• Absolute position in Auto Layout

[tank666]

Do you want to achieve something like this?

Figma

[Christoph_M]

Thank you! Another day, another hack

I don’t know if that’s a scalable solution, we also use that in a vertical manner.

[Christoph_M]

I did, thank you. But those are like… absolute core features to re-create web layouts. You need those for everyone to create proper inspect outputs for the developers.

[tank666]

An example of a vertical menu in the same file. Follow the link above.
Feel free to customize this solution for your needs.

[Christoph_M]

Hi Tank,

thanks a lot! Would be great if the element als hugs horizontally, based on the text input. That’s what I mean: an element with an overlap is not achievable with Autolayout without any hacks/constraints.

[tank666]

The result is in the same file.