How to Define a Sizing Scale for Your Design System

A well-defined sizing system is crucial for creating a consistent and scalable design system. It ensures that all UI components, images, and typography are proportionally sized, thereby enhancing visual harmony across your design.

Prerequisites

Before defining your sizing system, ensure you have established a comprehensive spacing scale. This scale will serve as the foundation for maintaining consistency and coherence throughout your design system.

Steps to Define a Sizing System

1. Understand the Relationship Between Spacing and Sizing Ensure your sizing system aligns harmoniously with your spacing scale to maintain visual consistency across all elements.
2. Choose a Base Size Determine the base size derived from your spacing scale’s base unit. For example, if your spacing scale uses 8px as its base unit, consider starting with 8px as your base size.
3. Define the Size Increments Decide on the increments for your sizing system. You can choose between geometric progression (multiplying by a constant factor) or additive progression (adding a constant value).

• Example (Geometric Progression): 8px, 16px, 32px, 64px, 128px
• Example (Additive Progression): 8px, 16px, 24px, 32px, 40px

The geometric progression aligns well with the best practices for UI design, where you need tighter increments at the beginning of the scale and larger increments at the end of the scale.

Apply the Sizing System

Use your sizing system to define sizes for various design elements, such as:

• Typography: Font sizes, line heights, and paragraph spacing
• UI Components: Buttons, cards, modals, and other interactive elements
• Images and Icons: Standardize the sizes of images and icons to align with your system

Example of a Sizing System

If you have a spacing scale based on an 4px base unit with a geometric progression, your sizing system might look like this:

Implementing the Sizing System in Your Design System

In Figma

• Create a library of sizing tokens.
• Clearly name tokens (e.g., $size-8, $size-16) for easy identification and consistency.

In Code

• Define sizing variables in CSS or design tokens.
• Use the same naming convention as in Figma for seamless integration.
• Apply these variables in your CSS for heights, Typography primitives, Icons, Avatars, Buttons and other size-related properties.

Tips for Effective Sizing System Implementation

• Align with Spacing Scale: Ensure your sizing system aligns perfectly with your spacing scale to maintain consistency.
• Flexibility: Allow for flexibility where necessary but maintain a strong core structure.
• Documentation: Document your sizing system and provide guidelines for its use. This ensures that all team members are on the same page.

Conclusion

A well-defined sizing system, based on your spacing scale, is crucial for a cohesive and scalable design system. By following these steps and ensuring consistency, you can create visually harmonious designs that enhance the user experience. This systematic approach not only simplifies the design process but also ensures brand consistency across all platforms.

Originally appeared on my blog here