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.

Video is roughly edited for speed and stitched together as the plugin evolved. If I had to do it again, I’d make it more concise. Note that the first part of the video is slightly outdated. The Sketch file has since been corrected so that symbol replacement no longer unpredictably resizes the space of the module that was replaced.

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 of child columns
• The alignment of columns (top, middle, bottom, stretch) can be defined at the row level.
• Adding a new column (or deleting one) from the row automatically adjusts the width of sibling columns to fit accordingly.
• Adding a new child module within the column 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).

https://cl.ly/2v2I373P2E1f

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.