Mobbin

Interesting sites

Interesting sitesUI LibraryLevel: EasyFree plan

Mobbin

4.0/52dm rating

A library of real app screens, very useful when designing.

A library of screenshots and user flows from real apps and websites, quickly copied into Figma for reference.

Official site How to use it

Overview

Mobbin is a design reference library with a large number of real, released screens from mobile apps and websites, updated regularly. Content is organized by app, screen, flow, motion and interface component.

The difference is that you can view a whole user journey, such as signing up, checking out or deleting an account, through consecutive steps instead of a single image. Mobbin has plugins for Figma and FigJam to paste multiple screens or an entire flow onto the canvas.

For businesses building an app or website, Mobbin helps research how major products solve the same problem, leading to better-grounded design decisions.

Highlights

Real released screens

Reference actual products instead of conceptual mockups.

Browse by flow

Flows group the steps of a task such as onboarding, checkout and account management.

Interface components

The UI Elements section categorizes cards, tables, navigation bars and pop-up windows for quick comparison.

Copy to Figma

Select multiple screens or a flow, click Copy to Figma, then paste with the Mobbin plugin.

Personal library

Save screens and flows to collections and upload your own screenshots to make an inspiration board.

What it's for

Design an ordering process

Look at the checkout flows of big commerce apps before drawing the flow for your own app.

Improve onboarding

See how other products lead new users through the first few screens.

Write briefs for the dev team

Gather sample screens into Figma with notes so developers understand the requirements correctly.

Competitor research

See the interfaces of products in the same segment if they are in the library.

Train new designers

Use real flows as exercises for analyzing user experience.

How to use it

1
Create an account
Go to mobbin.com and sign up to start browsing the library.
2
Choose a platform
Choose to view mobile or web designs depending on your project.
3
Search by need
Browse by app, screen, flow or interface component, or type a search keyword.
4
View an interaction flow
Open a flow and click through each hotspot to experience it like a prototype.
5
Bring it into Figma
Select a screen or flow, click Copy to Figma, open the Mobbin plugin in Figma and paste onto the canvas.
6
Save collections
Save useful samples to your library by project for reuse.

Video guides

How To Use Mobbin for UI/UX Inspiration!
Didasko Media

How to Find Top-Tier Website & App Design Inspiration in Minutes: Mobbin 2024
Jonathan Waterworth

Real-world example

Illustrative scenario

A food delivery startup in Can Tho is preparing to build its own app. Before the design meeting, the product team goes to Mobbin to view the ordering and checkout flows of several food delivery apps, copies those flows into FigJam, and marks what is reasonable and what is cumbersome. That way the whole team quickly agrees on the desired number of ordering steps before the designer starts drawing.

Tips & notes

Learn the structure, don't copy the interface
Use samples to understand layout logic, then design according to your own brand identity.
Compare multiple products
View the same flow in a few apps to see the commonalities and differences.
Name collections by project
Helps the whole team find references quickly when a project runs long.
Mind the Vietnamese user context
Payment and login habits in Vietnam may differ from the market of the sample product.