Мокап iPhone в Figma: как создать реалистичный макет с нуля

Создание мокапа iPhone в Figma — обязательный навык для современного дизайнера интерфейсов. Такой макет помогает визуализировать приложение в реальном контексте, тестировать компоновку элементов и презентовать идеи заказчику. Но как сделать его максимально реалистичным, чтобы не отличался от фотографии настоящего устройства? В этой статье разберём весь процесс: от выбора модели iPhone до тонкостей работы с тенями и бликами.

Многие новички допускают ошибку, скачивая готовые шаблоны из интернета. Это экономит время, но лишает возможности глубоко понять принципы создания мокапов. Мы покажем, как построить макет с нуля — так вы сможете адаптировать его под любую модель iPhone (от SE до 15 Pro Max) и даже добавлять динамические элементы (например, анимацию разблокировки). А ещё поделимся лайфхаками, как избежать распространённых ошибок при работе с перспективой и освещением.

Для работы вам понадобится:

• 🖥️ Figma (бесплатная версия подойдёт)
• 📏 Точные размеры выбранной модели iPhone (см. таблицу ниже)
• 🎨 Набор кистей для имитации металла/стекла (можно скачать в Figma Community)
• 🔍 Внимание к деталям (динамический остров, камеры, кнопки)

1. Выбор модели iPhone и подготовка артборда

Первый шаг — определиться с целевой моделью. От этого зависят пропорции, расположение динамического острова (Dynamic Island), количество камер и даже радиус скругления углов. Например, iPhone 15 Pro имеет более тонкие рамки, чем iPhone 13, а SE (3-е поколение) — физическую кнопку Home.

Совет: если дизайните под конкретное приложение, проверьте статистику устройств вашей аудитории в App Store Connect или Google Analytics. Возможно, majority пользователей на iPhone 12, и тогда не стоит тратить время на мокап 15 Pro Max.

Создайте новый артборд в Figma с размерами экрана выбранной модели. Вот актуальные данные (в пикселях при плотности @1x):

Важно: Не путайте физические размеры устройства (в мм) с разрешение экрана (в px). Для мокапа нужны именно пиксельные значения, так как Figma работает с виртуальной сеткой.

⚠️ Внимание: Если вы дизайните под iPhone 15 Pro или новее, учтите, что рамки вокруг экрана стали тоньше на 1.55 мм по сравнению с iPhone 14 Pro. Это заметно влияет на восприятие мокапа!

2. Построение корпуса: от рамок до кнопок

Корпус iPhone состоит из нескольких слоёв: передняя панель (стекло), металлические рамки и задняя крышка. Начнём с передней панели:

1. Нарисуйте прямоугольник с размерами экрана (см. таблицу выше).
2. Скруглите углы инструментом Corner Radius (значение берите из таблицы).
3. Добавьте внутри прямоугольник меньшего размера (отступ 2–3 px) для имитации глубины экрана.
4. Залейте верхний слой градиентом от #000000 (верх) до #333333 (низ) с прозрачностью 20% — это имитирует затемнение по краям.

Теперь рамки. Их ширина зависит от модели:

• 📱 iPhone 15 Pro/Pro Max: 1.55 мм (5 px при @1x)
• 📱 iPhone 14/13: 2.2 мм (7 px)
• 📱 iPhone SE: 4.5 мм (14 px)

Для реалистичного металла используйте линейный градиент под углом 45° с цветами:

• 🟢 Зелёный (Titanium): #5E6D55 → #A8B8A0
• ⚪ Серебристый: #E5E5E5 → #C0C0C0
• ⚫ Графитовый: #3A3A3C → #5A5A5C
• 💛 Золото: #D4AF8C → #F4E4C1

Критическая деталь: на iPhone 15 Pro рамки имеют матовую текстуру, а не глянцевую. Добавьте шум (Noise) с интенсивностью 3–5% через эффект Layer Style → Noise.

Динамический остров (Dynamic Island) на Pro-моделях

Вырез под датчики (TrueDepth) на не-Pro моделях

Кнопки регулировки громкости и переключателя режимов

Магнитный коннектор MagSafe (на задней крышке)

Логотип Apple (должен быть под углом 45°)

-->

3. Динамический остров и камеры: детали, которые выдают профессионала

Dynamic Island (динамический остров) появился в iPhone 14 Pro и стал визитной карточкой новых моделей. Его форма — не просто капля, а ассиметричный овальный вырез с радиусом 28 px в верхней части и 22 px в нижней. Вот как его правильно нарисовать:

