February 1, 2023
I’ve been teaching web design for the last fifteen years and students have frequently asked me the two following questions. The first one is:
“Why doesn’t Dreamweaver have an align panel like my other Adobe apps?” (why can’t I just place things anywhere on the page, like in any other design software?).
This would begin with an explanation of the DOM, the document flow, floats and clears, and why CSS is so complicated. However, in the last few years, I’ve only mentioned floats as a historical footnote, and we begin with Flexbox on day one. While it might seem daunting at first, CSS-based layout is so much easier now that we’re doing everything with Flexbox.
The second question is: “Do I really have to learn how to code?”
This was usually answered with an emphatic ‘YES’, but I’ve now conceded that argument. Since front-end-dev has become so highly specialized, and UX jobs so plentiful, I’m no longer focused on training the designer-developer hybrid. This has only been intensified by the rise of the so-called “no-code” tools. It’s hard to convince students to learn HTML and CSS when you can build a site in Webflow in a quarter of the time.
However, I still teach a little HTML and CSS and treat them as building blocks akin to spelling and grammar. You cannot design for the web if you don’t understand how the web works.
I’m now teaching Figma and Flexbox concurrently and I’ve explained to my students that it’s essential to learn Flexbox because it solves so many of our modern layout problems. Just like the aforementioned align panel, Flexbox and its two axes allow us to align and distribute in both directions, and to every edge and every corner. Flexbox is also the perfect solution for almost every problem generated by responsive design. Its ability to swap orientation (row or column), swap directions (row or row-reverse) and change order make it perfect for toggling between layouts and media queries. Finally, its elastic grow and shrink properties free us from the tyranny of 12 column frameworks and the compulsory quarters, thirds, and halves or similar nomenclature. Along with the flex-wrap property, Flexbox just allows our content to flow as we add or subtract elements.
Even if designers don’t learn every line of syntax, it’s really important to recognize that Flexbox patterns are everywhere on the web right now. Working with developers will be much easier if you’re following common patterns and designing layouts that will be familiar for them when coding. Every day, I’m seeing responsive layouts that are being solved with some combination of aligning and justifying. I was originally motivated by Phillip Walton’s great resource, Solved by Flexbox, and I now use Flexbox to solve almost every problem in both my professional and academic work. yes, I know you’re thinking “What about CSS grid?” But I’ll save that for another article.
I teach Flexbox and Figma concurrently as means to explain the principles of responsive design. We start by designing a simple UI card layout in Figma, with a vertical orientation. We make it balanced and harmonious with ‘Auto Layout’. Then we duplicate it and change its orientation to horizontal. By toggling Figma’s little arrows, we’re activating Flexbox’s superpowers. I show my students how to align and distribute with Figma’s ‘Auto Layout’ tools and then we jump over to the ‘Inspect’ tab, and of course, Figma is generating CSS for Flexbox.
Now, I know that Figma doesn’t write code for layout. It doesn’t write any structural HTML or help us make pages more quickly. It exports very nice presentational CSS for typography, colors, rounded corners, gradients, and so on. Even if they don’t actually use this code it’s really helpful to understand how much Flexbox is influencing how we design for the web. One of the best resources I’ve found is Joni Tryhalls Flexbox Cheat Sheet. If designers can just keep these patterns in mind and remember that every time they’re using Figma, they’re following Flexbox patterns and a little coding knowledge goes a long way.