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

Hi,

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

  • 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:

Bildschirmfoto 2021-03-28 um 11.44.49

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.

2 Likes

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:

1 Like

Do you want to achieve something like this?

Thank you! Another day, another hack :wink:

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

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.

2 Likes

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

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.

The result is in the same file.