Inception
Everything clicked for me when I realized just how many layouts dev had to code when we designed only with a twelve-col grid.
Seeing 11 layout options in one of our sites’ CMS, (including “5-4”, “4-5”, and “4-5” alt) I realized we needed a new approach. One that started with the layout options, rather than finding the mess we’d made at the end of design.
The breakthrough
Within a month of that project I had created a new framework, where just three layers could create an infinitely flexible system that could be adapted for any piece of any site. It was only revolutionary for us because it was the first time that the design team was considering how the site would actually be built.
The basic model
Sections would set the vertical spacing and color theme, fencing options determined the content area, and layouts like “two-col-offset” could be adapted for any site because they wouldn’t be tied to a column grid any longer. We made tweaks and additions over the years, but this basic framework was rock solid.
Developers, I know this is nothing new to you. But for the design team to be thinking this way, and especially just after getting tools like auto-layout, this was huge.
I had jumped onto “Stacks and padding” when XD added them in 2020. And when we moved over to Figma a couple years later, I realized just how much more robust it’s “Autolayout” feature was. It’s been the foundation for our responsive design system, and these days I really can’t see a reason not to use it for everything on a web project.
Using the atomic model of design, and combining autolayout with all of our common components, our wireframes files alone became a more robust system than the final versions a lot of teams hand off to their poor developers.
The pages respected content flow, moving sections around was as simple as hitting an arrow key, and dev never again had to ask us whether we really needed both the 86px gap and the 81px gap they found in different parts of our designs.
Before variables I’d been keeping all of the values in my head as I worked, setting them manually hundreds of times over the course of a project. When Figma announced variables I immediately started refactoring the entire scaffolding around them.
Within a week, the scaffolding had been transformed from a simple wireframe kit into an army of drones. I had variables handling color rules, breakpoints, and every single spacing value from section padding to the vertical gaps in copy.
The design process started to feel more like being a commander giving orders, than a grunt carrying them out for days at a time. I even named my component variants after the breakpoint modes, so they could automatically switch when I dragged out a board and set it to Mobile.
Let's wrap it up
The only reason I feel comfortable saying something so arrogant as that, is because we iterated on the scaffolding for four years.
Back and forth between developer and designer. Adjusting it every time we felt a bit of friction.
And eventually...
...we just didn’t find much else
that we wanted to change.
Thanks for reading. I'm really quite proud of it.
If you'd like to check out the file for yourself, send me an email.
Special thanks and credit to Chadsten Lowery and Spenser Hannon, the engineers who collaborated with me and built the code counterpart to the Figma scaffolding, and without whom I wouldn't be the designer I am now.
