There’s a discussion brewing in the no-code Twitter-sphere right now about the role of Webflow in the design process.
In the original tweet on the subject (above), Webflow user Youssef Sarhan (Founder of DesignDash.co) asserts that Webflow is the only design tool needed in the Web Design process because it holds you accountable to the box model & CSS where other design tools do not. Because Webflow is ‘real’ code, it’s intrinsically better to design exclusively in Webflow.
This notion of designing only in Webflow is an attractive one for several reasons. Webflow is best-in-class software; who wouldn’t want to confine an entire workstream into this incredible program? Plus, when finished designing in Webflow, you have a live site to show for it.
While there are certainly benefits to jumping straight into development, the value provided by Figma, Sketch, etc. in the role of web design and development is undeniable. Having worked in Webflow at an enterprise and personal level since 2016, I have encountered all manner of design processes, from traditional workflows to Webflow-only prototype-to-live work. From all this experience, I’ve learned that to maximize design success, a designer must be able to use the 4 I’s:
Research is at the core of web & UX design. Without investigating your audience, your brand/tone of voice, your target market, and what success will look like, you’re not setting yourself up for success. And while the original discussion on Twitter doesn’t explicitly mention this part of the process, there's just no way to conduct or record research in Webflow. Tools like MURAL or Figma help to conduct brainstorms & aggregate information into one place for reference so that when the design process begins, you possess the knowledge necessary to make the best decisions for any business.
The best designers stay up-to-date on the latest trends, compositions, and ideas to stay relevant. In web design, ideation is one of the most important things a designer can do, and modern design tools like Figma are the fastest and most efficient way to get a concept on the page. You might have hundreds of ideas, but most of them are not going to be winners. The problem with ideating in Webflow is that getting ideas down takes time because you’re working at the highest level of fidelity. Even building the skeleton of an idea on the page requires the creation of semantic CSS systems. By contrast, ideating in Figma is as simple as dragging & dropping the contents of your brain on the page. Plus, you can do so simultaneously with stakeholders, copywriters, and other important parties.
Imagine working in Webflow and needing to change something in CSS to make your site look correct. You do so, and suddenly something else somewhere changes. We’ve all been there many, many times. Herein lies the inflexible nature of development; because everything is (and should be) related, iterating on existing elements can be a hassle. That’s why Figma is such a powerful tool; you can duplicate and reiterate a design with the click of a button, unburdened by the weight of existing styles. And with powerful libraries like Systemflow, users can achieve faster-than-light iteration in Figma that directly correlates to existing Webflow frameworks.
Each of the above points touches on the slow, rigid process of using Webflow as a design tool vs. Figma. So it should come as no surprise that working this way is detrimental to the process of improvisation. Because development is all about creating a system for a design to flourish on all devices, it leaves little room to make larger, sweeping visual changes that modern design tools allow you to do in a heartbeat. Being able to improvise is critical to design success, and doing so requires agility and flexibility.
In Youssef’s tweet, he purports that work created in Figma is a ‘delusion’, suggesting that it isn't realistic because it doesn’t ‘hold you accountable to the box model or CSS’.
Anything you make in Figma can be made on the web. Gradients? Drop shadows? Layering? Yes, it can all be done. Figma provides users with the code for any element implemented, and newer features like Auto-Layout are direct parallels to CSS Flex. Yes, the tool doesn’t include CSS values like REMs/EMs, but it shouldn’t have to; because these are designs, not websites. Designs are a blueprint for a developer to build out the most efficient and successful websites.
You would never build a house without a blueprint because a blueprint summarizes all the strategy & personalization building a home requires.
If you do end up moving forward without a blueprint, you’re probably not building a house for the customer; you’re building a house for yourself.
There are certainly some instances where designing exclusively in Webflow makes sense. Coming soon pages, simple one-pagers, and Terms & Conditions pages are all straightforward and don’t require much strategy. But in all other instances where strategic thought and execution are involved, it makes more sense to work elsewhere.
Yes, working in Webflow is fast. But working in Figma is faster.
Yes, Webflow is ‘real’ code, but the systematic nature of HTML inhibits investigation, iteration, ideation & improvisation.
Can you design exclusively in Webflow? Sure.
Should you? No.
.jpg)
