Graphic Assets for Different Screen Densities (@1x, @2x, @3x)
Incorrectly exported assets are a common cause of blurry icons and excess app weight. PNG at 300dpi exported without considering iOS logical points looks sharp in Figma but blurs on device.
How iOS Density System Works
iOS operates with logical points (pt), not physical pixels (px). iPhone SE displays @2x (1pt = 2px), most modern iPhones — @3x (1pt = 3px). For a 24×24pt icon, you need three files: icon.png 24×24px (@1x, for simulator), [email protected] 48×48px, [email protected] 72×72px.
Mistake: export only @2x and expect the system to scale. Scaling exists, but quality suffers — especially noticeable on icons with thin lines and sharp corners.
Correct Export from Figma
In Figma set three Export presets for each asset: 1x (empty suffix), 2x (suffix @2x), 3x (suffix @3x). Export as PNG without retouching. Then via Xcode Asset Catalog place files in 1x, 2x, 3x slots — Xcode chooses the right one for the device.
For simple vector icons use PDF in Asset Catalog with Preserve Vector Data — then Xcode renders the icon as vector, no rasterization. But complex multi-color illustrations are better as PNG: PDF with gradients sometimes renders differently than expected.
SVG natively in Xcode Asset Catalog is not supported for iOS (only macOS 11+). Convert via Sketch or third-party tools to PDF or directly to PNG set.
What's Included
- Preparation and export of all project graphic assets in @1x/@2x/@3x
- PNG optimization via
pngcrushoroptipngto reduce weight without quality loss - Forming
Assets.xcassetsstructure with correct names and slots - Recommendations on PDF vs PNG choice for specific asset types
Timeline
Preparation of full asset set for project (20–50 elements): 4 hours–1 day. With large volume or need for manual illustration refinement — up to 2 days. Cost is calculated individually.







