Before diving further, it's important to note: what I'm about to share is my unique method for designing websites and mobile interfaces in Figma,Framer, and Webflow, one that has consistently delivered results for me.

While other designers might have their own preferences, the key here is producing designs that are clear and well-structured. When designs meet these criteria, developers can translate them into reality more efficiently, reducing the need for extensive back-and-forth communication. 

This approach has not only benefited me but also the developers I've collaborated with so rest assured that the things you’ll learn have been tried and tested by myself. Now, let’s cover some basics first!. 

This approach has not only benefited me but also the developers I've collaborated with so rest assured that the things you’ll learn have been tried and tested by myself. Now, let’s cover some basics first!. User Experience (UX)

The basic terms

Column grid - a layout framework that divides a webpage or app screen into vertical columns, helping us align and organize elements consistently. It assists in maintaining consistent alignment and organization of all the design elements within a certain frame.

Baseline grid - a set of horizontal lines that define a consistent spacing sequence in a set frame. In UI design, it's used to create the vertical rhythm and help with the text alignment. It’s not as common but you might find its use when designing icons, logos, or more complex 

dashboard layouts for mobile and desktop devices.

Columns - refer to the vertical sections within a column grid. In UI design,they provide a guide for aligning elements and text. Figma provides enough flexibility to specify the number of columns within a grid and/or define the width of columns in a layout 

Side Margin - the space on the left and right sides of a grid or layout. In UI design, they provide breathing room and frame the content. In Figma, setting consistent side margins helps in creating balance and prevents the main content from being spread across the entire device width

Gutter - space between columns in a column grid. It helps provide a guide to separate the content for better readability.

The 8-pt grid

The 8-point grid system ensures that everything in the interface lines up neatly and consistently. What this system means in practice, is it follows multiples of 8 for all the spacing, margin, and even dimensions of user interface components. 

This approach is not only great for creating consistent designs but also aligns with the pixel density of most screens, so you’re pretty much sure that your designs will scale well across different devices. 

For added versatility, especially when dealing with smaller elements or finer details, I might occasionally use a 4-point grid instead.  This provides more precise control, especially in mobile app design.