Skip to main content

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.

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:


Do you want to achieve something like this?

Figma – 28 Mar 21

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

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.

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.

Terms & ConditionsCookie settings