What's new in SystemFlow?

We’ve updated most components with the new Figma features, added dark theme, and minor bug fixes and improvements.

What’s new

• added new Component Properties feature to the most of the components
• redesigned most of the components to match the new Figma features
• updated components with new Auto Layout features
• added dark theme

Dark theme is coming to Webflow soon.

‍

We’ve added a lot of performance, visual, and accessibility improvements to the system. Figma version now has mobile components and all states.

What’s new

• added new component ‘Example Forms / Main’
• added new section ‘Pricing / Basic 3’
• added new section ‘Hero / Left 1 / Testimonial’
• added new section ‘Hero / Left 2 / Image Bottom’
• added new section ‘Long Content / Side Menu Right’

What’s changed

• redesigned Tagline component
• changed body text color to Neutral / 80
• removed all placeholder images and replaced them with the new ones
• minified CSS code
• removed Style Guide placeholder images
• redesigned Overview page
• redesigned Style Guide pages
• removed Introduction page
• removed Empty Style Guide page
• Style Guide pages will now be Drafts when sent to clients
• added missing states to most of the components
• removed unnecessary code from the Custom Code embed
• removed Live Components scripts from the project’s custom code footer
• added LC Embed with scripts to Live Component symbols
• removed one variant of the Feature Left and Feature Right sections
• renamed Feature / Left 3 to Feature / Left 2
• renamed Feature / Left 4 to Feature / Left 3
• renamed Feature / Right 3 to Feature / Right 2
• renamed Feature / Right 4 to Feature / Right 3
• redesigned section Contact / 3
• redesigned pricing cards

What’s fixed

• improved the overall visual experience of the system
• improved the overall performance of the system
• improved the overall accessibility of the system
• minor bug fixes and adjustments

SystemFlow for Figma

• Figma version is now updated to match the SystemFlow version 1.4
• added mobile sections as variants
• added component states as variants
• minor bug fixes and improvements

View documentation for version 1.4

One of the largest updates for SystemFlow is here! A lot of new components and improvements added!

What's new

• added Hero / Slider
• added Hero / Center / Box / Text Only
• added Hero / Center / Full Width / Text Only
• added Navbar / Light / Megamenu 1
• added Navbar / Dark / Megamenu 1
• added Navbar / Light / Megamenu 2
• added Navbar / Dark / Megamenu 2
• added Pricing / Switch 1
• added Pricing / Switch 2
• added FAQ / Collapse Borderless
• added CTA / Box / Button / Justified / Light
• added CTA / Box / Button / Justified / Dark
• added CTA / Box / Button / Justified / Primary
• added Cards / Blog 1
• added Cards / Blog 2
• added Feature / Left 4
• added Feature / Right 4
• added Feature / Center / Switch 2
• added Feature / Center / Switch 3
• added Dark variants to CTA Section components
• added Primary variants to CTA Section components
• added Feature / Left 2 / Features List with Icon
• added Feature / Right 2 / Features List with Icon
• added Feature / Left 1 / UL Icon
• added Feature / Left 2 / UL Icon
• added Feature / Right 1 / UL Icon
• added Feature / Right 2 / UL Icon
• added Feature / Grid / 3 Col / Vertical / CountUp
• added Feature / Grid / 3x2 / Vertical / CountUp
• added Testimonial Box / Small (Figma)
• added Card / Blog Big (Figma)
• added Testimonials / Feature
• added Tag / Default
• added Tag / Primary
• added Tag / Secondary
• added Tag / Success
• added Tag / Warning
• added Tag / Error
• added Tag / Info
• added Dropdown Link with Icon component
• added Dropdown Menu Separator to Dropdown Menu
• added Feature Icon / Dark
• added Neutral / 5 color swatch
• added LC / Age verification Live Component
• added LC / Multiple Select Live Component
• added LC / Cards Search Live Component
• added LC / Cards Filter Live Component

What's changed

