Знайома ситуація: іконка виглядає ідеально в Figma, але на iPhone 15 Pro — розмита. Найчастіше винний неправильний експорт без урахування щільностей екрана. Іноді це призводить до відхилення додатків — Apple Review Guidelines (Section 4.2: Design Minimum) вимагають чіткості всіх елементів. Ми щодня виправляємо такі баги та знаємо, як їх уникнути. На основі багаторічного досвіду розробки iOS-додатків пропонуємо готовий рецепт.
Як влаштовані щільності на iOS?
iOS оперує логічними точками (pt), а не пікселями (px). iPhone SE (3-го покоління) використовує @2x (1 pt = 2 px), сучасні Pro-моделі — @3x (1 pt = 3 px). Якщо іконка 24×24 pt, потрібні три файли: icon.png 24×24 px (@1x, для симулятора), [email protected] 48×48 px, [email protected] 72×72 px. Завжди перевіряйте, що в Asset Catalog виставлений коректний слот — інакше Xcode підставить неправильний масштаб.
Чому не можна обійтися тільки @2x?
Система вміє масштабувати, але якість страждає: з'являються артефакти, згладжування ламає тонкі лінії. Особливо критично для іконок з гострими кутами та градієнтів. Різниця помітна на пристроях з Retina-дисплеями. Крім того, Apple Review Guidelines (Section 5.1.2) може відхилити додаток через піксельну графіку.
Як правильно експортувати з Figma?
У Figma задайте три Export-пресети: 1x (суфікс порожній), 2x (суфікс @2x), 3x (суфікс @3x). Експортуйте одразу всі — це виключає людський фактор. Потім у Xcode Asset Catalog розкладіть файли по слотам 1x, 2x, 3x. Xcode сам вибере потрібний під пристрій.
| Розмір (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 |
Покрокова інструкція підготовки ассетів
- Підготуйте вихідники в Figma: переконайтеся, що кожен елемент знаходиться на окремому фреймі та експортується без заливки.
- Створіть три пресети експорту з суфіксами: без суфікса,
@2x,@3x. - Експортуйте всі ассети однією командою — Figma згенерує PNG для всіх щільностей.
- Відкрийте
Assets.xcassetsу Xcode, перетягніть файли у відповідні слоти або використовуйте скрипт автоматизації. - Запустіть pngcrush на всіх PNG — це видалить зайві метадані та зменшить вагу на 30–50%.
Вектор чи растр: що обрати?
Для простих іконок використовуйте PDF в Asset Catalog з прапорцем Preserve Vector Data — Xcode рендерить їх як вектор, растеризація не потрібна. Але складні багатокольорові ілюстрації з градієнтами краще експортувати PNG: PDF іноді рендерить градієнти зі смугами. SVG нативно не підтримується (тільки macOS 11+), конвертуйте в PDF через Sketch.
| Формат | Чіткість | Вага | Де застосовувати |
|---|---|---|---|
| PNG | Висока | Високий | Фотографії, складні градієнти |
| PDF (вектор) | Бездоганна | Низький | Іконки, логотипи, прості форми |
| SVG | Тільки вектор | Середній | Не підтримується на iOS < 11, конвертувати в PDF |
Оптимізація PNG без втрати якості
Після експорту проганяйте всі PNG через pngcrush -reduce -m 0 або optipng -o7. Ці утиліти видаляють зайві метадані (кольорові профілі, гаму) та покращують стиснення. Типовий виграш — 30–50% ваги. Для великих проектів це економія десятків мегабайт. Додатково можна налаштувати build phase у Xcode: додати скрипт, який автоматично стискає PNG при збірці.
Типові помилки при підготовці ассетів
- Експортовані всі три масштаби? @1x часто забувають, хоча він потрібний для симулятора.
- Імена файлів відповідають шаблону?
[email protected],[email protected](регістр важливий). - У Asset Catalog встановлено правильний слот? Не переплутайте
1xта@2x. - Для PDF включено
Preserve Vector Data? Інакше Xcode растеризує при збірці. - PNG стиснуті?
pngcrushобов'язковий перед завантаженням. - Перевірте, що всі ассети відповідають Apple Human Interface Guidelines — референсні розміри та відступи.
Що входить у нашу роботу?
- Експорт та ресемплінг всіх ассетів у @1x/@2x/@3x.
- Оптимізація через pngcrush з налаштуваннями під iOS.
- Формування структури
Assets.xcassetsз коректними іменами та слотами. - Аудит існуючих ассетів: пошук розмитих, надлишкових, неоптимальних.
- Рекомендації щодо вибору формату (PDF vs PNG) під кожен тип іконки.
Терміни та вартість
Стандартний обсяг (20–50 елементів) — від 4 годин до 1 дня. Великі проекти з ілюстраціями — до 2 днів. Ціна розраховується індивідуально за кількістю та складністю ассетів. Економія на виправленні багів після релізу може становити до 60% часу QA. Замовте підготовку ассетів — ми оцінимо обсяг за 4 години. Отримайте консультацію з оптимізації Asset Catalog. Наш досвід — багаторічна розробка iOS-додатків, понад 30 комерційних проектів. Гарантуємо відсутність артефактів та точне попадання в піксель. Використовуємо лише сертифіковані інструменти та методики Apple Human Interface Guidelines.