Figma drawer components

Click a message in your email client. Click a task in your project tool. Something slides in from the right, holds the detail, and slides away again, leaving the list underneath exactly where you left it.

That is the whole argument for a drawer: the page behind stays alive, keeps its scroll position, and stays visible at the edges. These 2 components and 50 variants cover the panel and the header that sits on top of it.

Drawer or modal?

The modal components page argues that a dialog earns its interruption only for a short decision or a task measured in seconds, and that anything longer wanted to be something else. A drawer is that something else. It can be tall, it can scroll without feeling broken, and it can sit beside the content it describes rather than on top of it.

Filters make the case best, since you want to watch a result list change while you narrow it, which a centered dialog physically prevents. Once built, most drawers are still dialogs semantically, so the W3C dialog pattern applies: focus moves inside on open, and Escape closes it.

440px on desktop, 375px on mobile

Every drawer here is drawn at 440px wide and 960px tall for desktop, and full width at 375px for mobile, where a side panel stops being a side panel and becomes a sheet covering the screen. The two breakpoints are separate variants rather than one resizing frame, so the mobile version of a payment form stacks its fields properly instead of squeezing the desktop layout.

The header is its own component with a tabs property: 98px tall without tabs on desktop and 170px with them, 94px and 166px on mobile. Header height is worth knowing precisely, because that is the part that stays pinned while the body scrolls, and every pixel of it is height the content does not get.

More panel types than you will use

The type list runs long: filters, notifications, messages, message chat, user profile, user settings, team members, project details, order summary, payment details, payment method, plan, file upload, labels, calendar event, create event, share project, integration, two AI assistant panels, and a plain placeholder for when none of them fit. Notification settings appears twice, once built from checkboxes and once from button groups, which is a small argument about how a settings row should behave, settled in a file rather than a meeting.

Several types overlap with sets of their own, so a drawer full of filter controls or an activity feed in a side panel is assembled from the same parts you would use anywhere else. Every frame exists twice across the file, light and dark.

Sliding one in

In a prototype a drawer is an overlay with a move in transition from the right, plus a scrim and close when clicking outside, all of which Figma's prototyping guide covers. If you want the panel to push the page rather than float over it, smart animate handles it, as long as your layer names match across both frames.

One caution before you put navigation in one: Nielsen Norman Group's research on hidden navigation found discoverability roughly halves when the main menu goes behind an icon. A drawer is a good home for a task and a poor home for your information architecture. On desktop, a persistent sidebar is the better answer.

When the panel needs to actually open, Untitled UI React drawers are open source, built with Tailwind CSS and React Aria, with the focus trap, Escape handling, and scroll locking on the page behind already wired up.