Hello Webflow Community!
I’m a little new here but I’ve been a Webflow user for several years and absolutely love it.
I have a burning question I’ve always wanted to ask about interface design tools. I’m just looking for opinions from other designers, or people from the Webflow team if they’d like to chime in. Here’s the setup:
As far as I know, interface layout engines are essentially logic for rendering lists. A webpage is a list of HTML blocks - the layout engine shifts the position of each block when new instances are added. A feed is a list of posts - the layout engine shifts the position of each post when new instances are added. A menu is a list of links - the layout engine shifts the position of each link when new instances are added. And on and on… there’s a really clear pattern here!
Further, properties for interfaces are stored globally. But I’m not just talking about text styles, I’m talking about space between/within elements, sort orders, filters, etc. If I say “I want every list component to have an extra 20px of space after it” in the interface code, the update is trivial across the system. It’s not only trivial, it’s an inextricable part of how interfaces are built. You literally cannot build the booking display of AirBNB with a separate code definition for the space between every grid element.
But then, almost every modern design tool still assumes that you DO want a separate definition for every property of the display. If I want to add 20px of space after my list items, I have to go to every list item and manually add that space, meaning I have as many unique spacing definitions as I have components. And that’s just the first time. I have to manually update those values every time I want to make global changes. Unbelievably, most design tools don’t even acknowledge the concept of margins and padding, let alone equip the designer to define them consistently. All the marketing language around “support for design systems” and “helping me build a pattern library” doesn’t resonate if I’m still manually dragging the bottom boundary of a text box down just because I added some extra long text!
So here’s my question: Why is Webflow’s team the only design app team to believe that designers shouldn’t have to do this work manually?