Spacing
Figma
Guidelines
Web
MobileSpacing in design refers to the control of the distance between elements in a layout, crucial for creating visually appealing and easy-to-navigate interfaces.
It encompasses margins, padding, gaps between lines of text, and the overall use of white space to separate and group elements.
Proper spacing enhances readability, guides the user’s eye through the design, and contributes to a harmonious overall appearance.
Guidelines
Correct / Incorrect
Use proper spacing between elements to improve readability, visual categorization and overall aesthetics.
Resist the urge to fill every part of the screen with content. Negative space (empty space) is essential for a clean and focused design. This applies to line spacing too in a paragraph.
A good padding and margin helps to improve the readability of the content and create a more organized layout.
Avoid elements with no padding or margin, as they can make the content look cramped and unprofessional.
A consistent alignement and spacing between elements creates a sense of order and harmony in the design. It helps users navigate the content more easily by creating an habit.
Whereas inconsistent spacing can make the experience harder to follow and less visually appealing.
Takeaways
-
Avoid inconsistent spacing, as it can make the design look unbalanced and unprofessional.
-
Test your design on different devices and screen sizes to ensure that spacing works well across various contexts.
Usage
Implementation
Properties
Spacing
Type : CSS Variable