Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Animated Tabs
Card List
Card Paging
Menu Transition
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Bottom Sheet

Open in Framer to interactPreview this example

Slide some extra content into your layout with a bottom sheet; it’s easy, using the link tool's Overlay transition.

Open in FramerPreview Example

Learn more about bottom sheet interactions

What is a bottom sheet?

A bottom sheet has nothing to do with bed linen. And nor is it an obscure euphemism for toilet paper. Instead we’re talking about an expanding surface anchored at the bottom of a page that contains supplementary information which would otherwise not fit on the same screen.

Bottom sheets are typically used only in mobile app design, where lack of screen space makes them a highly valuable asset. As a bottom sheet can be easily opened and closed using just a single thumb-swipe, they are a convenient and ergonomic method of displaying a wide variety of secondary content. Whether you own an iOS or Android device, you will likely already be quite familiar with this interaction from using Google Maps.

Types of bottom sheet

There are two main types of bottom sheet; persistent and modal. Let’s take a look at each of these in turn.

Persistent

As the name suggests, a persistent bottom sheet is displayed permanently – at least in part – at the bottom of the screen, coexisting alongside the screen’s main UI region. Users can view the entire sheet by dragging it upwards to reveal extra content. Similarly, they can hide the additional options by dragging the sheet back down again. Although a portion of a persistent bottom sheet remains visible at all times, it does not interfere with the overall functionality of the page.

Modal

In contrast to persistent bottom sheets, modal ones are ordinarily hidden from view at the bottom of the page, but can be quickly expanded by swiping up. Activating a modal sheet will cause the rest of the app to be deactivated and shadowed-out (i.e. a semi-transparent scrim is applied), meaning that this kind of interaction is more invasive for the user than the persistent bottom sheet design.

As a result of this, a modal sheet should be used only to offer very important extra features that would in any case require the user to momentarily pause all other activity. However it is normally possible to dismiss a modal sheet if necessary; by tapping outside the modal, the menu contracts and the app resumes normal function.

Design and usage

Bottom sheets can vary in height. Most will likely take up half of the screen size, while others may not need to be quite so tall – all depending on the content that must be shown at the bottom of the screen. Often when a bottom sheet initially appears, it will contain content that “bleeds” off the screen. This information can be revealed by dragging upwards.

There are several different use cases for bottom sheets. In their collapsed state, these uses may all look the same, but in practice they can all hold very different content. Some examples of common uses are as a menu; for displaying location information or other dialog; for revealing music player settings; or as a search bar.

How to create a bottom sheet interaction in Framer

It’s easy to make this interaction in Framer. You will need two frames, one for your main screen and one for your bottom sheet. The sheet should be shorter in height than your main screen. Once you have designed the content for your main screen and the sheet, link the main screen to the bottom sheet and set the transition type to overlay. Then, customize your overlay so that it comes up from the bottom on tap. And there you have your bottom sheet interaction!

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement