SystemFlow - Designer-first framework for Webflow and Figma

Hey!

Few months ago with my friend Greg, we've started building www.SystemFlow.co to speed up our client work in Webflow. We ended up creating a framework that cut our development time by half and we can't imagine going back.

Webflow doesn't come with a framework, rather an empty canvas. We played with Tailwind CSS which is an awesome low-level, responsive framework but lacks an easy, visual editor. What if Webflow and Tailwind have a baby? We decided to iterate on this idea to create our own framework from scratch. We aimed for it to be more visual and UI designer oriented, yet maintaining the level of customisation offered by clean developer solutions.

There is an important difference between SystemFlow and most UI Kits. Readymade templates are usually built around certain styling that determines all the components and layout. This makes them easy to start with but the more you want to change and restyle the harder it becomes... That's why SystemFlow is all about fundamentals - layout, typography, grid & color, followed by styling.

SystemFlow has been over 5 months in the making, containing readymade components, layouts, and hundreds of pre-styled CSS classes to apply to any element. With the release of Auto Layout v3 it will be also fully mapped to Figma, so that you can start in your favorite design tool. It makes prototyping, styling and launching web projects a breeze.

Combining the power of a clean design framework with Webflow is what we've been looking for. Now it's ready to speed up the workflow of other web designers. Give it a try!

How to get started with SystemFlow?

1. Visit our website
2. Watch the intro videos and Showcase in University
3. Check Webflow preview file and experiment