Знакомая ситуация: иконка выглядит идеально в Figma, но на iPhone 15 Pro — размытая. Чаще всего виноват неправильный экспорт без учёта плотностей экрана. Иногда это приводит к отклонению приложений — Apple Review Guidelines (Section 4.2: Design Minimum) требуют чёткости всех элементов. Мы ежедневно исправляем такие баги и знаем, как их избежать. На основе 5+ лет опыта разработки 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. Наш опыт — 5+ лет разработки iOS-приложений, более 30 коммерческих проектов. Гарантируем отсутствие артефактов и точное попадание в пиксель. Используем только сертифицированные инструменты и методики Apple Human Interface Guidelines.