How to export for ios figma

FigmaHow-ToBeginner · 4 min read

How to Export Designs for iOS from Figma Easily

To export for iOS in Figma, select your design frames or assets, then use the Export panel to choose PNG, JPEG, or PDF formats with @1x, @2x, and @3x scales for iOS screen resolutions. Make sure to set the export suffixes to match iOS naming conventions like @2x and @3x for retina displays.

📐

Syntax

In Figma, exporting for iOS involves selecting layers or frames and configuring export settings in the right panel.

Select: Choose the frame or asset to export.
Export Format: Pick PNG, JPEG, or PDF.
Scale: Set scales to 1x, 2x, and 3x for standard, retina, and super retina iOS screens.
Suffix: Add @1x, @2x, @3x to file names to follow iOS naming rules.
Export Button: Click to save files.

figma

Select frame or asset -> Export panel -> Format: PNG/JPEG/PDF -> Scale: 1x, 2x, 3x -> Filename suffix: @1x, @2x, @3x -> Export

💻

Example

This example shows how to export an iOS app icon from Figma with proper scales and suffixes.

text

1. Select the app icon frame in Figma.
2. In the right panel, click '+' under Export.
3. Choose PNG format.
4. Add three export settings:
   - 1x scale with suffix '@1x'
   - 2x scale with suffix '@2x'
   - 3x scale with suffix '@3x'
5. Click 'Export'.
6. Save the files named like 'AppIcon@1x.png', 'AppIcon@2x.png', 'AppIcon@3x.png'.

Output

Files exported: - AppIcon@1x.png (standard resolution) - AppIcon@2x.png (retina resolution) - AppIcon@3x.png (super retina resolution)

⚠️

Common Pitfalls

Common mistakes when exporting for iOS from Figma include:

Not exporting at multiple scales (@1x, @2x, @3x), which causes blurry images on retina devices.
Forgetting to add the correct suffixes like @2x and @3x, leading to incorrect asset recognition in Xcode.
Exporting in the wrong format; iOS app icons require PNG with transparent backgrounds.
Exporting frames that include extra padding or shadows unintentionally.

text

Wrong way:
Export only 1x scale without suffix.

Right way:
Export 1x, 2x, 3x scales with suffixes '@1x', '@2x', '@3x'.

📊

Quick Reference

Step	Action	Details
1	Select Frame/Asset	Choose the design element to export
2	Open Export Panel	Located in the right sidebar
3	Set Format	Use PNG for iOS app icons and images
4	Add Scales	Add 1x, 2x, 3x for different screen densities
5	Add Suffixes	Use '@1x', '@2x', '@3x' for iOS naming
6	Export Files	Click export and save to your folder

✅

Key Takeaways

Always export iOS assets at 1x, 2x, and 3x scales for proper display on all devices.

Use correct suffixes '@1x', '@2x', and '@3x' in file names to follow iOS conventions.

Choose PNG format for app icons and images requiring transparency.

Check your frames for unwanted padding or effects before exporting.

Use Figma's export panel to manage multiple export settings efficiently.