• Typography now uses the perfect letter spacing for Inter font based on Inter Dynamic Metrics
• Changed the weight of the font in the system from Bold to Semi Bold
• Changed the baseline height from 24 px to 28px in the entire system
• Changed the font size for Heading XL to 44px
• Changed the font size for Heading L to 36px
• Changed the font size for Heading M to 28px
• Changed the font size for Heading S to 24px
• Changed the border radius of almost all components from 0 px to 6 px
• Changed the Button Text font-weight from Regular to Medium
• Changed the Link Text font-weight from Bold to Medium
• Changed the border color of the Ghost Button to Neutral / 5 color
• Changed the icon in Inputs to mail_outline
• Changed the Checkbox size from 16 px to 20 px
• Changed the Radio Button size from 16 px to 20 px
• Removed Hero Gradient class
• Added 4 px Top & Bottom padding to Dropdown Menu
• Changed the Table Header text style
• Changed Feature Icon name to Feature Icon / Light
• Changed Feature Icon Small name to Icon Small
• Added Navbar Preview Area to Navbar Component Wrapper in Documentation
• Changed CTAs wrapper Margin Top to 1.5 rem
• Changed Button Secondary background color to Neutral / 10
• Changed the existing CTA Section components names to ... / Light
• Changed some Buttons in CTA Sections to contain the arrow_forward icon
• Redesigned Collapse / Borderless
• Changed Hero / Center / BG image height from fixed 800 px to auto height based on Wrapper L padding
• Changed icon's size to 18px in Custom List Item component
• Changed Feature / Center / Switch name to Feature / Center / Switch 1
• Increased Avatar components size
• Changed from Heading / S to Heading / XS in Card components
• Changed from Heading / S to heading / XS in Tabs Vertical component

What's fixed

• minor bug fixes and improvements
• improvements to the design and spacing of the components
• improvements to the components responsiveness
• fixes to Countup script to launch when the component is in view
• fixes to Confetti script

SystemFlow for Figma v 1.3

• Figma version is now updated to match the SystemFlow version 1.3
• minor bug fixes and improvements

View documentation of version 1.3

What's new:

• added new page Feature - Text Center
• added new component 'Feature / Center / Image'
• added new component 'Feature / Center / Video'
• added new component 'Feature / Center / Switch'
• added new component 'Feature / Center / Count up'
• added Feature - Text Center page thumbnail
• added Feature - Text Center card to Overview page
• added new component 'Testimonials / Slider'
• added new component 'Tabs Vertical'
• added new component 'Horizontal list'
• added new component 'Empty Section / Title 2 Columns'
• added new component 'FAQ / 2 Columns Alt'
• New Live Componens
• Text Replace
• Form Memory
• Form Hidden Field
• Form prefill
• Countup
• minified Live Components scripts
• new lessons in University
• Text Replace Live Component
• Forms Live Components
• Countup Live Component

What's fixed

• minor bug fixes and improvements

What's changed

• Script links to Live Components have changed in Settings → Custom Code

SystemFlow for Figma v 1.2

• Figma version is now updated to match the SystemFlow version 1.2
• changed Unordered list and Ordered list components to use native list Figma feature
• minor bug fixes and improvements

View documentation for version 1.2

SystemFlow University is live! Visit our university where you will find 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!

What's new

Added new template based on SystemFlow

What's new

Added new template based on SystemFlow

What's new

Added new template based on SystemFlow

What's new:

• added new component 'Avatar'
• added Live components with the documentation
• Countdown
• Show & Hide on date
• Cookie Notification
• Confetti Popper
• added Live Components scripts to Custom Code Footer in Project Settings
• added 'Card / Countdown 1' and 'Card / Countdown 2' live components to Card page
• added 'Alert / Countdown Banner' live component to the Alert page
• added atom symbols (such as Buttons, Links, etc) into Template components (nested symbols update)
• added 'Text Wrapper' and 'Text Wrapper Centered' symbols in Typography
• added 'Brand Logo' and 'Brand Logo Dark' symbols
• 'Brand Logo' and 'Brand Logo Dark' symbols are now nested components inside Navbar and Footer sections
• added 'Feature Icon' and 'Feature Icon Small' symbols
• added 'Cards' section components to Templates/Sections
• added thumbnails for the new components: 'Live Components', 'Cards' and 'Avatar'
• added 'Button Separator' class to separate 'Button' symbols in 'CTAs Wrapper'

What's changed:

