Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Spacing
  • How to Use Spacing
  • Spacing Tokens
  • Get help

Was this helpful?

  1. Foundation

Spacing

Elevate Design Consistency with Spacing Tokens

PreviousBorderNextOpacity

Last updated 1 year ago

Was this helpful?

Spacing

Elevate the readability and visual harmony of your design with Plus UI's Spacing options. Our meticulously crafted spacing system provides consistency, flexibility, and ease in managing spaces between elements. Elevate your design precision and enhance user experiences seamlessly.

How to Use Spacing

  1. Select a text in your Figma project, and add auto layout

  2. To use the predefined spacing tokens from the Plus UI Design System, click the "Design" panel in the right sidebar

  3. In the Auto Layout section, please click ‘Vertical Gap Between Items’

  4. You can select, edit and apply any pre-defined spacing token to your text

Example

Spacing Tokens

Effortlessly manage and maintain consistent spacing in your design with Plus UI's Spacing Tokens. These predefined tokens offer a systematic approach to spacing, allowing for efficient and cohesive arrangement of elements. Dive into our documentation to explore the versatility and customization options available for creating well-balanced and visually appealing interfaces.

Get help

If you're new to Figma, the platform may initially seem overwhelming, but exploring the interface can be a fun and rewarding experience. Before you can use the Keep Design System in Figma, it's essential to learn the basic tools and functionalities of the platform.

how to use spacing
spacing between elements
spacing on button
spacing token table
Cover

Join Figma Community

Cover

Join Discord Community

Cover

Join us on Twitter