iOS Notification

Rocco Marinaccio

iOS Notification

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.