Auto Layout tab design problem

Hello folks,
I’m a recent switcher from Sketch and am stumbling with Auto Layout with a simple task - can you help:

I want to create a tab component that is dynamic and can be updated with the relevant text - Auto layout no problem there.
I want the selected state to have a coloured line under the text similar to Android, however i cant figure out how to add this element and the tab still be dynamic.
Is it a case of nesting Auto layout components as this seems very complicated for a simple tab

The unselected tab is just a frame with the test and Auto Layout added for the padding either side of the text.

Can you help?

So funny enough, I just posted something in the Feedback forum about this very issue.

The answer to your question is yes–currently, the only way to accomplish this is to nest Auto Layout frames. It IS very complicated for a simple tab, or for anything else where you want a divider to span the full width of the parent while the rest of the content is padded. I’m hoping the Figma folks will consider giving us an easier way to do this in the future.

(To that end any votes on the post I linked above will help bump this issue higher in the priority list for the Figma folks!)

Edit: an example to show you how to structure your tab Figma

Thanks for the quick reply. How disappointing, that feels such a simple requirement.
I feels a little like the old Anima Auto Layout day when you would have to used transparent boxes to fake what you wanted.
Still at least i know know

Thanks again

In that specific case you should probably upvote this (independent borders)

@RizePoint_Product in your case I’d say upvote the “Absolute positioning” thread

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.