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
  • Breakpoints
  • Small
  • Medium
  • Large
  • XLarge
  • 2XLarge
  • How to Use Breakpoints
  • Breakpoint Tokens
  • Get help

Was this helpful?

  1. Foundation

Breakpoints

Elevate your design with Plus UI's Breakpoints, optimizing responsiveness and ensuring a seamless user experience across a spectrum of devices by intelligently adapting layouts and styles at different

PreviousShadows & EffectsNextCustomization

Last updated 1 year ago

Was this helpful?

Breakpoints

Breakpoints in design systems are strategic points or ranges in screen width, crucial for achieving responsive and adaptive layouts that ensure a consistent and optimal user experience across diverse devices and screen sizes. They enable intelligent adjustments to styling and structure, promoting a seamless transition between different breakpoints and enhancing the overall usability of a design.

Small

640 px

Medium

768 px

Large

1024 px

XLarge

1280

2XLarge

1536 px

How to Use Breakpoints

Create frames in your Figma project To use the predefined frames from the Plus UI Design System, please click Width and select ‘Apply Variable’. You can select any pre-defined size to resize your frame.

Breakpoint Tokens

Plus UI's predefined breakpoint tokens offer a systematic approach to responsive design, allowing you to fine-tune your layout based on specific breakpoints. Dive into our documentation to explore how breakpoint tokens provide flexibility and consistency for crafting seamless user 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.

small breakpoint
medium breakpoint
large breakpoint
xlarge breakpoint
2xlarge breakpoint
breakpoints in figma
breakpoints token table
Cover

Join Figma Community

Cover

Join Discord Community

Cover

Join us on Twitter