Description

A fully customizable iOS notification component. Trigger it with a tap or on load. Swipe to dismiss it and more! Don’t forget to turn the volume up — when you trigger a notification, Apple’s default iPhone Notification Sound Effect is played! 📱🔔🎵

Usage with Overrides

onTap()

1. Wrap the notification component in a Frame CMD + Enter
2. Enable Override (+) from the property panel
3. Select File: App, Override: DefaultNotification and apply it to the Frame you added.
4. Determine a tap target to trigger the notification (i.e. a button) and apply either the TriggerPersistentBanner OR TriggerTemporaryBanner override to it.
5. Preview and action!

onLoad()

1. Wrap the notification component in a Frame CMD + Enter
2. Enable Override (+) from the property panel
3. Select File: App, Override: AutomaticNotification and apply it to the Frame you added.
4. Preview and voila!

Properties

Property	Type	Description	Default
Device	enum	iPhone 8 or iPhone X +.	iPhone X +
App Icon	image	Insert your app icon.	Placeholder
App Name	string	Insert your app name.	APP NAME
Title	string	Optional title.	Title
Subtitle	string	Optional subtitle.	Subtitle
Description	string	Required description.	Description
Thumbnail	boolean	A thumbnail preview.	Show
Image	image	Upload thumbnail image.	Placeholder
Time	boolean	Min or Hrs.	Min.
Minutes	number	0 to 59 min.	Now
Hours	number	1 to 24 hrs.	1h ago
Mode	boolean	Light or dark.	Light
Screen	boolean	Home or lock.	Home
Many?	boolean	No or yes.	No
Count	number	1 to 500.	1
Scale	number	Scale 0 to 1.	1

Use cases

Onboarding

• Adding a verification code or confirmation email to your onboarding flow? Simulate the real thing by utilizing the overrides provided below.

Home or Lock Screen

• Exploring how a user will complete a task after navigating to your app from a push notification? Visit the overrides section below to trigger a notification when your prototype loads.

Marketing

• Need to create branding or marketing assets? Use a single notification component in a mock or duplicate it to create a stack. Don’t forget to enable the “Many” toggle so you can set the notification count.

Content

• Want to preview how the content of your push notification will look for users? Simply input a title, subtitle (optional) and description to ensure you’re communicating the most important things at a glance. Rest assured, the notification component follows Apple’s native convention and truncation patterns no matter if you display it on the lock or home screen.

Contact

For any questions, feel free to reach out on Twitter.