Designing App Clips

App Clip

App Clip is a new way of interacting with the users. It aims to simplify user interaction with apps, services and more without the need to download the app from the AppStore.

Design elements of an App Clip

An app clip card has different design elements like a title, subtitle, an image for the card that should communicate the app clip’s features, a call to action button and metadata information.

How does it work?

Once you trigger your app clip, a small card will pop up on your device. This clip will show you the necessary information to communicate the app clip’s features, tasks, or content and drive the user to take that specific action.

Access to App Clips

There are different ways to access App Clip - by geolocalization, by scanning a QR Code, an App Clip Code or a NFC, or even by the web. If you have the App, it will open the app.

Title

You can customize the title and the subtitle of the App Clip; make sure to give the right title to your App Clip. There may be people who are using your App Clip for the first time, so it is essential you can explain the app clip’s purpose clearly. If you want to learn more, please refer to Apple's Human Interface Guidelines.

Header Image

For the header image you can create a beautiful imagery. Apple recommends using a 1800px × 1200px PNG or JPEG image without transparency. If the App Clip represents a place or a shop, you can use a photo instead, one that can better explain the service. Try to not fill it out with art, with text or screenshots. If you want to learn more, please refer to Apple's Human Interface Guidelines.

Action

The blue button is the action button of the App Clip. It takes the user to the App Clip's primary purpose, which can be a payment, some media, an app trial, or more. You can also choose the right verb for the action button between Open, View and Play, whichever provides the best context for your App Clip. If you want to learn more, please refer to Apple's Human Interface Guidelines.

App Attribution

It is the bottom part of the App Clip. Once you tap there, it will take you to the AppStore to download the App. Also, in case you need to change the App attribution information, you can do it by changing the App metadata. If you want to learn more, please refer to Apple's Human Interface Guidelines.

Icon

There is nothing special that you need for your icon. Apple will automatically generate the App Clip icon from the original icon of your App and it will add a dash border to the icon.

Distributing You App Clip

So, when you want to publish your app clip to the AppStore, you cannot submit the app clip on its own. App Clip is part of the app bundle that you submit to the AppStore. Something you need to take into account is that App Clips are not available for enterprise distribution. There is more information that you can read about regarding the distribution of your App Clip.

Further information

There is an excellent video from WWDC 2020 that explains what an App Clip is, what it does and how you can design them. Also, make sure to always refer to Apple's Human Interface Guidelines, since it is the official source and they are always adding updates to the guidelines. If you want to have a taste of App Clips, you can try Scribble's App Clip, which is a neat drawing app. Also, there is another interesting post by Guilherme Rambo where he explains how he created an App Clip for his App.

How to design an App Clip

Let's design an App Clip for the iPhone Pro 11 Max. For this exercise, we will use Figma but feel free to use your favorite design tool. The first thing we will do is to create a new Frame sized 402px x 464px with no fill.

Inside this new frame, create a rectangle with rounded corners. We will give the rounded corners a radius of 38.

Next, change the background color of the rectangle to a linear gradient with #4316DB on the top and #9076E7 on the bottom.

Let's duplicate the rectangle, the first one will be used as a background and the other as a mask. Place one of our illustrations over the rectangles. Now, group the illustration with one of the rectangles. Then, right click the rectangle from the group and select "Use as Mask".

Create a white rectangle sized 402 x 197 with 50% opacity and a radius corner of 38 for both corners in the bottom. Also, add a Drop Shadow with 44.5 Blur, 22.25 in the Y axis, all in white and 30% opacity. Finally, add a background blur at 29.67.

Place the company logo over the art and center it. You can put it at 128 on the X axis and 60.08 on the Y axis.

Next, create a new frame for our action button. Press R to create a rectangle and add rounded corners, with a radius of 30. Now, add some colors like this blue - #0091FF. Also, add two drop shadows, the first one with a blur 48.71, 24.35 in Y, a color of #5C6799 and with an opacity of 20%. The other drop shadow, let's add a blur of 3.65 a 1.22 in Y, #000000 and 5% opacity. Also let's add text with 19 points, SF Pro Text, Medium. Make sure to center the text and with a letter spacing of -1.

Then, press T to create a new frame for the title and the description. Set the title to Swift UI Course, in SF Pro Display, Bold and 24 points. For the description, write Watch the first 5 videos of this course in SF Pro Text, Regular and 15 points, with -1 in letter spacing.

Let's create a new frame where we will add the company logo, text and the App Store icon. You can take a look at the original file so you can check the specs.

Draw a black line sized 350 x 1.5 with 10% opacity. We will provide the close icon in the original file.

Now, place each one of the frames on the card. We provide the original asset so you can take a look at where exactly we place each one of the elements.

Conclusion

App Clip is an excellent addition to your app; as a developer, it is easy to add an app clip to your XCode project. As a user, it is easier to share between your closed circle or anyone and there are many ways to trigger or share an App Clip.