Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Speedruns
    • Starter Kit
    • Sessions
  • 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 Box
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

Prototyping Examples

This pattern library of prototyping examples is a great starting point to inspire your own app and website designs. Our examples are designed as building blocks to make prototyping easy and more accessible.

Magic Motion

Photo View

Magic Motion

Menu Transition

Smart Components

To Do App

Smart Components

Music Player

Smart Components

Social App

Basics

This interaction pattern library allows you to start with the basics. Find prototyping examples that use every transition type to create anything from to-do lists to image galleries, as well as a range of components, flows, interactions, effects, and code.

Overlays

Modal Box

Components

Loading Indicator

Flows

Checkbox Form

Interactions

Switch Sheet

Magic Motion

Toggle Menu

Integrations

Signature Pad

Code

Slider

Framer

  • Why Framernew
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

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

Learn

  • Tutorials
  • Examples
  • Speedruns
  • Starter Kit
  • Sessions

Resources

  • Packages
  • API
  • 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