🟢 New Update: SystemFlow 1.2 is here! Learn more in our Changelog.

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.


What's inside?

Explore full-featured version of SystemFlow in Webflow and Figma

Test full version in Webflow

Check out the read-only, full version of SystemFlow inside Webflow's Designer

Live Docs Preview

SystemFlow has a living documentation that reflects changes in the system. Also, it allows to copy components straight from the docs. Check out the most recent version and explore our readymade Layouts.

View documentation

Preview in Figma

We've mapped components, swatches and styles to Figma so that you can easily transfer the design to Webflow. Using Auto Layout v3 and Variants makes SystemFlow super efficient to work with.

Preview in Figma

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.

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.


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


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

Here's a complete guide for our framework for Figma and Webflow. Learn how to use the docs, prototype and launch websites effortlessly and faster than ever before!

Visit SystemFlow University

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 and quick tours on how we made those templates using our Framework.

E-book Template

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

University Template

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

Green Template

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

Free! Purple Template

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


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

Matt is a product designer based in Białystok, Poland. He 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 >>

Speed up your design process

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