But, what about Sketch and Figma?
Webflow is not really marketed as a Product Design or prototyping tool per se, but I've found it to be total game-changer for how I design. For mocking up and stress testing responsive design ideas, I've yet to see another tool do what it does. Sketch and Figma are excellent at laying out and managing dozens of screens and hundreds of assets efficiently. But as powerful and useful as they both are, let's be honest, they are illustration tools for how we want our designs to look. We use pictures, shapes, and text boxes arranged to render our intent for someone else to build. Sure, we can set up constraints and mimic how our designs should look when they're built for different breakpoints, but there's always lots of real-world considerations they miss. Lots of the design decisions get pushed to visual tweaking after a developer has already written the code.
For example, if you're specifying how UI cards should behave with a mixture of different content, how do you know what min and max heights they should really have? How about padding around elements that actually pushes content away from it to that exact 24px distance you want? What about those awkward dimensions close to breakpoints where your design falls into a depressing slump instead when you test it after it's built? I've seen no other tools that give so much control to designers to render their intent so close to finished code as Webflow does.
I love Figma, Sketch, Principle, and others. They have a solid place in my design tool belt but have yet to capture the real feel like Webflow does. The outputs from these design and prototyping tools are akin to a movie set - a facade that can look and feel believable, but there's not much going own when you peek behind the curtains. Webflow, on the other hand, generates HTML/CSS as you go along. It's the what-you-see-is-what-you-get (WYSIWYG) editor that finally works. Unlike Dreamweaver and its ilk, Webflow has a browser-based interface editor that is natively responsive, intuitive, and powerful to use.
I've used it for the past six years from designing my portfolio site, to fleshing out fully responsive application design for some of the worlds biggest insurance and Fintech companies. It is still one of the most impressive tools I've used, and that's why I've decided to create a Design System template for others to use. Introducing Headstart UI, a responsive design system template using the power of Webflow. Quickly layout and prototype screens with pre-made Headstart UI components that you can fine-tune to your brand's style. In a matter of minutes, you can have fully responsive screens laid out that you can test on multiple device types with a simple share of a link. That's one design source that behaves like the real build.
So, check out Headstart and get used to the power of designing responsively. You can play around with it too, whether you want the template or not. Let me know what you think :)