From the course: UX Foundations: Multidevice Design
Join today to access over 25,300 courses taught by industry experts.
Designing layouts for watches - Figma Tutorial
From the course: UX Foundations: Multidevice Design
Designing layouts for watches
- [Instructor] In the previous module, we organized the music app around key tasks and functionality. With the goal of having the watch be the secondary device to the phone. Now it's time to lay out the screens to make the best use of our spatial constraints of the device. The key screens for this will be the home screen, a playlist view, and the player view. I've already pre-made some of the components in Figma, but I'll walk through the key details if you want to follow along. I'm using the latest guidelines for WatchOS for the size of 41 millimeters. Let's select the watch frame. In Figma, you can select F for frame. On the right hand side, you'll see some options to select for watch. Change the fill to 00000 to match the mobile app. I have previously created the navigation bar, and the text is SF compact medium at 16. Let's insert two rows, the first row's for the playlist and the second for favorites. I'll paste…
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.