How learning Webflow helped me as a designer

Understand how your designs will be built by learning Webflow.

Moemin Mamdouh

Introduction

If you have been following me on Instagram, you should know by now that i'm a big advocate for design/developer communication. It just helps you ship products quicker and more accurately. So what does Webflow have to do with this?

By building out your designs in Webflow, you teach yourself how to think in 'code' without actually having to learn the syntax, so let's take a look at a few examples.

Flexbox & Figma Autolayout

Flexbox example

I was just on the /r/FigmaDesign subreddit a couple of days ago and I was surprised to learn that some designers prefer to not use auto-layout when designing. They brought up some valid points, but when weighing the pros and cons, using auto-layout makes more sense. It may take more time to initially learn and get setup within your organization, but the trade off is well worth it.

Not only does it make communication with developers easier, it also helps you design more efficiently.

Naming layers

Layer naming in Figma

Consistent naming of your 'layers' is crucial in Webflow as one change could break instances of that particular element across your website. While that may not be the case in Figma, it helps create consistency amongst components using similar elements.

Think in percentages not fixed units

percentages versus fixed units

Often times how we communicate grid systems can be complicated. Understanding how to communicate in percentages, despite not entirely having that feature available yet on Figma.

Arguments can be made as to whether or not you should be learning all of this, but the fact is, you're responsible for creating a consistent experience across different devices. It's a team effort, not just yours. Communicate however way your team sees fit, but make sure the end goal is your users having a great time.

Published

November 9, 2022

Weekly bite-sized design tips.

Join designers from all over world and receive weekly bite-sized design tips, straight to your inbox.

Thank you for joining the newsletter!
Oops! Something went wrong while submitting the form.