Designer-first Framework

This is NOT another styled template. SystemFlow is carefully crafted framework for Figma and Webflow allowing super-efficient custom designs.

Pixel Perfect Components

We created 50+ starter components for a quick project kick-off. Unlike other UI Kits, SystemFlow comps are low-level, designed to be styled.

Team & Client Friendly

SystemFlow includes automatically generated Design System and buit in documentation. It's easy to pass to other team members & clients.

From Figma to Webflow

Although you can start directly in Webflow, designers usually prefer to start with Figma or Sketch for quick layout exploration. SystemFlow is fully mapped to Figma, including all the components equipped with auto-layout.

Quick migration to Webflow

We focused on making transition from Figma to Webflow seamless - thanks to component naming and Project Creator.

Always up-to-date

We create our framework in Figma first and then transfer Comps to Webflow. This way it will always be in sync.

Auto Layout v.3

Newest technology from Figma now gives us the ability to map code Components based on Grid and Flexbox with ease.

Components & Templates

From checkboxes and buttons, to readymade hero sections and contact forms - we've created 50+ elements that you can use straight away, style later in Master Component. And we'll be adding new Components each month until we run out of ideas.

Image Reference

We created an illustrated reference where you can easily find the required element within the docs.

Click on the name to Copy

Using a Component in Webflow is as easy as clicking on its name and pasting into Webflow's search box.

Universal Layout

Each Template is enclosed into sectioning element - this way you copy and paste in Webflow without braking the layout.

Global Styles

There is some basic styling applied to both core elements, such as headers and colors, as well as components like buttons. You can use it to quickly prototype and completely customize the look & feel of each component later.

Single Source of Truth

Any change in the Style Guide is effective across all your pages, components and templates.

Change it later

It really doesn't matter when you adjust the styling - a life saver when client requests a global change after some time.

Out of the box Style Guide

With a click of a button, you can show a Style Guide and docs for your team and clients. It's live-linked with your design.

Custom Icons and Typography

SystemFlow works with Material Icons by default, making icon exchange a breeze. You can, however use any custom icon set. In Webflow you can also easily import Lottie files with animated icons

Use whatever font you like

You can use whatever Google Font, Adobe Font or even custom webfont file - and tutorials are here to guide you.

Material Icons

Is as easy as typing their name - the icon is automatically replaced. 1100+ icons are ready to be used!

Custom icons

You can use your custom icons or import any Icon Font, such as Font Awesome and others! We explain the process in tuts.

Coming soon

Live Components ✨

Cookie consents, time counters, loading screens, newsletter signup forms - say hello to Code Components that are part of SystemFlow component library and can be used accross all your projects.

3-minute Setup

Each component we ship requires a quick setup, thanks to accompanying documentation and tutorials. Adding custom scripts and widgets to Webflow has never been easier.

Drag and Drop on the Canvas

Most of our Live Components are just an embed code that you put on the canvas and adjust via variables.

Style as you like

There's not much styling for the Live Components - it'll match the styles in your framework out of the box.

Responsive

We've made all the Templates and components responsive and bulletproof test it under all common resolutions and devices.

Updates

We add new Components and Templates to the Framework each month, until we run out of ideas. No worries though.

Designer Preview

SystemFlow uses as little custom code as possible so that Webflow's Designer preview is as accurate as published page.

SystemFlow University

We're busy working on SystemFlow University, where you will find complete courses on Webflow and SystemFlow plus our video documentation. Check out it's early version with starter tutorials. More coming soon:

  • check
    Complete SystemFlow training
  • check
    Webflow Basics Training
  • check
    Webflow Tips & Tricks and more...
Visit SystemFlow University Beta

Webflow Templates

We've created a few templates based on SystemFlow that you can use to see what's possible or kick-off your project.That's not all - we recorded detailed workshops on how we made those templates using our Framework.

The Flowsome Book

Check out this e-commerce website for selling an e-book, based on SystemFlow Framework.

Flowrishing Business

If you want to start with the static page, similar to this one - check out this Template.

Coming soon

VideoFlow Masterclass

Here's the template created for video course creators, based on SystemFlow.

Coming soon
Authors

Team SystemFlow

We are UI/UX designers working mainly in Webflow and Figma. We create websites for clients, build tools that help us work more efficiently. Lately, playing Figma Chess with Friends.

Greg Rog

Greg Rog

Designer, entrepreneur, educator. Dad of 3-year old Jan. Running countless side projects and ventures all around the web. Huge fan of automation and no-code, running learnux.io, codeless.how and more. Creator of one of the biggest Polish platforms for learning technology - eduweb.pl. Always result-oriented and enthusiastic.

Mateusz Wierzbicki

Matt Wierzbicki

Product designer based in Białystok, Poland. Matt loves to work on design systems and style guides. He’s the creator of Ant Design System for Figma - the popular and loved UI kit based on Ant Design of React. He started using Webflow in 2016 for his everyday work. His mission is to design resources to save designers and entrepreneurs time.

Medium logo

"[...] UI/UX designers will gain superpowers reserved for web developers, and people with no coding skills will code simple websites with ease. [...]" — Read the story behind SystemFlow on Medium >>

Be the first to use SystemFlow

Be the first to Preorder and get our special -30% offer, dedicated training and even more bonuses ✨

SystemFlow - Designer-First utility Framework for Webflow and Figma | Product Hunt