SystemFlow Lifetime Deal $149.00

Why do you use Figma? Why don’t you just start in Webflow right away?

The reasons are innumerable. For starters, Webflow is a development platform (even if their canvas is called the “Designer”). It’s meant to “build out” your website. It’s meant for you to bring an already-existing design to life. Webflow allows you to bring logic to your web design.

Starting with Webflow can considerably slow down your entire process as design experimentation can be a real pain in the Webflow Designer. Not only do you have to worry about what the design experiment is, but you also have to think about how you’re going to execute it. Whereas on something like Figma, Adobe XD or Sketch, you can seamlessly move, change and alter things fluidly and with ease.

Introducing SystemFlow

Bridging the gap between design and development. SystemFlow Lifetime Deal is a Designer-First, utility Framework for Webflow and Figma, with 1000+ CSS classes, pre-built components, layouts and more!

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.

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. SystemFlow Lifetime Deal

• 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.