Learn how UI/UX designers will gain superpowers reserved for web developers, and people with no coding skills will code simple websites with ease.
Fast forward a few years, web development will be nothing similar to what it is today. No-code and tools like Webflow are about to change who and how to create websites. Readymade components will allow for quick layout compositing. Most of the complex, server logic will be available as blocks in visual editors. There will be API for literally everything. UI/UX designers will gain superpowers reserved for web developers, and people with no coding skills will code simple websites with ease.
For now, though, the world is a bit less perfect. Day to day we design websites for our clients. The UI part is fun and quick. For simple websites and a few iterations, we’re able to deliver a complete layout. And then, the hard part. With regular dev stack, we’re talking weeks to ship a complete, simple website.
What if web development took as little time as UI design?
Webflow takes us from A to B much faster but still, we’re talking 3–5x longer than UI design. I’ve asked myself many times how can I streamline the workflow? We broke down the process to the tiniest bits and discovered that we spent much time repeating the same things over and over for each project. Starting from a blank canvas, exporting and transferring assets, building a basic style guide with components, and finally repeatedly going back and forth between Webflow and Figma. It feels wrong.
Moreover, when we were breaking things further I started noticing small things that did not bother me that much but to my surprise ended up consuming plenty of time. Especially when added up from different projects. We started to search for patterns and jot down a few pain points:
Readymade UI Kits and Templates don’t even get close to a convenient solution. As the name says — those are UI-First, built around design assets. They’re meant to be pretty, ending up not being useful for re-purposing. Changing anything within a readymade Template means digging classes, breaking the layout — finally taking longer than starting from a blank canvas in the first place. We’ve all been there. The thing is, those are made by designers for designers… or even one-time-designers, not for Webflow professionals.
We started researching developer solutions instead, as they appeared more systematic and low-level. I have a web development background and pretty much understand the structures of modern frameworks. I’ve been using Tailwind CSS in few projects, and recently experimented with Tailwind UI. We fell in love with the simple yet efficient concept of predefined classes and components being pre-styled but still developer-first and easily customizable. The thing is Tailwind lacks an easy, visual editor and I found it difficult to use Tailwind in the Designer ↔ Developer workflow. „If only I could design Tailwind in Webflow” — I stumbled… wait!
This is it — that was the „aha moment”
What if Tailwind and Webflow teamed up for a common, low-level Framework with readymade classes and components built to be tailored to any style? — I asked myself. We’ve been building our design system for Webflow for quite a while now but this was a real breakthrough in thinking about how to organize it. We probably can’t thank the founders of Tailwind enough as it had a profound influence on how we thought about SystemFlow.
We’ve decided to iterate on this idea to build a solution based on these core concepts:
We aimed for it to be visual and designer-oriented yet maintaining the level of customization offered by clean developer solutions. Expanded with native Webflow features such as overrides, combo classes, and more. This is how SystemFlow started to shape.
For the following months, we’ve been busy testing different models for SystemFlow and experimenting with various solutions to address font sizes, spacing, and colors. Although we were inspired by developer solutions it was clear to us, that designers need a different approach. For example, we decided to use pixel values instead of rems as it’s just a more tangible value for a designer.
Client work was our battleground for SystemFlow and from the beginning, we were trying to test it on real projects for our clients. 3-months of iterations and a hundred versions of SystemFlow later, we’ve been able to significantly reduce time spent on the project. Last month we were able to deliver approximately 4 times better results, going from an average of $10k a month to $10k a week. And we feel that’s just the beginning as this week, thanks to SystemFlow we’ve managed to design and implement a complete website in just one day:
Although we improve SystemFlow daily, we feel it’s ready to help other designers implement their web sites in Webflow faster than before. We can’t wait to hear your feedback and ideas that would make SystemFlow better for us all. Hopefully it will once become the ultimate designer-first Framework that would bridge the gap between Webflow and design tools as well as let us iterate much faster.
