Finding new paths

Over the last few weeks I’ve been trying something new.

My design lead, Chris, challenged me to fully adopt auto layout in Figma.

We’re both product designers. If there’s a spectrum of designer types, he leans more on the user interface (UI) side of things, and I lean more on the user experience (UX) side.

I’ve been in situations like this before, where I’m working with an amazing UI designer, and am able to bring my UX experience (wow that’s mouthful if you spell it all out) side of thinsg to the project. I learn from the other designer, and they learn from me.

Now, for someone new to the field, these two complimentary practice areas fit into the whole picture of what’s needed to be a good product designer. You’ve got to understand the needs of users, match those against the company goals, then build a kickass design.

I’ve leaned heavily toward the UX design side of things in the last four years. I realized that my designs weren’t making the impact I wanted, so I started pushing toward experiences that mattered.

As a result I’ve developed a fluid design process.

Because of my background and career trajectory I’ve had a weird evolution in design tools.

Take Figma, a program that’s practically table stakes for modern designers. I learned to use it after a lifetime building design files in Flash, Illustrator, XD, and InVision.

I also had a multi-year pivot where I coded all my own designs. That forced me to think about elements in terms of divs, grids, and responsive design.

I skipped Photoshop and Sketch because they didn’t work with my mental model. No matter how many times I tried I couldn’t make them follow my intentions.

Much of my mental energy has been spent on the user journey, problems that need to be solved, and ensuring that we move into code as soon as possible. Because of that I’ve gotten incredibly comfortable with hand sketching flows, tweaking as needed, and moving fast.

I force myself to be flexible as a designer, change with new data, and not hold any individual design as precious. Hard learned lessons taught me that blind allegiance to entrenched designs lead to projects that fail.

So I hold ideas loosely, changing things as needed. My iPad stands ever at the ready to red line a whole new idea in a heartbeat.

Through all these years I’ve ignored layers. I’ve not used them. I think visually and when needed space things out based on a mental grid of 8, 16, 24, 32 (or more) pixels. It’s a manual process I’ve insisted on.

This creates intentionally messy, fluid, open designs.

I like to work on a large canvas, moving piece around freeflow, and seeing how it all fits together. I spend lot of time thinking about how the whole flow fits together, and how individual pages fit within the flow.

What I don’t spend as much time on is the details within individual components. Generally I’ll clean things up afterward, manually aligning elements to get 95% where I want before going to development.

This whole process means I spend a lot of time thinking about the project, a lot of time thinking about the major pieces within it, and less time thinking about the elements within those pieces.

This is not a bad thing.

If you have to choose, I’d much rather a designer that thinks about the whole user experience and works with their team and end users to ship designs that move metrics.

But I want to improve my skills in user interface design. Every time I’ve been challenged in that area I’ve been able to improve, bit by bit. Those improvements layer on top of each other and ultimately make me a better designer.

The trick is to improve one area while not losing sight of the entire project and the whole reason for creating a thing. Product designers must work toward goals and metrics that move numbers for the company. Time spent on any individual element needs to point back to a justifiable goal.

Over the years I’ve modified my design process to include newer tools like auto layout in Figma. I’ve been aware of auto layout and components, but generally eschewed them because they limit my ability to freeflow. That doesn’t mean I haven’t played with them. I’ve used them in bits and pieces for yearsm and modified files from other great designers.

All that preamble leads into what I’ve been up to the last month. Thanks to my colleague’s help and feedback I’ve been diving headlong into auto layout. I’ve also been using Figma’s new AI layer rename functionality, since I’m actually paying attention to my layers.

And, though I’m still in the midst of chaotically readjusting my way of thinking, I have to admit I was wrong.

Auto layout is freaking awesome.

Though I’d used it piecemeal, I never saw the benefit of having my entire design setup as an auto layout. It felt too restrictive. Often when I needed to make drastic changes I found progress dropped to a snail's crawl. It felt like using a keyboard and mouse with mittens.

But, slowly I’ve been studying how to build out pages, meticulously laying out each piece, and learning how to have design elements properly flow down the page.

The result? More cohesion across my designs. I can move quicly between mobile and desktop layouts, and I’m having seeing far less anomolies where an element is unintentionally outdated from one page to another. Also, spacing is so much easier. I’m spending less time manually re-adjusting the 8 pixel spacing that’s in my head.

I’m sold.

Now, for someone in this field, you’re probably rolling your eyes. Auto layout has been around for years. You’re probably wondering how I’m the last designer adopting this.

My biggest holdout has been not wanting to lose the heart of how I work as a designer—fluid, open, willing to change based on new bits of data, and honoring flexibility over consistency.

But I’ve found a middle way through all this.

This morning I was working on a project that I’d setup on auto layout. However, because of new information from the team I needed to change a number of elements on the page. I started to move them around within the page, but ran up against the constraints of auto layout (I will say though, ignore auto layout is a fantastic feature I didn’t know existed).

No problem, I grabbed my iPad, switched the screen over to Freeform, and designed the new flow by hand with the team’s feedback. Both the high fidelity tool and the low fidelity tool came to my aid, and we solved the problem. Then, after the call, I had more time to rebuild the page in auto layout.

If you’re one of the last holdouts, like me, you’re probably wondering if it’s worth it to take the time to build a page like this. Yes. It is. By building it right the first time you ironically spend less time thinking on all the tiny details. And then when you need to change something radically, you can still tear the page apart and rebuild it.

The funny thing in all this? My colleague has started sharing that my original approach to design is helping him lean little less on auto layout and focus more on the flexible approach to designing to the end result we all want—a coded product that moves the right metrics.

The thing that brings me so much delight is knowing that I haven’t even come close to plateauing. The taste gap is still way above me, and I have a lifetime to try and close that gap.

As a side note, I finally see why John Gruber uses footnotes. I’ve gotta figure out how to do that here. There’s so many things I want to add as asides.