New
SystemFlow for Figma - Design beautiful landing pages in Figma. Ultra fast. | Product Hunt
What's inside?

Everything you need
for a modern landing page

Stop wasting time on creating everything from scratch for every new project you start. Use these pixel-perfect UI elements to design your next website efficiently.

widgets

Top-quality components

SystemFlow for Figma uses the best Figma features including Auto Layout and Variants making our components behave just like on the web.

  • check
    Big library of components for every web design project
  • check
    Components have states by default
  • check
    Built with Auto Layout, Variants, and Figma Styles
  • check
    Easy customization with a few clicks
Landing Page components for Figma
Figma website sections UI kit
vertical_split

Responsive sections

All sections are available for both desktop and mobile viewports. Present your projects to clients without preparing mobile views from scratch.

  • check
    Large collection of beautiful and modern web design sections
  • check
    Desktop and mobile variants for each section
  • check
    WCAG 2.1 compliant accessibility
  • check
    Built with Auto Layout, Variants, and Figma Styles
style

Consistent styles

You can easily change the style of the entire UI kit by simply editing the styles available in the project.

  • check
    Color, typography, effect and grid styles available
  • check
    Editing styles affect comopnents so customization is easy and fast
  • check
    WCAG 2.1 compliant accessibility
  • check
    Light-weight and begginer friendly
Styles Figma landing page
Icons Figma Landing Page
star

Extensive library of icons

Don't waste time searching icons on the web. Use an extensive Material Icons library right away! Or use your own library if you want.

  • check
    Large collection of beautiful and modern web design sections
  • check
    Desktop and mobile variants for each section
  • check
    WCAG 2.1 compliant accessibility
  • check
    Built with Auto Layout, Variants, and Figma Styles
Easy customization

Customize however you want

You can easily apply your branding and style to the whole UI kit by changing the font, color, and component properties.

looks_one

Set up your layout

Drag and drop ready-to-use sections from the assets panel or by searching in instances library.

looks_two

Edit styles

Apply your color theme by editing Figma styles and change font family in all typography styles to apply the font your project needs.

looks_3

Edit Components and content

Edit main components to affect all instances built with it in a few clicks. Then, add your content.

SystemFlow Website Example DefaultSystemFlow Website Example

Big fan of SystemFlow and have been consistently using their pre-built components for my projects. Not only does their design system make putting elements together to build a website like a breeze; the framework makes it super easy to understand without needing to make your own (once you get used to it!).

David
David
Fouder at Bluqode
@bluqode
Dark theme

Turn the lights off!

Design beautiful and accessible websites in Figma with our dark theme.

The dark theme is available only for Figma at the moment but we are working really hard on the Webflow version too! Stay tuned!

Dark Theme Components for Figma
Experience Figma magic

The best Figma features included

Design for the web made easy! Figma was built for the future of the web. That’s why you’ll see features you won’t find elsewhere.

Figma Auto Layout Landing Page

Auto Layout V4

Most of the components use Auto Layout. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.

Figma Variants Landing Page

Variants and Component Properties

Variants introduce a new way to group and organize variants of the same component. Components are easier to maintain and more intuitive to use.

Landing Page Figma Styles

Figma Styles

Whenever you make a change to a style's properties - Figma will apply those changes to any objects using that style.

From Figma to Webflow

Cut up to 90% of the time designing and implementing

So you can get more websites done and take on more clients without drowning in work or creating bottlenecks in the design process.

Step 1

Set up layout in Figma

You can start directly in Webflow or do a quick design exploration in Figma first. Use SystemFlow either way – it’s fully mapped to Figma.

  • check
    Use pixel-perfect components built with Auto Layout 3.0
  • check
    Easily swap out sections with variants
  • check
    Keep naming and styles consistent with Webflow
Step 2

Customize and experiment

We built SystemFlow to make design easier without limiting your creative freedom. So test and style away – you might be surprised just how easy we’ve made it.

  • check
    Use global styles and classes to customize in seconds
  • check
    Change colors, fonts, spacing – anything you want
  • check
    Make last-minute updates without the usual frustration
View lesson in University
open_in_new
Step 3

Transfer to Webflow

Figma components and styles are fully mapped to Webflow, with the same naming conventions and properties. So transferring it is essentially as easy as Ctrl+C/Ctrl+V. (Easy, right?)

  • check
    Easily replace assets, color schemes and font settings
  • check
    All components are automatically mobile-responsive
  • check
    Get a website that’s (finally!) consistent with the Figma design – and stays that way
Preview

Discover what’s inside

What you see is what you get 👀 Preview every component, style and section available in SystemFlow for Figma.

Figma Sections Landing page
Who’s it for?

Let’s get you a shorter, cleaner design process

Whether you work on your own or in a team, with or without a dev guy (or gal), for individual clients or marketing departments – SystemFlow WILL make everyone’s job easier. 

person

Freelance designers

Use the ready-made library of UI components and styles to work faster while still creating unique designs every single time.

groups

Design teams & agencies

Speed up website updates and hand-offs and avoid miscommunication and holdups, even when your devs are busy.

lightbulb

Creators & Indie Hackers

Launch your online courses, digital products and ebook downloads faster and focus on what moves the needle for your business.

school

Beginners & Students

Explore how the professional design system is built and level up your designing and prototyping skills.

SystemFlow's expansive class system and components save me buckets of time!
I was able to design a project in Figma and build it in Webflow to a professional standard within a day.

James Norton
James Norton
Digital Product Designer
@jamesanorton_

Ready to get in the flow?