Figma Divider
Figma Divider
Preview
Figma Divider
Figma Divider Component
When spacing alone cannot separate two blocks, a divider draws the line. Frames X ships two sets, DividerHorizontal and DividerVertical, with four types each: a plain Default line and a labeled line with the text sitting Left, Center or Right.
Reach for spacing first. Add a divider when two sections must read as separate at a glance, like settings groups or the OR row in a login form.
What is in the divider kit
DividerHorizontal. A full-width line for stacked content. The three Label types put editable text on the line for section titles and alternatives.
DividerVertical. The same four types turned for toolbars, headers and metadata rows, where it splits inline groups.
Styling. The line uses the kit border color, so every divider restyles with the theme in one change.
How to make a page divider in Figma
Draw a hairline rectangle and set its width to fill in auto layout, so the line follows the container.
Bind the fill to your border color variable instead of a hex value. Dividers and card borders should always match.
For the labeled type, place a text layer between two lines in a horizontal auto layout: lines set to fill, text set to hug.
Turn the group into a component set with a Type property: Default, Label Left, Label Center, Label Right.
Drop it between sections in menus, cards and forms, or between page sections in long documents.
Divider UI best practices
Use one separator per boundary. A divider sitting on a card border doubles the line and looks like a rendering bug.
Labeled dividers are for alternatives. The OR before social sign-in in login pages is the classic case.
Vertical dividers split inline groups: toolbar actions, header navigation, date and author in a metadata row.
Page dividers mark section starts in long reads. A label on the line carries the section name without a heading block.
Keep dividers quiet: a border-grey hairline is enough to separate two blocks. A heavier line pulls attention away from the content it splits.
Divider Anatomy
| Set | Variants | Properties | Copy to Figma |
|---|---|---|---|
| DividerVertical | 4 | Type Default, Label Left, Label Center, Label Right | |
| DividerHorizontal | 4 | Type Default, Label Left, Label Center, Label Right |
The file carries two divider sets with eight variants: DividerHorizontal and DividerVertical, each in Default, Label Left, Label Center and Label Right, bound to the kit border color.
Divider AI prompt
Paste this into Claude, ChatGPT, or Figma Make:
Build a Divider component set in Figma. Horizontal: a full-width hairline rectangle in the border color, set to fill in auto layout. Label types: two hairlines in a horizontal auto layout with an editable text label between them, text set to hug, placed left, center or right by order. Vertical: the same structure rotated, hairline filling the container height. Add a Type variant property with Default, Label Left, Label Center and Label Right to both sets, and bind the line color to a border variable so dividers match card borders.
Figma divider FAQ
How do I add a page divider in Figma?
Draw a thin rectangle, set its width to fill in auto layout and bind the fill to your border color. You could also paste the DividerHorizontal set with the Copy component button and drop it between sections.
What is a labeled divider for?
Alternatives and section starts. The label sits on the line itself, so an OR between login options or a date between message groups reads without extra layout.
When should a divider replace whitespace?
When two blocks must read as separate at a glance: grouped settings, dense lists, table rows. If generous spacing already makes the break obvious, the line adds noise.
How do I make a vertical divider in Figma?
Use the DividerVertical variant, or turn the structure: a line set to fill the container height, pinned between inline items. Use it in toolbars, headers and metadata rows.
Which components use dividers?
Menu, Cards, Settings and Login Pages all carry dividers between their groups, bound to the same border variable.
Figma Divider
Divider
divider example
divider component
figma divider
Helper component
Premium Figma UI Kit & design resources
Explore high-quality Figma components, templates, and UI elements.
