Topics Covered in This Sketch Tutorial:
Exporting As 1x, 2x, & 3x PNG, Exporting As 1x PDF
Exercise Preview
What You'll Learn
PNG Export Mastery
Learn to export graphics at 1x, 2x, and 3x resolutions for different Apple device displays. This covers the most common approach developers use.
PDF Vector Export
Master PDF export for vector-based assets that Xcode can automatically scale. Perfect for maintaining crisp graphics across all resolutions.
Exercise Overview
In this comprehensive exercise, you'll master the essential skill of exporting graphics optimized for iOS applications. Understanding proper asset preparation is crucial for any designer working in mobile app development, as it directly impacts both app performance and visual quality across Apple's diverse device ecosystem.
Always consult with your app developer about their preferred asset format before starting your export process. Some prefer PNG files while others work better with PDF vectors.
Exporting for iOS: PNG vs PDF Formats
Modern iOS development offers two primary approaches for delivering graphics to your development team, each with distinct advantages:
- PNG files at 1x, 2x, and 3x sizes — This method accounts for the varying pixel densities across Apple's device lineup, from standard displays to Retina and Super Retina screens. This remains the most widely adopted approach in 2026, particularly for complex graphics with photographic elements or intricate details.
- PDF at 1x size — Vector-based PDFs leverage Xcode's automatic scaling capabilities, allowing the development environment to generate 1x, 2x, and 3x variants dynamically. This approach is increasingly popular for icon-based designs and offers significant workflow advantages for maintaining design consistency.
We'll demonstrate both methods in this tutorial, though you should always consult with your development team to understand their preferred workflow and any specific project requirements. The choice often depends on factors like app complexity, team size, and deployment strategy.
Professional Tip: PDF export serves double duty beyond iOS development. It provides an excellent bridge for transferring vector artwork to Adobe Illustrator or other design tools. While copy-paste workflows exist between applications, having clean PDF files ensures better version control and asset management across your design system.
Now let's dive into the practical implementation of both export methods.
- Launch Sketch and navigate to File > Open Local Document.
Navigate to Desktop > Class Files > Sketch Class > iPhone app design and double-click iPhone app mockup.sketch to open the project file.
If you encounter a missing fonts notification, don't be concerned — font availability won't impact our graphics export process.
Industry Standard: When developing iOS applications, Apple's San Francisco font family should be your default choice. As Apple's official system font, it ensures optimal readability and maintains design consistency with iOS interface conventions. Download it free from developer.apple.com/fonts to keep your mockups accurate to the final product.
This application design represents an early-stage prototype, but the development team is ready to begin implementation and requires the navigation icons immediately. We'll begin by demonstrating PDF export methodology.
Design Context: This project leverages Sketch's sophisticated iOS UI Design symbol library, which includes intelligently constructed components that support dynamic icon swapping, state management, and rapid prototyping workflows — essential tools for modern app design.
- Locate the tab bar at the bottom of the iPhone 8 artboard, which contains five navigation icons. This component was built using Sketch's symbol system. Double-click the tab bar to enter symbol editing mode.
- You're now viewing the Bars/Tab Bar/5 Items symbol on the Symbols page. This master component contains both iconography and text labels, but for development purposes, we only need to export the icon assets.
Scroll down to reveal the dual rows of navigation icons — five in blue (active state) and five in gray (inactive state), as illustrated below:
Our goal is to select the five gray icons without inadvertently selecting their parent artboards. This requires precise selection technique: start your drag below the artboard header to avoid encompassing the entire artboard boundary. Since each icon is properly grouped, any selection contact will capture the complete element. Execute a careful selection drag across all gray icons as demonstrated:
- Examine the Sidebar to confirm our naming convention (something-icon format) — this systematic approach ensures your exported assets are immediately recognizable and properly organized for development handoff.
- In the Inspector panel, click Make Exportable to activate export options for your selection.
Click the Apply a slice preset button
located to the right of the Presets label:
- Select iOS from the preset menu that appears.
Sketch has now configured the standard iOS export settings, generating 1x, 2x, and 3x PNG variants as shown:
At this point, you could proceed with PNG export and have production-ready assets. However, let's explore the PDF alternative that many development teams prefer for its scalability advantages.
- To add PDF export capability, click the plus button at the far right of the Presets section in the Inspector's Export panel.
Configure the new export option with these specifications:
- Format: PDF
- Size: 1x
- Prefix/Suffix: Remove any default text to ensure clean filenames
- Click Export Selected in the bottom-right corner of the Inspector panel.
- In the export dialog, verify that Save for web is enabled — you may need to expand the Options section to access this setting. This optimization ensures your assets are properly compressed for digital delivery.
- Navigate to Class Files > Sketch Class > iPhone app design > assets-for-developer for organized file management.
Click Export to generate your asset package.
Your professionally prepared assets are now ready for development team delivery, complete with both format options for maximum flexibility.
To verify your export results, navigate on your Desktop to Class Files > Sketch Class > iPhone app design > assets-for-developer. You'll find each icon exported in both PDF format and the complete PNG resolution set (1x, 2x, 3x), providing your development team with comprehensive asset coverage.
Inactive & Active States
By delivering gray (inactive) icons, you enable developers to implement dynamic state management through programmatic color modification. The app can highlight the active tab by applying color transforms to the base gray assets. This approach works exceptionally well for line-based iconography like our examples. However, when your design calls for more dramatic active state changes — such as converting strokes to fills, adding drop shadows, or incorporating additional visual elements — you'll need to export both inactive and active versions for each icon. Always discuss state requirements with your development team during the design planning phase to ensure proper asset preparation.
For line-based icons, you only need to provide gray inactive versions. Developers can programmatically change colors for active states, reducing your export workload.
Single vs Double State Export
Export Quality Checklist
This ensures developers can easily identify and implement each asset
Start selection drag below artboard top to avoid unwanted elements
Validate PNG sizes and PDF format specifications before final export
This optimizes files for digital use and reduces unnecessary file size
Create structured folders that developers can easily navigate and use