Back

Figma Kit /

Spacing

Spacing is a crucial aspect of design that defines the distances between elements, creating visual hierarchy, improving readability, and ensuring consistency across the interface. This system uses a comprehensive scale of spacing units, ranging from the smallest (XXXXS) to the largest (Max Width), providing flexibility for various design needs.

Key components

  1. Spacing Scale:

    • XXXXS, XXXS, XXS, XS, S, M, L, XL, XXL, XXXL, XXXXL, XXXXXL, XXXXXXL, XXXXXXXL

    • Progressively increasing sizes for different spacing needs

  2. Special Spacing Units:

    • Max Content: Larger spacing unit for content-specific needs

    • Max Width: Maximum width spacing, typically used for container limitations

Spacing characteristics

  1. Incremental progression from smallest (XXXXS) to largest (XXXXXXXL)

  2. Consistent ratios between adjacent spacing units

  3. Flexibility to accommodate various design scenarios

Good practices

  1. Consistency: Use the defined spacing units consistently throughout the interface

  2. Hierarchy: Leverage different spacing sizes to create visual hierarchy

  3. Responsiveness: Adjust spacing for different screen sizes and orientations

  4. Rhythm: Create a harmonious vertical rhythm using consistent spacing

  5. Accessibility: Ensure adequate spacing for touch targets and readability

  6. Scalability: Use relative units (em, rem) for better scaling across devices

  7. Documentation: Clearly define the purpose and usage of each spacing unit

Implementation notes

  • Implement spacing using CSS custom properties (variables) for easy updates

  • Consider using a spacing function or utility classes in your CSS framework

  • Align spacing units with your grid system for harmonious layouts

Usage examples

  • XXXXS - XXXS: Fine adjustments, icon padding

  • XXS - S: Text line spacing, small component internal spacing

  • M - L: Standard component spacing, paragraph spacing

  • XL - XXXL: Section spacing, large component spacing

  • XXXXL - XXXXXXXL: Major layout divisions, hero section spacing

  • Max Content: Content width limitations

  • Max Width: Overall page width constraints

Supercharge Your Workflow

This section is a part of SegmentUI Pro. SegmentUI Pro is a complete UI kit & component library for Figma & Framer as well as other design resources.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say