Skip to main content
Solved

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:

Bildschirmfoto 2021-03-28 um 11.44.49

Bildschirmfoto 2021-03-28 um 11.51.40

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.

Best answer by 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:

View original
Lauren_Beagrie
O
Adam_Dipper
3 people like this
  • Lauren_Beagrie
    Lauren_Beagrie
  • O
    Owen_Fender
  • Adam_Dipper
    Adam_Dipper
This topic has been closed for comments

7 replies

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • Answer
  • March 28, 2021

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:

Mihael
1 person likes this
  • Mihael
    Mihael
tank666
  • tank666
  • 4862 replies
  • March 28, 2021

Do you want to achieve something like this?

Figma – 28 Mar 21
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Christoph_M
  • Christoph_M
  • Author
  • New Participant
  • 9 replies
  • March 29, 2021

Thank you! Another day, another hack 😉

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

Bildschirmfoto 2021-03-29 um 10.24.36

Christoph_M
  • Christoph_M
  • Author
  • New Participant
  • 9 replies
  • March 29, 2021

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.

Liza_Plotnikova
Romulo_Pulcinelli_Benedetti
2 people like this
  • Liza_Plotnikova
    Liza_Plotnikova
  • Romulo_Pulcinelli_Benedetti
    Romulo_Pulcinelli_Benedetti
tank666
  • tank666
  • 4862 replies
  • March 29, 2021

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

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Christoph_M
  • Christoph_M
  • Author
  • New Participant
  • 9 replies
  • March 30, 2021

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
  • tank666
  • 4862 replies
  • March 30, 2021

The result is in the same file.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings