I have a little challenge with Auto Layout in FIGMA.
I need to build a navigation where every element has only a border in the bottom, the active one everywhere but on the bottom, ie some kind of a tabbed things.
I couldn't really build that with Auto Layout, played with nesting some of them too.
Any hints how to approach that ?
/B
I checked the documentation and it seems it's not possible, you have to forfeit something.
Auto Layout only allows closed rectangular shapes to be used as frames. Either you create a button that won't auto expand if you change the text, or you use tabs without a border.
You can overcome this by…
using drop shadows to simulate the stroke (a box shadow may be how it gets developed anyway)
Making each tab a nested auto layout as well. Inside you can include a line or rectangle object as part of the layout.
I created this with Variants and using inner shadows and drop shadow to create borders. Also when showing the active state, my active component needed to be higher 1px than the passive one in order to cover the line below. I created tabs as frames and styled them.
Of course, they are still auto layouts and change their size by content.
Also here is the Figma file I created.
More info on Variants is here
I have discovered that you can use a linear gradient for the stroke type. Using this type of stroke type you can adjust the secondary color (the color on the right hand side of the gradient slider) to fade to the primary color (the color on the left hand side of the gradient slider), and this will allow the border around the component to fade away to the top.
