How Do You Design an App Icon for Vision Pro in Figma?
Apps for visionOS have icons, but there are a few differences from making ordinary icons. So here are my notes on creating app icons for visionOS.
There are several conventions when creating an app icon. If you make one in Figma without thinking, it becomes a flat-looking app icon. So first, read the following link carefully.
The amount of text is not large, but I want to keep the following points in mind.
- Create it at 1024 x 1024
- There are three layers: a background layer, a foreground layer, and a layer even further forward
- The icon does not need to be created as a circle; even a filled square will be clipped automatically
- The foreground layer and the further-forward layer automatically receive shadows relative to the background layer and other layers
In particular, if you make it circular from the beginning, it may be clipped in a strange way. Also, if the creator adds shadows manually, those shadows may look strange to users depending on the angle.
Come to think of it, with drop shadows, long ago we made them as images, and later added them with CSS, but the creator decided the angle and amount of shadow. In visionOS, natural shadows are applied. Perhaps drop shadows are meant to be left to nature.
You should also read the following developer documentation.
It includes specific image sizes, as well as comparisons with icons on other devices.
I wrote that app icons for visionOS have three layers, but when you actually make one, it is surprisingly confusing. If the background color is fixed and you only place a logo on top, two layers are enough. However, if you create it with only two layers, it feels slightly flat when displayed on the Home screen.
I tried making an icon for "Yorihiroi Frontend." Originally it is a logo that could be done with two layers, but after some thought, I split the logo and made the "yorihiroi" part the frontmost layer.
Export each completed layer from Figma. Personally, I thought it might be easiest to prepare three 1024 x 1024 frames and work inside them. When I first tried to split the logo and copy and paste it into three layers, the positions shifted. It might also work to place the same logo on two layers and delete unnecessary parts from each.
You can combine the completed layers into an icon by opening Assets.xcassets in Xcode and dragging each layer into the corresponding layer slot. There is also a preview screen, and you can check it from various angles by moving the mouse cursor.
Perhaps in future apps, logo creation based on three layers will become the norm.