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?
Thanks so much for your response! I realize that maybe the wording of my post was confusing - I’m familiar with how Webflow handles CSS styling in its interface, and that’s actually the thing I’m praising here. Even aside from the fact that Webflow writes HTML/CSS, its a tool for designing within display constraints. Webflow would save time in interface design even if you weren’t using HTML/CSS to build your display.
I guess my discussion question (and I realize it’s a broad one) is why does Webflow seem like such an outlier in this space? I’m curious for people’s theories about why so many other industry-leading tools (especially Sketch/Figma) still operate with a mostly manual model. I feel like I must be missing something.
@PixelGeek@Ran_Segall Based on watching your awesome videos about Webflow process and approach, I’m sure you would have theories here if you have a moment to share
I think comparing Webflow to sketch/figma/photoshop etc’ is not the right comparison. Those are, as you said, Design tools.
Webflow is not.
It is a site builder.
And because of Webflow gives us a huge design freedom, it is easy to confuse it with design tools.
Thanks so much for your answer! I think my question a bit more philosophical rather than technical. I put together a little screencast to illustrate what I’m getting at. It’s certainly not an urgent question, just thought I might get a conversation going
Thanks again for your time!
thanks for the visual explanation Sorry for misunderstanding your original post.
The reason why sketch doesn’t “fix the flow” when removing or adding elements is because sketch is a design tool. It is not a visual development tool like what Webflow is.
This is one of the main reasons why Webflow is a web app and not a standalone downloadable app. When you use the browser to build in Webflow, you’re building in the same medium that your users are using to view your design. Build on the web, for the web so what you see is really what you get.
Also, Webflow respects the box model, which the web is built on:
Yes, absolutely! Thanks for sticking with me a bit as I communicated my question - it is abstract for sure!
Kind of like @avivtech was explaining, it sounds like you’re basically saying that if you can guarantee that the design will be viewed on the web, you can go ahead and create a tool that exposes web constraints so you can design within them. This totally makes sense.
Personally though, I would still choose Webflow over Sketch/Figma for creating prototypes (even if they’re not web-based) because of the way I can use global classes to describe layout as well as style and use the box-model editor for easy layout changes. So you’re not losing me as a happy customer any time soon!
Thanks again for your quick responses, I’m SO impressed by Webflow communications every time.
You might just pin pointed here, the next obvious step for the Design tools out there… Or maybe the desktop app Webflow can be in the future- “Deskflow” (?) ‘A class-based design tool’
which will be -OMG - exporting directly to Webflow…
I read a really good article a week or two ago about the future of design tools. The article mentioned the need for design tools to include design tokens (which is industry speak for what you are speaking of when you describe the ability to set padding / margin etc in a design tool). I wish I could remember the title of the article because it was really good. So good that I even tweeted the author expressing such. If I happen to come across it again or remember I will post it here.
@avivtech totally! I think that’s the key feature I’m pointing to in Webflow - that ability to describe a particular combination of styles and layout and save that combination in a centralized format so I can apply it to multiple content blocks. The HTML/CSS seems so elegant for this purpose that it’s pretty useful even if you’re not building for the web.
@dapitts08 I will definitely look up the term “design tokens” sounds familiar but I can’t recall the specifics. If you happen to track down that article please do share! Also, if that subject interests you, I think you might really like this article by Ryan Lucas on Medium: Hey, UI/UX designers. Stop pushing pixels. | by Ryan Lucas | Subform | Medium very validating after years of manually tweaking designs!
I would strongly advocate Webflow as a prototype / template design-tool. We have a couple of successful projects where we used Webflow as our main design-tool, where we demonstrate the exact behaviour of the future website to the client.
This has tremendous advantages over a Sketch / PS / FW / Figma - Approach: we can guarantee that the future website will behave and look exactly like the one produced by Webflow as we also use the Webflow-code as the base for our CMS integration.
IMO this is a big thing, and no other tool out there is currently able to do this. Webflow produces clean and semantically correct HTML code.
Of course this approach has limitations: some things cannot be done within Webflow alone. In such cases we inject our custom CSS / JS into the Webflow site. With the embed-component we are able to add non-Webflow HTML / Code.
This approach even works on design iterations: an already implemented Webflow-Template in the CMS might change, due to new design elements, changes in the design system… This can be achieved by versioning the exported HTML code from webflow with Git. We have created a Gulp-Builder that stripes automatically the Webflow timestamps from each exported file which in turn helps Git to find only the changed parts in the underlying HTML source.
You could also use Webflow as your basic CSS/JS Framework: genereate a basic layout, export it, and adapt it manually to your needs… The exported Webflow code is so clean, that this is easily possible.
So, yes, I believe that this is the future. Sketch / Figma are halfway stuck between designing in PS / FW and designing in the Browser. Webflow IS designing in the Browser, AND having enough control over your underlying code.
I think the answer to your original questions is based largely on two very important factors.
Number One, the evolution of the software design tool industry ( adobe, microsoft, apple etc…) and how those programs arrived at today’s versions. Their path was not a straight line. ( as someone who started on Aldus PageMaker 1.0 ) - Insert discussion on why Illustrator is a illustration tool and not a layout tool. - Insert discussion about why Photoshop is a photo retouching tool and not a page layout tool…not always… OK now debate.
And Two, how each persons brains arrive at a “design solution”. Each designer approaches a design problem in different ways and with different applications. I agree with your observation of simply organizing the design tool to accommodate the various conditions a designer faces. However, that’s not always the way a designer thinks. ( maybe they should in today’s mobile first world ) but sometimes the very best design comes from cutting and pasting with scissors and tape.
As a designer, using a design tool is still incredibly essential in my workflow. I love webflow but it’s not ideal (yet) for quickly exploring multiple ideas the same way you can with Figma or Sketch. Yeah there are times where I am able to skip using Figma/Sketch and go directly to code because of Webflow but there is still a lot of value in building / iterating outside of webflow first.
Hell yeah. Don’t get me wrong: I was describing the detailed design process in Webflow.
We always start with a proper UX / Content structure analysis. Then we move to a visual research process, which involves various different “moods” sketched on paper (this is the quickest way to develop a navigation design, and a rough layout grid). Fonttypes and visual elements are explored, and integrated into the sketches.
Those sketches are then - again on paper - refined, and tested against the UX, and the pre-defined content structure. After this process we move to Webflow, and solve all the detail design problems. But Webflow shortens the whole process at about 15%.
Sketch actually does have a “pin to edge” feature that behaves similarly to html/css:
But it’s limited and it’s not as powerful as html/css. I agree there needs to be a desktop-class design app that lets you design dynamic layouts more intuitively, like Webflow. I remember I saw an app on Producthunt about 2 years ago called Subform that aimed to fill this gap: Subform: A modern tool for digital product designers. - YouTube
. Also, welcome to the community
- exporting directly to Webflow… 
