The 8xFlow styleguide is made for professionals that implement custom Figma designs with Webflow. It is giving you a maximum of flexibility and ensures consistency and efficient workflows over all your projects at the same time.
When it comes to implementing Figma designs with Webflow, you will find yourself switching a lot between both tools. Most of the time to find out which font size, color, and spacing was used and what the corresponding class in Webflow is.
Working on many projects at once, it's easy to lose track of class names like .margin-xl. Was it 128px or 96px again and was the 48px the H1 or H2?
This is exactly the problem 8xFlow solves with its consistent class names and a standardized spacing and column system, which remain the same across all projects.
The advantages of the 8 point grid system is a simply better design and a much faster implementation. The reason for this is the visual hierarchy and harmonious vertical rhythm it gives your design. Also the handover to developers is much faster when both sides rely on the system.
8 scales very well for larger and smaller screens, as well as Retina displays:
This doesn’t work with 10px for example, and furthermore Google and Apple advise using 8px as a baseline grid.
And finally, 8px steps are enough to give you the necessary visual hierarchy unlike 4px.
And just a side note: It's called 8 point because pt is a unit of measurement that depends on the screen resolution. But it doesn't matter when designing. Here, 8pt equals 8px.
To understand more about the details, we recommend reading this article about the 8pt grid.
Give Webflow classes and Figma components or styles always the same names.