Skip to content

Updated

Copy page

Search and filter screens

Finding one thing among many, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. Search narrows by words, filters narrow by facts, and every screen here shows how many results are left before anyone commits.

Copy page

Updated

On this page
  1. Screens
  2. Live components
  3. The rules
  4. iOS and Material
  5. Related
  6. Get the file

Screens

Every screen of the Appetite UI Figma file that shows the pattern, light and dark. The theme switch shows the dark frames.

Search and filter screens393 x 852 each, Light and Dark
Booking app Results screen: Ruka, Finland with 12 to 17 Feb and 3 guests above Filters, Price, Cabin and Sauna chips, a map with six price pins from $120 to $240 and the $180 pin selected, and a sheet that opens on 24 cabins and a Lakeside cabin cardBooking app Results screen in dark mode: Ruka, Finland with 12 to 17 Feb and 3 guests above Filters, Price, Cabin and Sauna chips, a map with six price pins from $120 to $240 and the $180 pin selected, and a sheet that opens on 24 cabins and a Lakeside cabin card
Booking app, Results
Booking app Filters screen: a Price range slider from $60 to $320 under a price histogram, Any type, Room and Whole place chips, a Bedrooms stepper set to 2, Amenities rows with switches, and Clear all and Show 24 stays buttonsBooking app Filters screen in dark mode: a Price range slider from $60 to $320 under a price histogram, Any type, Room and Whole place chips, a Bedrooms stepper set to 2, Amenities rows with switches, and Clear all and Show 24 stays buttons
Booking app, Filters
Social app Search screen: a Search field above a list of people, each with an avatar, a name, a handle and a Following or Follow buttonSocial app Search screen in dark mode: a Search field above a list of people, each with an avatar, a name, a handle and a Following or Follow button
Social media app, Search
Social app Explore screen: a Search field, #trending, #fitness, #travel and #fashion chips, and a grid of photos with one large tileSocial app Explore screen in dark mode: a Search field, #trending, #fitness, #travel and #fashion chips, and a grid of photos with one large tile
Social media app, Explore
Tasks app Search screen: the query onboarding with recent searches as removable chips and results grouped as Tasks, Projects and PeopleTasks app Search screen in dark mode: the query onboarding with recent searches as removable chips and results grouped as Tasks, Projects and People
Task manager app, Search
Tasks app Filters sheet over the dimmed Board: a Board, Table and Timeline switch, Status, Priority and Assignee chips, an Only overdue switch, and Clear and Show 3 results buttonsTasks app Filters sheet over the dimmed Board in dark mode: a Board, Table and Timeline switch, Status, Priority and Assignee chips, an Only overdue switch, and Clear and Show 3 results buttons
Task manager app, Filters
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
Booking appResultsA map with price pins and a sheet of resultsBooking app search and filters
Booking appFiltersPrice range, place type, bedrooms and amenitiesBooking app search and filters
Social media appSearchPeople matching a search, each with a Follow buttonDocs
Social media appExploreA photo grid under search and topic chipsSocial media app feed
Task manager appSearchRecent searches and results grouped by typeDocs
Task manager appFiltersA sheet of filters over the BoardDocs

Which components carry the search and filters pattern?

Drawn live from the kit's tokens, at the kit's geometry. Tap them: they behave as the Figma prototype does.

Search and filters, live componentsKit geometry, light and dark

Search, Field

Chip, filters

Stepper and Button

2

What does every search and filters screen do?

The rules the screens above share. Each app's page says how its screen applies them.

Rules, rule, why
RuleWhy
Count the results on the buttonA filter sheet ends on Show 24 stays or Show 3 results, so the effect of a filter is visible before it is applied.
Chips for one tap filtersThe filters people use most sit as Chips above the results; the rest wait in a sheet behind one button.
Clear is always next to ShowEvery filter sheet has a way back to no filters beside the button that applies them.

What changes between iOS and Material?

The frames are drawn in the ios-md Platform mode. Switch a frame to android and these variables take the Material values.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/sheet/corner1228
platform/bar/top-height4464
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
ChipNo counterpartM3 / Chip, 32 high at radius 8The Apple pages have no chip
SheetiOS / Sheet - Full ScreenM3 / Bottom sheet 412 wide and Side Sheet 320 wideMaterial adds a side sheet for large screens

Start from these screens.

Every frame on this page is part of the Appetite UI file, drawn from its components and bound to its variables, so one brand edit moves every screen in light and dark.

The file holds 589 variables in 6 collections and exports its token values to SwiftUI, Jetpack Compose, Flutter and CSS. Solo covers one designer and Team up to ten people. You pay once and keep lifetime updates. Price goes up Nov 1

The read-only Figma preview opens the whole file, every screen and every variable, before you buy.

Get lifetime accessOpen the Figma previewSee the plans