TSTier SlateAll mockups

UI mockups · Mobile app

Music player UI mockup

A mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.

  • 2 screens
  • mobile
  • Free
  • Editable
Open in TierslateSee the screens

Share

  • Facebook
  • X

The 2 screens

Music player: Library, Now playing. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.

  1. Library screen9:41Your libraryAKPlaylistsArtistsAlbumsYour playlistsSee allPlaylist cover: warmsunrise gradient with…Morning Run42 songs · 2 h 3…Playlist cover: calmblue wavesDeep Focus87 songs · 5 h 1…Recently playedGolden HourLumen FieldsPaper BoatsNora ValeNeon TideCoastal StaticGolden HourLumen FieldsHomeSearchLibrary
    1Library

    Library

    Phone screen with 10 paragraphs, 6 images, 5 headings, 5 icons, 3 cards, an avatar, a link, a list and 3 more component types.

    Headings
    Your library · Your playlists · Morning Run · Deep Focus · Recently played
    Navigation
    Playlists · Artists · Albums · Podcasts · Home · Search · Library
    Text and labels
    See all · 42 songs · 2 h 38 min · 87 songs · 5 h 12 min · Golden Hour · Lumen Fields · Paper Boats · Nora Vale · Neon Tide · Coastal Static
  2. Now playing screen9:41Playing from Morning RunAlbum art: Golden Hour by Lumen Fields - alone tree against an orange skyGolden HourLumen Fields · Long Light1:243:41Lossless
    2Now playing

    Now playing

    Phone screen with 10 icons, 4 paragraphs, 2 sliders, a badge, a heading and an image.

    Headings
    Golden Hour
    Text and labels
    Playing from Morning Run · Lumen Fields · Long Light · 1:24 · 3:41 · Lossless

Open and edit it

The music player mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.

Open in Tierslate

More mockups

  • Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
  • Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
  • Social feed UI mockup - A photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.
  • iOS fitness app UI mockup - An iPhone activity tracker in the iOS 17/18 look: large-title navigation, activity rings, widgets, inset grouped lists, a tab bar, a settings sheet, an action sheet and an alert over the keyboard.
  • Android mail app UI mockup - A Material 3 (Material You) email client: search bar, filter chips, inbox list, FAB, navigation drawer, message view, compose with a dialog, a schedule-send bottom sheet, and a tablet layout with a navigation rail and date/time pickers.
  • Ride hailing app UI mockup - A mobile ride app: pick up and destination over a map, a choice of ride types with prices, and a live driver-on-the-way screen.
All 22 mockupsSystem design templates
Tierslate

tierslate.com

HomeTemplatesUI mockupsPrivacyTerms