3.7 — Exporting assets from Figma

Opening scenario

Designer says: “I dropped the new icons in the Figma file, they’re ready.” You open Figma. You see 14 frames, none labeled with an export size, half of them are inside components without export presets, and the icons are at random pixel sizes (23×27, 31×31, 44×48). You ask the designer how to export. They say “just right-click and export, it’s easy.”

Three hours later you have 42 PNGs at the wrong sizes, no PDF/SVG vectors, no organization in Xcode Assets, and three blurry retina assets because the source was already too small.

This chapter is the asset export discipline that separates “ships icons in 10 minutes” from “spends a sprint fighting Figma.”

Concept → Why → How → Code

PDF vector — the default for icons

Use case: any flat illustration or icon that has clean paths (no photo content, no soft gradients with millions of colors).

Why PDF: ships once, scales to any size, supports light/dark via Asset Catalog appearances, smaller than 3 PNG slices, future-proof.

How:

1. In Figma, select the icon
2. Right sidebar → Export section → click +
3. Set format: PDF
4. Scale: 1x (PDF is vector — 1x is correct)
5. Click Export
6. In Xcode: drag the PDF into Asset Catalog
7. Select the asset → Attributes Inspector → Resizing: Preserve Vector Data ✅
8. Set Scales: “Single Scale”
9. Reference: Image("iconName")

Image("settings-gear")        // single PDF, scales perfectly
    .resizable()
    .frame(width: 24, height: 24)

PNG @1x/@2x/@3x — for raster

Use case: photos, screenshots, complex multi-color illustrations that don’t reduce to clean paths.

Why: Apple’s screens are 1x (very old, basically extinct), 2x (most iPhones, iPad), 3x (Pro Max). Provide all three or you ship blurry assets on the wrong device.

How:

1. In Figma, select asset
2. Export panel → format PNG → add three export rows: 1x, 2x, 3x
3. Suffix convention: @2x, @3x — Figma adds these automatically
4. Filenames: hero.png, hero@2x.png, hero@3x.png
5. In Xcode: New Image Set → drop the three files into the 1x/2x/3x slots
6. Reference: Image("hero") (no suffix in code)

SVG → custom SF Symbol

For icons that follow SF Symbols visual style (line weight, stroke, baseline), prefer custom SF Symbols (covered in 3.4). They inherit Dynamic Type, rendering modes, and effects for free.

App icon — its own beast

App icon is a single 1024×1024 PNG. iOS generates all derived sizes (60×60, 76×76, 120×120, etc.) automatically since Xcode 14.

Rules:

• 1024×1024 px, no transparency, no alpha channel — must be a solid square
• sRGB color profile (don’t ship P3 unless you intend to and provide a fallback)
• No rounded corners — iOS rounds for you (rounded squircle, technically)
• No “alpha mask” — solid background pixel-to-pixel

Asset Catalog → New App Icon → drop the 1024 PNG into the iOS slot.

For Liquid Glass / iOS 26 App Icon (introduced WWDC25), you’ll also need a “Tinted” and “Dark” variant — iOS now supports up to three icon styles per app. Add them in the same App Icon Set.

Designer’s export pre-flight checklist

Send your designer this list:

• All icons live in components, not loose frames
• Components have a unique, clear name (icon/settings, not Frame 47)
• Components have export settings configured (PDF 1x by default for icons)
• Filename is the asset’s intended Asset Catalog name (settings-gear)
• Icons sit on a clean pixel grid (use 24×24 or 28×28 standard)
• Color is from the design system (so it adapts to dark mode via Asset Catalog)
• An “exports” page collects everything ready to ship

Following the checklist, exporting becomes one click per icon. Without it, every export becomes a negotiation.

Asset Catalog organization

Treat Asset Catalog like a folder structure. As your asset count grows, use folders (right-click → New Folder) and namespaces:

Assets.xcassets/
  Colors/
    Brand/
      brandPrimary.colorset
      brandAccent.colorset
    Surface/
      surface.colorset
      surfaceElevated.colorset
  Icons/
    Tab/
      home.imageset
      profile.imageset
    Onboarding/
      welcome-hero.imageset
  AppIcons/
    AppIcon.appiconset
    AppIcon-Beta.appiconset

Enable “Provides Namespace” on the folder → reference becomes Image("Icons/Tab/home"). Prevents name collisions.

Generated Asset Symbols (Xcode 15+)

Xcode 15 introduced typed asset symbols — never type a string-name asset key again.

1. Asset Catalog → File Inspector → Asset Symbol Generation: Swift (also available: Objective-C)
2. Build the project
3. Now use:

// Old, string-based, runtime crash if name changes
Image("brandPrimary")
Color("brandPrimary")

// New, compile-time-checked
Image(.brandPrimary)
Color(.brandPrimary)

Rename or delete an asset → compile error at every call site. Use this everywhere — it’s free quality.

Avoiding the dreaded Image not found

The single most common Xcode crash log: Image "blah" not found in bundle. Causes:

