Responsive Flex Grid in Sketch using AutoLayout and Stack Groups
Improving design systems for structure, modularity, and scale
Tools like FlexBox in CSS, UIStackView in iOS, and FlexboxLayout in Android have long given developers the necessary workflows to handle the multitudes of adaptive and responsive views that exist today.
For designers however, the layout design process in some of our favorite design tools have always been more manual, more static, more tedious, and generally less mathematically precise. But thanks to the amazing work by the folks at Anima, we may soon have the structure and flexibility we need to better bridge that gap.
With the new Stacks feature that is bundled into the latest Auto-Layout plugin, we now have a workflow that accommodates the UI output better and lets us achieve more consistency and maintainability across our design systems. (Disclaimer — This concept is still at an early stage. Not every type of layout will benefit from this system so mix and match as you see fit).
The demo
In the video below, I’ve put together a proof-of-concept flex grid layout to showcase the awesomeness of Stacks. It’s an artboard that mirrors the structure of a basic web page.
While still in early exploratory stages, the following functionality is baked into the template:
- Desktop to mobile in a few clicks.
- Artboards are resizable and grid alignment/distribution does not break
- Grid structured by:
Body
—Header
—Main
— —sections
— — —rows groups (has sibling box-sizing layer)
— — — —rows
— — — — —columns
— — — — — —modules
— — — — — — —components (nested symbols w/ internal logic)
—Footer
- Use nested symbols, defined by a combination of Sketch Resize properties, Autolayout pinning, and stack groups to create a modular system of swappable components.
- Layout adjusts to artboard width (content has a max-width of 1200px, and mobile has built-in gutters).
- Variety of
column
distributions and easy collapsing/modifying of gutters. <header>
and<footer>
grow and shrink independent from<main>
.- Height changes to
<main>
push the<footer>
down in the artboard, while keeping margins and paddings intact like a webpage would. - The height of
<rows>
can be adjusted to affect the height ofchild columns
- The alignment of
columns
(top, middle, bottom, stretch) can be defined at the row level. - Adding a new
column
(or deleting one) from therow
automatically adjusts the width ofsibling columns
to fit accordingly. - Adding a new
child module
within thecolumn
will make that column grow vertically (modules contain any number of content types, such as images, text, lists, tables, groups, and symbols) - The alignment of
modules
(left, center, right, stretch) can be defined at the column level. - symbol swap components to replace content or pin new layers to the existing component.
- The desktop artboard has been set up to use an 8pt baseline grid.
The Sketch File
Here it is. Feel free to improve it in any way and let me know.
*IMPORTANT* — The file will NOT work unless you have the latest release of Auto Layout with Stacks Support (.0.2.0 as of this writing).
Some final thoughts
I hope that was useful to some folks. I know I’ll be exploring the possibilities of Autolayout and Stacks deeper. As of this version, I’ve noticed a few small quirks with the math rounding, but hopefully those will get sorted out in time. Amongst some of the requests I’ve suggested to the devs, I think these could be valuable.
- The ability to add a background to a stacked group (parent row of the columns) without affecting the stack logic. In HTML/CSS, this would simply be done at the
<group>
or “div” level, but Sketch does not allow a way to do that as of now.
There is an approach to doing this right now that involves grouping a background layer with a stacked group and pinning the bg to top/left/ 100% width & height, and while the background grows to accommodate the content, it does not shrink when the content is removed. I believe the shrinking is already on the team’s TO-DO list. - The introduction of breakpoints in the artboard, and symbol swapping based on the artboard (swapping a 4-item nav with a hamburger icon when
artboard < 400px
, or better yet, using a container queries approach. - With said breakpoints, the ability to toggle between
horizontal to vertical
stacked groups, such that the columns stack on top of each other when there is insufficient space. And for columns to wrap if specified. - The ability to specify percentage width per
column.
(Update — A version of this idea has just been implemented in the plugin by using the Weights feature) - Though this wouldn’t necessarily fall on the Anima team, Sketch should also introduce support for variables, especially now with properties like spacing, min and max-heights, and other values that should be kept consistent across several layers. These variables could be further used to map to colors as well, and assist in the Sass handoff process.
Well, that’s all I got! Just wanted to give a shoutout to the the team at Anima once again. They are incredibly talented, responsive, and inviting so please be sure to support their hard work! Join their Facebook page.
If you have any questions or (nice!) comments, please feel free to post below or reach out on Twitter.