Figma Tablist

Preview

Figma Tablist

Figma Tablist Component

The Tablist or Tab List component organizes related content into separate tabs, allowing users to switch between them and access separate sections or views.

You can use the Tablist UI component to adjust its direction and style, matching it with any surface or layout direction in your project.

Tablist Anatomy

Set	Variants	Properties
Tablist	36	Size Large, Default, SmallPosition Top, Bottom, Left, RightItems x4, x6, x8
TablistLine	36	Size Large, Default, SmallPosition Top, Bottom, Left, RightItems x4, x6, x8
TablistFolded	36	Size Large, Default, SmallPosition Top, Bottom, Left, RightItems x4, x6, x8

Tablist ships three styles — Tablist, TablistLine and TablistFolded — each with 4, 6 or 8 tabs in Large, Default and Small sizes positioned Top, Bottom, Left or Right, built from Tab, TabLine and TabFolded items with Default, Hover and Active states at 32, 44 and 56px.

Tablist AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a tab list component in Figma as three tab-item sets and three list sets. Tab items: Tab with a pill highlight, TabLine with an underline indicator, and TabFolded with a folder-style raised tab, each in Small 32, Medium 44 and Large 56px with Default, Hover and Active states and a Position property that rotates the indicator for Top, Right, Bottom and Left placement. Lists: Tablist, TablistLine and TablistFolded compose 4, 6 or 8 tab items in Large, Default and Small sizes with the Position property orienting the whole list horizontally along the Top or Bottom or vertically along the Left or Right of a content area. Add Booleans for leading icons, count badges and an overflow More tab. Build examples: a settings page with a left vertical TablistLine, a dashboard card with a Top Tablist, and a mobile screen with a Bottom tab bar of icons and labels. Keep the active indicator a nested layer so it smart-animates between tabs in a prototype.

Source