1. Asset name typo (fixed by generated symbols)
2. Asset is in a separate target’s bundle (Image("name", bundle: .module) for Swift Packages)
3. Asset is in a different Asset Catalog and target membership is wrong (check File Inspector → Target Membership)
4. App extension can’t see app’s Asset Catalog (extensions have their own bundles — duplicate assets or use shared frameworks)

Exporting from Figma at scale — plugins

For 50+ icons, manual export is misery. Plugins:

• Figma Tokens / Tokens Studio — for colors and spacing, not images
• Iconify — pulls in established icon sets
• Figmaport — batch export with naming
• Figma REST API — write a Node script: fetch all components from a page, export PDFs in bulk, drop into Asset Catalog

For an org with 500+ assets, you build the pipeline once. Designer ships components → CI fetches → assets land in repo → typed Image(.foo) works on next build.

macOS / multi-platform asset gotcha

On macOS, app icons require many more sizes (16, 32, 128, 256, 512 — all at 1x and 2x). Set the App Icon Set to macOS App Icon Set type; Xcode shows all slots. You can also enable “Automatic Generation” (Xcode 14+) to derive macOS sizes from the 1024 PNG, but verify the result — at 16×16, automatic downscale often looks muddy.

In the wild

• Apple’s stock apps are almost entirely SF Symbols + PDF assets — minimum raster footprint.
• Discord, Slack, and other chat apps ship most stickers/emoji as PDF/SVG to save bundle size.
• Robinhood uses Figma Tokens + a custom script to push 1000+ icons to their iOS app on every design release.
• NYTimes open-sourced parts of their asset pipeline (https://github.com/NYTimes/figma-asset-pipeline — naming may differ; search “NYT Figma asset pipeline”).

Common misconceptions

1. “PNG is fine for icons.” It usually isn’t. PDF is one file, smaller, scales, and supports Dark Mode via Asset Catalog appearance. Use PDF unless the content is genuinely photographic.
2. “Export at 1x and Xcode scales.” Xcode does NOT auto-scale PNG. You must ship @2x and @3x for raster. Vector formats (PDF, SVG) scale; raster formats do not.
3. “Asset Catalog is just folders.” It’s a build-time compilation system. Assets get compressed, optimized, and bundled into a single .car file. Adding 1000 assets is fine; loading them at runtime is fast.
4. “App icon needs transparency.” It does not, ever. Solid square only. iOS rounds.
5. “I can store images in Resources/” outside Asset Catalog. You can, but you lose: appearance variants, scale-slot management, asset symbol generation, on-demand resources, and ad-targeting (App Slicing). Always use Asset Catalog.

Seasoned engineer’s take

Asset Catalog generated symbols + PDF-by-default + a Figma component library = a 5x speedup on every “add new icon” task. The first day on a new project, configure these. They pay back instantly.

The argument with designers about “PDF vs PNG” goes one of two ways: either they understand vectors and you agree on PDF, or they don’t and you need to gently explain why exporting a flat illustration as 3 PNG slices is a regression. Show them the file size delta (one PDF can be 4KB; the same illustration as 3 PNGs can be 80KB+). File size is a measurable user-facing metric — app size affects install conversion.

The most underused Asset Catalog feature: On Demand Resources. Tag heavy assets with a tag (level-2-art), download them at runtime only when needed. Cuts app download size for the long tail. Apple’s WWDC sessions on App Thinning are gold.

TIP: Use xcrun assetutil --info Assets.car (run on your built app’s Assets.car) to audit what’s actually shipping. You’ll find dead assets and surprising size waste.

WARNING: Don’t bake brand colors into the asset itself. Export icons as black on transparent; tint at runtime via .foregroundStyle(.brandPrimary). Otherwise you ship 5 copies of the same icon in 5 colors.

Interview corner

Junior-level: “What’s the right way to export an icon from Figma for iOS?”

PDF at 1x scale, dropped into Asset Catalog with “Preserve Vector Data” checked. Reference via generated asset symbol (Image(.iconName)).

Mid-level: “How do you handle assets for an app with light, dark, and high-contrast modes?”

Asset Catalog Color Sets with “Any, Dark, High Contrast” appearance variants. PDF/SVG icons exported as black-on-transparent and tinted at runtime so a single asset works for all three modes. Photos with mode-specific variants get an Image Set with appearance slots.

Senior-level: “You inherit a codebase with 800 unnamed PNG assets and no source Figma. How do you modernize?”

Audit: run xcrun assetutil to enumerate. Cross-reference with grep -r 'Image("' to find dead assets and orphans. Delete unused. For survivors, prioritize migration by usage frequency: top 50 → re-create as SF Symbols or PDF; remainder → keep PNG but generate Asset Symbols + set up a Figma library to re-source future variants. Track app size delta.

Red flag in candidates: Shipping icons as PNGs in Resources/ folder bypassing Asset Catalog. Means they’ve never thought about app size or appearance support.

Lab preview

You’ll export assets from a Figma file in Lab 3.1 — Figma to SwiftUI.

Next: 3.8 — Design handoff & collaboration