You’ve seen it: an icon looks perfect in Figma but turns blurry on an iPhone 15 Pro. Usually the culprit is incorrect export without accounting for screen densities. Sometimes this leads to App Store rejection under Apple Review Guidelines (Section 4.2: Design Minimum) which demands pixel-perfect elements. We fix such bugs daily and know how to avoid them. Based on 5+ years of iOS development experience, here’s a battle-tested recipe. Subpixel rendering and interpolation artifacts are common when scaling raster assets; our method eliminates them completely.
How iOS Densities Work
iOS operates in logical points (pt), not pixels (px). The iPhone SE (3rd gen) uses @2x (1 pt = 2 px), modern Pro models use @3x (1 pt = 3 px). For a 24×24 pt icon you need three files: icon.png 24×24 px (@1x, for simulator), [email protected] 48×48 px, [email protected] 72×72 px. Always verify that the Asset Catalog slot is correct – otherwise Xcode picks the wrong scale.
Why Not Just @2x?
The system can scale, but quality suffers: artifacts appear, anti-aliasing breaks thin lines. This is especially critical for icons with sharp corners or gradients. The difference is obvious on Retina displays. Moreover, Apple Review Guidelines (Section 5.1.2) may reject the app due to pixelated graphics. Optimized PNGs are up to 50% smaller than unoptimized ones, and PDF icons render 3x sharper at large sizes.
How to Export Properly from Figma
In Figma, set up three Export presets: 1x (empty suffix), 2x (suffix @2x), 3x (suffix @3x). Export all at once – this eliminates human error. Then in Xcode Asset Catalog, drop the files into the 1x, 2x, 3x slots. Xcode picks the right one for the device automatically.
| Size (pt) | @1x (px) | @2x (px) | @3x (px) |
|---|---|---|---|
| 16×16 | 16×16 | 32×32 | 48×48 |
| 24×24 | 24×24 | 48×48 | 72×72 |
| 48×48 | 48×48 | 96×96 | 144×144 |
Step-by-Step Asset Preparation
- Prepare sources in Figma: ensure each element is on its own frame and exported without fill.
- Create three export presets with suffixes: no suffix,
@2x,@3x. - Export all assets with one command – Figma generates PNGs for all densities.
- Open
Assets.xcassetsin Xcode, drag files into corresponding slots or use an automation script. - Run pngcrush on all PNGs – this removes extra metadata and reduces weight by 30–50%.
Vector or Raster: What to Choose?
For simple icons, use PDF in Asset Catalog with Preserve Vector Data flag – Xcode renders them as vectors, no rasterization needed. But complex multi-color illustrations with gradients are better as PNG: PDF sometimes renders gradients with banding. SVG is not natively supported (only macOS 11+), convert to PDF via Sketch.
| Format | Sharpness | Weight | Use Case |
|---|---|---|---|
| PNG | High | High | Photos, complex gradients |
| PDF (vector) | Perfect | Low | Icons, logos, simple shapes |
| SVG | Vector only | Medium | Not supported on iOS < 11, convert to PDF |
PNG Optimization Without Quality Loss
After export, run all PNGs through pngcrush -reduce -m 0 or optipng -o7. These tools remove extra metadata (color profiles, gamma) and improve compression. Typical gain – 30–50% weight. For large projects, this saves tens of megabytes. Additionally, you can configure a build phase in Xcode to auto-compress PNGs during compilation. Lossless optimization ensures zero quality degradation.
Common Asset Prep Mistakes
- Exported all three scales? @1x is often forgotten, yet needed for simulator.
- File names follow the pattern?
[email protected],[email protected](case matters). - Asset Catalog slot correct? Don’t confuse
1xand@2x. - For PDF, is
Preserve Vector Dataenabled? Otherwise Xcode rasterizes at build time. - PNGs compressed?
pngcrushis mandatory before submission. - Check all assets against Apple Human Interface Guidelines – reference sizes and margins.
Detailed checklist for asset preparation
- Verify all three density variants exist for each asset. - Confirm naming convention matches expected suffixes. - Test build on simulator and real device to catch missing assets. - Use Asset Catalog compiler to validate no duplicate entries. - Audit image compression ratio – aim for < 50% of original size.What’s Included in Our Service
- Export and resampling of all assets to @1x/@2x/@3x.
- Optimization via pngcrush with iOS-specific settings.
- Structuring
Assets.xcassetswith correct names and slots. - Audit of existing assets: find blurry, redundant, suboptimal ones.
- Recommendations on format (PDF vs PNG) for each icon type.
- Delivery includes Xcode Asset Catalog file, compressed PNG set, and written documentation.
- Free training session on asset maintenance.
- 30 days post-delivery support.
Timeline and Cost
Standard volume (20–50 elements) – from 4 hours to 1 day. Large projects with illustrations – up to 2 days. Price: from $150 for basic sets, $300 for standard, $500+ for complex. Fixing post-release bugs can save up to 60% of QA time. Order asset preparation – we’ll assess the scope within 4 hours. Get a consultation on Asset Catalog optimization. Our experience: 5+ years of iOS development, over 30 commercial projects. We guarantee no artifacts and pixel-perfect accuracy. We use only certified tools and Apple Human Interface Guidelines.
Contact us for a free estimate – we respond within 1 hour. Turnkey solution: we handle everything from Figma export to Xcode integration. Icons, buttons, backgrounds – all densities ready in 1 day. No hidden fees, full source files included.