App Clips

ComponentsSystem

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/app-clips. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

App Clips

  • A rental bike could come with an App Clip Code that people tap or scan to launch an App Clip that lets them rent the bike.

  • A coffee shop could offer an App Clip for fast advance orders that customers launch from a Smart App Banner or an App Clip card on the shop’s website. Customers could share a link to the website from the Messages app, which recipients then tap to launch the App Clip from within Messages.

  • A food truck could create marketing material (for example, a poster to promote a seasonal dish) that includes an App Clip Code. People can scan the App Clip Code with the Camera app on their device and instantly launch the App Clip to order the seasonal dish.

  • A restaurant could let diners pay for a meal by launching an App Clip from the Maps app or a suggestion from Siri Suggestions, or by holding their device close to an App Clip Code or NFC tag at their table.

  • A museum could have visitors scan App Clip Codes or QR codes on labels next to displayed works to launch an App Clip that reveals augmented reality content or provides audio commentary.

  • A game might offer an App Clip that lets people play a demo version of the game, including a tutorial and the first level of the game.

  • A fitness app might offer an App Clip with a free workout and a guided meditation.

  • A text editor might allow people to create and save a document using the demo App Clip.

Designing your App Clip

Allow people to complete a task or a demo in your App Clip.

Focus on essential features.

Don’t use App Clips solely for marketing purposes.

Avoid using web views in your App Clip.

Design a linear, easy-to-use, and focused user interface.

On launch, show the most relevant part of your App Clip.

Ensure people can use your App Clip immediately.

Ensure your App Clip is small.

Make the App Clip shareable.

Make it easy to pay for a service or product.

Avoid requiring people to create an account before they can benefit from your App Clip.

Provide a familiar, focused experience in your app.

Preserving privacy

Limit the amount of data you store and handle yourself.

Consider offering Sign in with Apple.

Offer a secure way to pay for services or goods that also respects people’s privacy.

Showcasing your app

  • On the App Clip card, people can either launch the App Clip or visit the full app’s page on the App Store.

  • When people first launch the App Clip, the system displays an app banner at the top of the screen. Like the App Clip card, the banner allows people to visit the app’s page on the App Store.

Don’t compromise the user experience by asking people to install the full app.

Pick the right time to recommend your app.

Recommend your app in a nonintrusive, polite way.

Limiting notifications

Only ask for permission to use notifications for an extended period of time if it’s really needed.

Keep notifications focused.

Use notifications to help people complete a task.

Creating App Clips for businesses

Use consistent branding.

Consider multiple businesses.

Creating content for an App Clip card

Be informative.

Prefer photography and graphics.

Avoid using text.

Adhere to image requirements.

Use concise copy.

Pick a verb for the action button that best fits your App Clip.

App Clip Codes

Interacting with App Clip Codes

  • A coffee shop could place an App Clip Code on their menu. A guest could hold their device close to the App Clip Code and instantly launch the shop’s App Clip to order a drink.

  • A gas station could have an NFC-integrated App Clip Code attached to each pump. A traveler could hold their device close to it to launch the gas station’s App Clip and use it to pay for their refill.

  • A video game creator could hand out marketing material at an industry event that includes an App Clip Code. An event attendee could scan the code to launch an App Clip that’s a playable demo of their latest video game.

Displaying App Clip Codes

  • On a tabletop at a restaurant

  • Near a register at a retail store

  • In a storefront window

  • On signage

  • On a gift card or coupon

  • On posters or printed advertising

  • On signage behind a counter or unreachable in a storefront

  • On digital materials such as digital displays, in emails, or on images you post to social media

Include the App Clip logo when space allows.

Place your App Clip Code on a flat or cylindrical surface only.

Help your App Clip Code remain as flat as possible so it’s easy for people to scan.

Place your App Clip Code in a location that helps ensure reliable scanning.

Make sure the App Clip Code is unobstructed.

Display the App Clip Code in an upright position.

Don’t create App Clip Codes that are too small.

Provide enough space between an App Clip Code and adjacent App Clip Codes, graphics, or materials.

Using clear messaging

  • Scan to [describe what people can do with your App Clip].

  • Scan using the camera on your iPhone or iPad to [describe what people can do with your App Clip].

  • Scan to [describe what people can do with your App Clip].

  • Hold your iPhone near the [object name] to launch an App Clip that [describe what a person can do with your App Clip].

Adhere toGuidelines for Using Apple Trademarks when referring to your App Clip and App Clip Codes.

Customizing your App Clip Code

Always use the generated App Clip Code.

Choose colors with enough contrast that ensure accurate scanning.

Printing guidelines

Use high-quality, non-textured print materials.

Use high-resolution images and printer settings.

Use correct color settings when you convert the generated SVG file to a CMYK image.

If you’re using a printer that only prints in grayscale, only generate grayscale App Clip Codes.

For NFC-integrated App Clip Codes, choose Type 5 NFC tags.

If you create large batches of App Clip Codes, thoroughly test your printing workflow, and verify printed App Clip Codes.

Verifying your printer’s calibration

Verify print quality of your chosen color pair with the printer calibration test sheet that shows text boxes for each default color pair.

Verify your printer’s grayscale settings by printing the printer calibration test sheet that shows two grayscale bars.

Platform considerations

Resources

Developer documentation

Videos

Change log


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/app-clips

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.