Figma Tabs

Preview

Figma Tabs

Figma Tabs Component

The Tab component consists of a set of logically connected buttons or toggles.

You can use tabs to allow users to switch between any content views/areas and customize each Tab UI component using nested tabs component properties.

Tabs UI Best Practices

Maintain consistent styling when working with multiple tabs and multiple UI sections.
Use predesigned prototype interactions to support keyboard navigation and create animated transitions between tabs.

Frames X includes Figma Tabs optimized for interactive design. This expanded set offers more variants than the original UI-focused tabs, covering all possible tab compositions.

Tabs 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

The interactive tabs set expands the tab list family — Tab, TabLine and TabFolded items with Default, Hover and Active states in three sizes and four positions, composed into Tablist, TablistLine and TablistFolded with 4, 6 or 8 items — with prototype interactions pre-wired for keyboard navigation and animated transitions.

Tabs AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build an interactive tabs component in Figma with prototype wiring included. Tab items: Tab with a pill highlight, TabLine with an underline, and TabFolded with a raised folder tab, in Small 32, Medium 44 and Large 56px, each with Default, Hover and Active states and a Position of Top, Right, Bottom or Left. Lists: Tablist, TablistLine and TablistFolded holding 4, 6 or 8 items in three sizes and four positions. Make each tab an interactive component: While hovering switches Default to Hover, On click switches to Active and resets the previously active sibling, and keyboard Right and Left arrows move the active state between neighbours. Pair the list with a content panel component that swaps its variant with the active tab using smart animate so the panel slides and the underline glides. Build a demo with a three-tab Overview, Specs and Reviews panel and a vertical Left list driving a settings panel. Keep the indicator a nested layer and bind colours to variables.

Download Interactive Figma Tabs

Source