1. Создайте овальный вырез высотой 36 px и шириной 120 px.
2. Добавьте к нему два маленьких круга диаметром 8 px по бокам (датчики).
3. Разместите группу на расстоянии 8 px от верхнего края экрана.
4. Залейте вырез чёрным (#000000) с размытием 2 px (Blur).

Для модуля камер на задней крышке:

• 📷 iPhone 15 Pro: три объектива (52 mm, 24 mm, 13 mm) + LiDAR-сканер. Расстояние между линзами — 12 px.
• 📷 iPhone 14/13: две линзы (диаметр 20 px и 16 px) с вспышкой между ними.
• 📷 iPhone SE: одна линза диаметром 14 px + вспышка.

Стекло камер должно иметь двойное отражение:

1. Нижний слой — тёмно-серый oval (#2C2C2E) с размытием 3 px.
2. Верхний слой — градиент от прозрачного к белому (#FFFFFF с прозрачностью 30%) под углом 30°.

4. Тени и блики: секреты реалистичности

Даже идеально нарисованный мокап будет выглядеть плоско без правильных теней и бликов. В реальности свет падает на iPhone под углом, создавая:

• 🌑 Падающую тень (от корпуса на поверхность)
• 🔦 Внутреннюю тень (от экрана на рамки)
• ✨ Блики (на стекле и металле)

Формула для теней:

• 📏 Размер размытия = 1/3 от высоты устройства. Например, для iPhone 15 Pro (высота 852 px при @3x) размытие должно быть ~280 px.
• 🎨 Цвет теней: не чистый чёрный, а #000000 с прозрачностью 15–20%.
• 🔄 Угол падения: 120–150° для имитации верхнего света (как при съёмке на столе).

Для бликов на экране:

1. Добавьте белый oval (#FFFFFF) с прозрачностью 30% и размытием 50 px.
2. Расположите его в верхней левой части экрана (источник света обычно сверху-слева).
3. Дублируйте слой и уменьшите размытие до 10 px для второго блика.

⚠️ Внимание: Избегайте симметричных бликов — в реальности они никогда не бывают идеально круглыми. Добавьте немного шума (Noise) или исказите форму инструментом Vector Networks.

Как проверить реалистичность теней?

Посмотрите на мокап с расстояния 2–3 метров или уменьшите масштаб в Figma до 20%. Если тени сливаются с фоном или выглядят как грязные пятна — их нужно сделать мягче (увеличить размытие или уменьшить прозрачность).

5. Анимация и интерактивность: следуюший уровень

Статичный мокап — это хорошо, но анимация делает его живым. В Figma можно симулировать:

• 🔄 Разблокировку по лицу (Face ID)
• 📱 Пролистывание домашнего экрана
• 🎵 Воспроизведение музыки в Control Center
• 📞 Входящий звонок

Пример анимации разблокировки:

1. Создайте два фрейма: Locked (с затемнённым экраном и временем) и Unlocked (с домашним экраном).
2. Добавьте триггер While Hovering или On Click.
3. Настройте Smart Animate для плавного перехода (длительность 0.3 сек).
4. Для реалистичности добавьте между фреймами промежуточный кадр с Dynamic Island, который сужается (имитация сканирования лица).

Для анимации пролистывания:

• 📱 Используйте плагин Figma Auto Animate для автоматического создания переходов.
• 📱 Настройте Easing на Ease In Out для естественного движения.
• 📱 Добавьте паралакс-эффект для иконок (они должны двигаться медленнее фона).

Продвинутый лайфхак: Если нужно показать взаимодействие с приложением (например, свайп в Tinder), используйте Component Properties для создания интерактивных прототипов. Это позволит клиенту "пощупать" ваш дизайн без написания кода.

6. Экспорт и использование мокапа

Когда мокап готов, его нужно правильно экспортировать. Вот оптимальные настройки:

• 🖼️ Формат: PNG (для статичных изображений) или MP4 (для анимаций).
• 📏 Разрешение: @3x (для ретйна-дисплеев) или @2x (для веба).
• 🎨 Цветовой профиль: sRGB (для веба) или P3 (для презентаций на Mac).
• 🗜️ Обрезка: включите Trim transparent pixels, чтобы убрать лишний фон.

Где использовать готовый мокап:

Важно для соцсетей: Если публикуете мокап в Instagram или LinkedIn, добавьте реальный контекст — например, руку, держащую телефон, или фон с кофе и ноутбуком. Это увеличивает вовлечённость на 40% (по данным Canva за 2023 год).

⚠️ Внимание: При экспорте анимации в MP4 проверьте FPS (кадров в секунду). Для плавности выставляйте 30 FPS — это стандарт для iOS-анимаций. Более высокие значения (60 FPS) увеличат размер файла без заметного улучшения качества.

7. Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда допускают ошибки при создании мокапов. Вот топ-5 промахов и как их исправить:

1. Неправильные пропорции Dynamic Island
   

   ❌ Ошибка: рисуют симметричную каплю.
   

   ✅ Исправление: используйте реальные размеры (высота 36 px, ширина 120 px для iPhone 15 Pro).

2. Слишком яркие блики
   

   ❌ Ошибка: белые пятна с прозрачностью 100%.
   

   ✅ Исправление: прозрачность 20–30% + размытие 30–50 px.

3. Игнорирование перспективы
   

   ❌ Ошибка: мокап выглядит плоским, как начерченный в Paint.
   

   ✅ Исправление: добавьте лёгкое искажение (Skew) на 2–3° и тень с размытием.

4. Несоответствие цветов
   

   ❌ Ошибка: золотой iPhone выглядит как оранжевый.
   

   ✅ Исправление: используйте HEX-коды из официальных материалов Apple (см. раздел про рамки).

5. Забытые мелочи
   

   ❌ Ошибка: нет выреза для микрофона или магнитных контактов MagSafe.
   

   ✅ Исправление: проверьте технические спецификации модели на сайте Apple.

Чтобы избежать ошибок, всегда держите под рукой:

• 📄 Официальные гайдлайны Apple (Human Interface Guidelines)
• 📏 Шаблоны в Figma Community (например, от Apple Design Resources)
• 🔍 Фотографии реального устройства под разными углами

Как проверить мокап на реалистичность?

Покажите его человеку, который не занимается дизайном, и спросите: "Это фотография или рисунок?". Если он заколебается с ответом — вы на верном пути.

FAQ: Частые вопросы о мокапах iPhone в Figma

🔹 Можно ли использовать мокап для коммерческих проектов?

Да, но с оговорками. Сами по себе мокапы (как визуализация) не нарушают авторские права Apple. Однако нельзя:

• Использовать логотип Apple в рекламе без разрешения.
• Позиционировать мокап как официальный продукт Apple.
• Продавать шаблоны мокапов с фирменными элементами (например, иконками iOS).

Для безопасного использования замените логотип на нейтральный или добавьте дисклеймер: "Это мокап, не являющийся продуктом Apple Inc."

🔹 Как сделать мокап для iPhone с чехлом?

Алгоритм:

1. Нарисуйте корпус iPhone (как в инструкции выше).
2. Добавьте поверх него ещё один слой — контур чехла (отступ 1–2 мм от краёв).
3. Для силиконового чехла используйте текстуру с шумом (Noise 5%) и матовую заливку.
4. Для кожаного чехла — градиент с тёмными прожилками (используйте кисти из Figma Community).
5. Добавьте вырезы для камер и кнопок.

Популярные чехлы для мокапов: Spigen Ultra Hybrid (прозрачный), Apple Leather Case (кожаный), OtterBox (прорезиненный).

🔹 Почему мой мокап выглядит "дешёвым"?

Причины и решения:

• 🎨 Слишком контрастные тени → Уменьшите прозрачность до 15% и увеличьте размытие.
• 🔦 Блики расположены хаотично → Следуйте правилу "одного источника света" (обычно сверху-слева).
• 📏 Неточные пропорции → Сверьтесь с официальными размерами (см. таблицу в статье).
• 🖼️ Низкое разрешение → Экспортируйте в @3x и сжимайте только для веба.

Ещё один секрет: добавьте легкую грязь на экран (прозрачный слой с шумом и размытием) — это придаст реалистичности.

🔹 Где взять готовые шаблоны мокапов для Figma?

Лучшие источники:

• 🔗 Figma Community (бесплатные шаблоны от сообщества).
• 🔗 Apple Design Resources (официальные шаблоны от Apple).
• 🔗 MockuPhone (платные PSD/Figma шаблоны с реалистичными текстурами).
• 🔗 Dribbble (вдохновение от других дизайнеров).

Остерегайтесь шаблонов с водяными знаками или низким разрешением — они испортят ваш проект.

🔹 Как адаптировать мокап под тёмную тему iOS?

Инструкция:

1. Поменяйте цвет фона экрана на #000000 (не #121212 — в iOS используется чистый чёрный).
2. Уменьшите яркость бликов на 20%.
3. Добавьте голубоватый оттенок на рамки (#0A84FF с прозрачностью 5%) — это имитирует подсветку экрана.
4. Для Dynamic Island используйте серый (#3C3C3C) вместо чёрного.

В тёмной теме важно сохранить контраст между фоном и контентом. Проверьте доступность через инструмент Contrast Checker в Figma.