Bridging the gap between design and development. SystemFlow is a Designer-First utility Framework for Webflow and Figma with 1000+ CSS classes, 50+ pre-built components, layouts and more!
Hey everyone! 👋
I’m excited to announce our new product: SystemFlow for Figma!
SystemFlow for Figma is a landing page UI kit with hundreds of components and sections that are easy to use and customize. Stop wasting time on creating everything from scratch for every new project you start. Use these pixel-perfect UI elements to create your next web design project efficiently.
👀 Preview:
🆓 Get free version: https://www.systemflow.co/figma
☀️ Preview light theme in Figma: https://www.figma.com/file/C213M...
🌚 Preview dark theme in Figma: https://www.figma.com/file/V87F0...⏱ Get SystemFlow for Figma with a special 30% discount:
Use the code PHLAUNCH during the checkout. The code will be valid until June 1st, 2022.
🔗 Get SystemFlow: https://www.systemflow.co/pricing🎉 The best and newest Figma features are included!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.
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.
Styles
Whenever you make a change to a style's properties - Figma will apply those changes to any objects using that style.
⭐️ 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.
- Big library of components for every web design project
- Components have states by default
- Built with Auto Layout, Variants, Component Properties, and Figma Styles
- Easy customization with a few clicks
- Dark and light theme
⭐️ Responsive sections
All sections are available for both desktop and mobile viewports. Present your projects to clients without preparing mobile views from scratch.
- Large collection of beautiful and modern web design sections
- Desktop and mobile variants for each section
- WCAG 2.1 compliant accessibility
- Built with Auto Layout, Variants, and Figma Styles
⭐️ Consistent styles
You can easily change the style of the entire UI kit by simply editing the styles available in the project.
- Color styles
- Typography styles
- Effect styles
- Grid styles
⭐️ Extensive icons library
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.
- Over 4000 ready-to-use SVG icons
- Available in 4 styles
- Scalable
- Easy to replace
⭐️ Develop your sites in Webflow
SystemFlow is also available for Webflow, so you can develop your designs effortlessly because all components and sections match the entire Figma library.
🔗 See Webflow version: https://www.systemflow.co/
It's really pure pleasure to work with Matt on SystemFlow. We ❤️ the community around and that y'all keep us motivated and focus. Today, together with the launch we're celebrating your commitment and help on our way to make systemflow.co even better with each iteration. Thanks for being with us from day #1... sharing your thoughts and feedback with a couple of Figma nerds 🫡 You guys rock!
I use SystemFlow to rebuild 3 of our clients sites in webflow. It’s such an amazing tool! So efficient like magic. Can’t believe start any projects from scratch in the future. My favourite tool for website design. Keep up the great work!
I've been a customer of SystemFlow's for 2 years or so and they are going from strength to strength with each new version. Having built Webflow sites using the Figma+Webflow design system they have created here, I have found both sides of the design process straightforward and feature rich but mostly, this just saves so much time, time that can be spent doing more important tasks. Lastly, Matt is managing, somehow, to keep up with all the new bells and whistles which Figma is launching al the time and this makes a design system for Figma even easier to use (autolayout, styles etc.). If anything, it means that you can get away with knowing LESS about how Figma works and just get on with designing your pages which suits me well as I'm no designer!
Theme Buddy Figma Plugin
SupaPass
Alice
Theme Buddy Figma Plugin
Theme Buddy Figma Plugin
Alice
Invoice Dashboard by Notion and Figma
Theme Buddy Figma Plugin