How to Create an Empty State

A two-minute introduction to empty states & how to create them!

Empty states are how your app should appear if there is no data to show. For example if your home screen is a list of the user's Trips, but they haven't created any trips yet, instead of showing a blank screen, you can show them a message message explaining that they need to create a trip.

There are two main cases when you likely want to create an empty state: for a search bar if the input doesn't fit any of the data, or when a user encounters a screen with no data yet.

Search Bar Empty State

Create an empty state if a search term doesn't have any results

1. Insert an image underneath the list (you might have to extend the size of the screen to do this)

2. Alter the image's visibility so that it's sometimes visible
3. Apply the same filter to the image that has been applied to the list-- in this case List Item (equals, contains, does not contain) Input

4. Apply another custom filter so the image will be visible when Item Count (is equal to) 0
5. Preview to test empty state

For help creating a search bar, click here

Empty Page State

Create an empty state page for a screen if there's nothing to display (see example below)

1. Insert an image underneath a list, or another component, (you might have to extend the size of the screen to do this)

2. Alter the image's visibility so that it is sometimes visible
3. Set the visibility so that if the count of the list items is 0, the image will display

4. If necessary, add the same custom filter for the empty state as the component

5. Preview to test the empty state