From the course: UX Foundations: Multidevice Design
Join today to access over 25,300 courses taught by industry experts.
Designing the Music Player screen - Figma Tutorial
From the course: UX Foundations: Multidevice Design
Designing the Music Player screen
- [Narrator] In this movie we're creating a screen which showcases the song and player controls. This will be the immersive view when users want to tap into a song. We'll show details like the playlist it's from, the name and artist, and actions the user can take. Let's start with the navigation bar. I made the arrow point downward, as this will slide down on tap so the user gets a better understanding of what will happen once it is tapped. The name of the playlist is centered. Next, we'll add a rectangle representing the song image. The size will be 335 wide and 360 high. Let's add the song title below in the same font we've been using, SF Pro at 22. Below the song title is more details in SF Pro 14. Like the artist name and song name. We'll add the player controls for play, forward and back. I'm using the SF symbols for these icons, and these are semi bold at 32. I leveraged the same design from the previous screen…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.