This is NOT another styled template. SystemFlow is carefully crafted framework for Figma and Webflow allowing super-efficient custom designs.
We created 50+ starter components for a quick project kick-off. Unlike other UI Kits, SystemFlow comps are low-level, designed to be styled.
SystemFlow includes automatically generated Design System and buit in documentation. It's easy to pass to other team members & clients.
Watch Greg build a simple website with SystemFlow
Explore full-featured version of SystemFlow in Webflow and Figma
Check out the read-only, full version of SystemFlow inside Webflow's Designer
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.
We focused on making transition from Figma to Webflow seamless - thanks to component naming and Project Creator.
We create our framework in Figma first and then transfer Comps to Webflow. This way it will always be in sync.
Newest technology from Figma now gives us the ability to map code Components based on Grid and Flexbox with ease.
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.
We created an illustrated reference where you can easily find the required element within the docs.
Using a Component in Webflow is as easy as clicking on its name and pasting into Webflow's search box.
Each Template is enclosed into sectioning element - this way you copy and paste in Webflow without braking the layout.
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.
Any change in the Style Guide is effective across all your pages, components and templates.
It really doesn't matter when you adjust the styling - a life saver when client requests a global change after some time.
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.
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
You can use whatever Google Font, Adobe Font or even custom webfont file - and tutorials are here to guide you.
Is as easy as typing their name - the icon is automatically replaced. 1100+ icons are ready to be used!
You can use your custom icons or import any Icon Font, such as Font Awesome and others! We explain the process in tuts.
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.
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.
Most of our Live Components are just an embed code that you put on the canvas and adjust via variables.
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.
SystemFlow uses as little custom code as possible so that Webflow's Designer preview is as accurate as published page.
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:
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.
Check out this e-commerce website for selling an e-book, based on SystemFlow Framework.
If you want to start with the static page, similar to this one - check out this Template.
Here's the template created for video course creators, based on 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.
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.
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.
"[...] 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 >>
Get SystemFlow now - the Designer-First Framework for Figma and Webflow ✨
