Figma Component / Layout
Splitter
Splitter UI is a versatile element that allows users to resize and collapse sections of a page or layout, typically by dragging a divider between panes
Documentation
What is Figma Splitter?
Splitter is a resizable layout component that divides an interface into adjustable panes. It allows users to control how much space each panel occupies, improving efficiency in information-dense workflows.
When to Use Splitter?
Use Splitter in dashboards, editors, and data tools where users need to compare or manage multiple panels simultaneously. It is ideal when fixed panel sizing would limit visibility of important content.
How to Design Splitter?
Make drag handles obvious, preserve sensible minimum and maximum pane sizes, and provide clear hover or active feedback during resize. Consider collapse and restore behavior for compact modes and accessibility needs.
How Splitter Component is Designed in Ant Design System for Figma?
In Ant Design System for Figma, Splitter patterns focus on pane hierarchy, handle affordance, and token-based spacing between content regions. Designers can prototype resize-ready experiences that map cleanly to Ant Design Splitter behavior.
Related components
- Divider
Divider component in Ant Design of React helps to separate items from each other.
- Flex
Flex in Ant Design of React is a component that helps to align items vertically and horizontally.
- Grid
Grid in Ant Design of React is a component that helps to align items horizontally.
- Layout
Layout manages the overall arrangement and organization of elements on a page.
This component is part of the Ant Design System for Figma. Browse Ant Design Figma templates or view kit pricing.