Building Scrollable Tabs with Auto-Layout in Figma
Auto-Layout is a new feature from Figma that allows your frames to respond more naturally to the content within.
When you add Auto Layout to a frame…the frame’s size is then determined by the total size of the items within it…This makes last minute requests like tweaking button copy from “Buy” to “Add to basket” a breeze. As you edit the text, the frame resizes automatically.
It feels a bit like magic, but it has some limitations too. To demonstrate, I’ve rebuilt a material-style tab bar in auto-layout.
View file in figma.
The Old Fixed Tab Bar
Here we have a fixed tab bar. Fixed tabs display all tabs on one screen, with each tab at a fixed width. This is fairly easy to do without auto-layout, since the width of each tab won’t ever change. But let’s say we wanted many tabs, and decided on scrollable tabs instead?
Well, firstly, if we add a new string, the component breaks.
We need to manually re-size and reposition. This is hugely time consuming. We want to set the padding once, and let the code do the rest. This is where auto-layout comes in.
Auto-Layout to the rescue!
To recreate this with auto-layout, I dive into the text layer and press shift+A to wrap it in an auto-layout. I set the background color to white and set the padding to mimic the height of the original tab bar (48).
We can then select all three new tabs and shift+A again, to create a parent auto-layout. We do this so the string length inside a tab not only impacts the parent container, but the next level up and we do not have to worry about any overlap or re-positioning.
We now have a ‘responsive’ horizontal list of tabs that will take any length string, and the design won’t break. Awesome.
The final thing left to do is set the active tab indicator.
Trouble in paradise
Before auto-layout, I would create a full-width divider, and pin it to the bottom, left and right of the frame. Currently, auto-layout doesn’t play nicely with constraints, so if we drop this sort of divider in, we get something like this.
The hot-fix
My workaround for now, is setting a drop-shadow with 0 blur directly on the tab.
The drop shadow is a property of the frame, so it will grow and shrink based on the string, which is the desired behavior.
Overall, this new tab bar is way more flexible. I build it once, and never need to re-size it again. It can handle different languages, and even icons inside each tab, without impacting the overall look and feel.
