Apple Watch Complications Free Figma Template

Apple Watch Complications - Free Figma Template

Use the Playground page to customize any watch face by selecting different circular and rectangular complications.

Based on Apple Human Interface Guidelines.

This file features:

Circular Complications

Activity, Alarm, Audiobooks, Battery, Calendar, Camera Remote, Compass, Contacts, Cycle Tracking, Find My (Find Devices, Find Items, Find People), Heart Rate, Home, Mail, Maps, Messages, Mindfulness, Music, News, Noise (Sound Levels), Phone, Podcasts, Radio, Reminders, Remote, Sleep, Stopwatch, Time (Analog Time, Digital Time), Timer (Timer, Countdown), Voice Memos, Walkie Talkie, Weather (AQI, Conditions, Rain, Temperature, UV Index, Wind), Workout, World Clock (Sunrise / Sunset, Analog Clock, Digital Clock).

Rectangular Complications

Activity, Alarm, Audiobooks, Calendar, Compass, Heart Rate, Music, News, Noise, Now Playing, Podcasts, Radio, Reminders, Stopwatch, Timer, Weather (Conditions, Rain, UV Index, Wind), Workout, World Clock (Sunrise / Sunset, Digital Clock).

Classic Watch Face Colors

Multicolor, Red, Orange, Light Orange, Yellow, Light Yellow, Light Green, Green, Light Blue, Blue, Navy, Purple, Light Purple, Light Pink, Pink, Plum, Stone, Warm Gray, Cream, Gray.

watchOS 9 Background Gradients

Multicolor, Red, Abyss Blue, Clover, Green, Blue, Apricot, Orange, Starlight.

Apple Watch Series 7 Device Mockups

Dark Clay, Blue, Green, Dark Cherry, Lavender.

External Links

1. Complications Apple Human Interface Guidelines
2. Additional Reference: Watch App Store

Changelog

08.24.2022

• Published Community file.

08.25.2022

• Slightly reduced opacity of Title layer in cover image to better balance contrast between text and complications.

08.27.2022

• Transferred Gray and Light Gray color styles from Multicolor folder to Base folder.

08.28.2022

• Tweaked hex code for Base/Text and Base/Indicator color styles to #F2F2F2 in order to minimize eye strain.
• Added Base/Pure White color style with hex code #FFFFFF.
• Added placeholder watch faces to Apple Watch device mockups [ Master Components].

08.29.2022

• Fixed spelling error in Guide: Changing Complications [ Playground].

08.30.2022

• Fixed progress bar colors in Rectangular Complication/Audiobooks and Rectangular Complication/Timer watchOS 9 Background Gradients.
• Adjusted hard light values of Circular Complication/Contacts overlays Red, Apricot, and Starlight Background Gradients.

08.31.2022

• Fixed text size discrepancy in Circular Complication/Calendar watchOS 9 Background Colors & Gradients.
• Fixed font discrepancy in Track layers Rectangular Complication/Music, Rectangular Complication/Now Playing, Rectangular Complication/Podcasts.
• Fixed font discrepancy in Date layers Rectangular Complication/Reminders, Rectangular Complication/Workout.
• Fixed text layer spacing between Time, Current Event, and Upcoming Event layers in Rectangular Complication/Calendar.

09.04.2022

• Fixed font discrepancy in ETA layers Rectangular Complication/Alarm.
• Adjusted vertical positioning of Time layer Rectangular Complication/Alarm.

09.10.2022

• Fixed an issue where Title layer in cover image was rendered incorrectly in Drafts.

09.14.2022

• Pushed miscellaneous minor fixes.

This freebie Apple Watch Complications was originally shared by Adi Chakravarty on this url.

The category for this freebie is App Designs. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask Adi Chakravarty nicely and they will probably allow you to use it.