• typography is now responsive and uses REM values
• 'Body Text' class and 'All Paragraphs' use now Neutral / 90 color for better contrast to Headings
• added 'Avatar' symbol to 'Testimonial' symbols
• Changes to Card components:
• 'Card' (in Components/Data Display) are single Card symbols
• 'Cards' (in Templates/Sections) are section components that use nested 'Card' symbols
• SVG icons from Feature section components are now replaced with 'Feature Icon' and 'Feature Icon Small' symbols
• 'Testimonial / Box' symbol now uses 'Body Text / M' class for better consistency with the entire system
• replaced 'Page / Custom Code' embed symbol with ' Custom Code (must be on every page)' div that contains HTML Embeds for better readability
• improved 'Pricing Card Header 2' visually in the 'Pricing / Basic 2' symbol
• added all visual assets to the 'SystemFlow assets' folder in Assets Panel
• the dropdown menu in Dark Navbar is now consistent with the Dark version of the Navbar
• updated icons size from px to rem values in 'Custom Code Embed'
• changed 'Link + Icon' in Card symbols to use Material Icons class
• 'Toast' is now set to 640px max-width instead 640px width to be responsive

What's fixed:

• fixed minor spacing issues in the 'Material Icon' class
• fixed 'Tabs' menu on Mobile viewport so the user can now scroll it horizontally when the content exceeds the width
• 'Vertical Menu Title' is now Bold for better consistency
• fixed Hover state for Footer links
• fixed some small overall spacing issues in the system
• removed unnecessary scripts and styles
• changed SEO title from 'Notification' to 'Toast' to match the page title

‍

View documentation for version 1.1

Figma version is now updated to match the SystemFlow version 1.1

What's new:

• added visual representations of 'Live Components' to Figma
• added 'Cards' page to Templates
• added 'Avatar' page
• added 'Text Wrapper Centered' to the Typography page

What's changed

• redesigned 'Empty Section' components to match Webflow's version
• Feature Icons are now components and are using Material Icons
• previous Feature Icons (SVG) icons are now removed
• 'Testimonial / Box' uses now 'Body text / M' for better consistency
• added 'Avatar' components to Testimonials
• 'Body text' color is now 'Neutral / 90'

What's fixed

• minor visual improvements for better consistency

Minor fixes to improve the quality and efficiency of the UI kit:

What's fixed

• Fixed icons naming so they won't show in search results first instead of components
• Changed Testimonials / 2 Columns name of the component to Testimonials / Box. (There were two different components named the same)
• Atom components (such as Buttons, Dropdown Triggers, etc.) are now variants
• Changed the text of the Main / Paragraph component (the previous text was from version 0.9 that is no longer needed)

Shipped the first core template for SystemFlow, available for clients to request.

What's new

Launched first, the early version of SystemFlow for Figma after the release of AutoLayout v. 3. This release features:

• Text Styles
• Color Styles
• Components
• Auto Layout v3
• Variants

Small improvements + v1.0 access for people who preordered SystemFlow

‍

View documentation for version 1.0

Beta access for the first 20 people including the Webflow team

The early rollout for our friend designers working with Webflow

What's new

• Improvements + fixed minor bugs
• Prepared Figma preview

SystemFlow Alpha 0.8

2 October 2020

Documentation setup for the whole project

SystemFlow Alpha 0.7

25 September 2020

Section components setup

• Added Empty Sections component
• Added Navbar, Footer, Hero, Feature Sections, CTA Section, FAQ, Pricing, Testimonials, Contact and Long Content

SystemFlow Alpha 0.6

28 August 2020

Data display and feedback components setup

• Added Card, Collapse, Table, Tag, Tooltip, and Tabs
• Added Alert, Modal, and Toast

SystemFlow Alpha 0.5

11 August 2020

Navigation and Form components setup

• Added Breadcrumbs, Dropdown and Nav Menu
• Added Input, Textarea, Form Toggles, and Example Forms

SystemFlow Alpha 0.4

29 July 2020

General components setup

• Added Button and Link

SystemFlow Alpha 0.3

23 July 2020

Styleguide setup

• Added Material Design icons support

SystemFlow Alpha 0.2

19 July 2020

Styleguide setup

• Added color palette classes
• Added spacing classes

SystemFlow Alpha 0.1

12 July 2020

Styleguide setup

• Added color palette
• Added typography classes