Exporting App Icons from Figma to Xcode: A Step-by-Step Tutorial

As an iOS developer, understanding how to export app icons from Figma to Xcode is crucial for your app's branding. This guide covers everything from setting up your Figma frames to importing icons into Asset Catalogs.

Setting Up Figma for Icon Design

Begin by creating a new frame in Figma with dimensions 1024x1024 pixels. This size is ideal for generating all required iOS app icon sizes. Use the rectangle tool to draw your icon design within this frame, ensuring it fits within the safe area. Remember to keep important elements centralized to avoid cropping when displayed as smaller icons. Once your design is complete, you can prepare for export by selecting the frame and navigating to the Properties panel on the right.

Export Settings in Figma

To export the icon, select your 1024x1024 frame, then go to the 'Export' section in the Properties panel. Click on 'Add Export Setting' and choose PNG as the format, ensuring you select 2x and 3x scales for iOS. This will generate the appropriate sizes required for the App Store: 180x180, 120x120, 87x87, and other necessary dimensions. After setting the export options, click 'Export' and save the files to a dedicated folder to make the import process into Xcode easier.

Generating All Required Icon Sizes

When exporting from Figma, ensure you generate all required app icon sizes for iOS. These sizes include: 1024x1024 (App Store), 180x180 (iPhone), 120x120 (iPhone), 60x60 (iPhone), 167x167 (iPad), and 76x76 (iPad). Use Figma's export feature to export at these pixel dimensions: 1024x1024, 180x180, 120x120, 87x87, 60x60, 167x167, and 76x76. It's important to maintain PNG format for compatibility with Xcode.

Importing Icons into Xcode's Asset Catalog

Open your Xcode project and navigate to the Asset Catalog. Create a new Image Set and name it 'AppIcon'. In the AppIcon set, you will see placeholders for various sizes. Drag and drop your exported PNG files directly into their corresponding slots in the Asset Catalog. Make sure that you are placing the correct sizes in their respective spots as per Apple's Human Interface Guidelines. For instance, ensure that the 1024x1024 icon is added to the App Store slot. This structure is crucial as incorrect sizes can lead to App Store rejections.

How IconBundlr Streamlines This Workflow

IconBundlr greatly simplifies the icon generation process by automating size generation and format export. Instead of manually exporting each size from Figma, simply upload your design to IconBundlr, and it will generate all required sizes and formats in one go. This not only saves time but also minimizes the risk of manual errors that can lead to App Store rejections. By integrating IconBundlr into your workflow, you can focus more on coding and less on design logistics.

Developer Tips

Always check your icon sizes against Apple’s Human Interface Guidelines to avoid rejection.
Use a naming convention that is clear and organized when exporting from Figma for easier management.

FAQs

What sizes do I need for app icons in Xcode?

For iOS app icons, you need the following sizes: 1024x1024, 180x180, 120x120, 87x87, 60x60, 167x167, and 76x76, all in PNG format.

How do I avoid app icon rejection from the App Store?

Ensure your icons are the correct sizes, use PNG format, and adhere to Apple's Human Interface Guidelines. Also, make sure your icons are visually clear and distinct, as poorly designed icons can lead to rejection.

Generate Your App Icon in Seconds

IconBundlr uses AI to create professional icons for every Apple platform.

Try Free →