Как сделать макет iPhone в Figma: от базового каркаса до реалистичного прототипа

Зачем дизайнерам макеты iPhone в Figma?

Создание макетов iPhone в Figma — это не просто тренд, а необходимый навык для любого UI/UX-дизайнера, работающего с мобильными приложениями. Реалистичные макеты помогают клиентам и командам разработчиков визуализировать конечный продукт ещё до написания первой строки кода. Более того, правильно выполненный макет iPhone 15 Pro или iPhone SE может стать частью портфолио, демонстрируя ваше внимание к деталям и понимание принципов Apple Human Interface Guidelines.

В этой статье мы разберём процесс создания макета с нуля: от выбора правильных размеров экрана до настройки динамического острова (Dynamic Island) и адаптивных элементов интерфейса. Вы узнаете, как избежать типичных ошибок (например, неправильных соотношений сторон или неверной толщины рамок), а также где скачать готовые UI-киты от Apple для ускорения работы. Особое внимание уделим настройке теней и бликов для 3D-эффекта — это то, что отличает профессиональный макет от любительского.

Подготовка рабочего пространства в Figma

Прежде чем приступить к созданию макета, настройте Figma для удобной работы. Откройте новый файл и выберите Frame Tool (F) — это основной инструмент для создания каркасов устройств. Для начала определитесь с моделью iPhone: размеры экранов варьируются от iPhone SE (4 дюйма, 320×568 px) до iPhone 15 Pro Max (6.7 дюйма, 430×932 px).

Совет: используйте плагин "Device Frames" (доступен в Community → Plugins), чтобы автоматически создать рамку выбранной модели. Это сэкономит время на ручной прорисовке деталей. Не забудьте установить сетку (View → Grid and Guides → Show Layout Grid) с шагом 8 px — это стандартный отступ для iOS-интерфейсов.

• 📱 Выберите модель: iPhone 13 (390×844 px), iPhone 14 Pro (393×852 px) или iPhone 15 Plus (430×932 px).
• 🎨 Цветовая палитра: используйте официальные цвета Apple — #000000 (чёрный корпус), #F5F5F7 (светлый фон), #86868B (серые элементы).
• 📏 Толщина рамок: для реалистичности установите обводку 24 px для боковых граней и 12 px для верхней/нижней.

Создание базового каркаса устройства

Начните с прорисовки основного прямоугольника — корпуса телефона. Для iPhone 15 Pro создайте фрейм размером 430×932 px (разрешение экрана) и добавьте обводку толщиной 24 px с цветом #000000. Затем внутри этого прямоугольника нарисуйте экран — ещё один прямоугольник размером 390×844 px (для iPhone 15 Pro), центрированный по вертикали и горизонтали.

Ключевые детали, которые часто упускают:

1. Скруглённые углы: установите радиус 40 px для корпуса и 36 px для экрана (это соответствует реальным пропорциям).
2. Динамический остров: для моделей iPhone 14/15 Pro добавьте чёрную капсулу размером 120×32 px в верхней центральной части экрана.
3. Вырез для камеры: нарисуйте круг диаметром 24 px в правом верхнем углу корпуса (для iPhone 13/14/15).

⚠️ Внимание: Не используйте растр для создания скруглений — это увеличивает вес файла. Вместо этого применяйте векторные инструменты Corner Radius в панели Design.

Добавление реалистичных деталей: кнопки, камера, динамик

Чтобы макет выглядел правдоподобно, проработайте мелкие элементы. Начнём с боковых кнопок:

• 🔘 Кнопка питания: прямоугольник 4×20 px с радиусом 2 px, расположенный на правой грани (отступ от верха — 100 px).
• 🔊 Кнопки громкости: два прямоугольника 4×12 px с отступом 8 px между ними (левая грань, отступ от верха — 80 px).
• 📳 Сим-лоток: прямоугольник 2×8 px на левой грани (отступ от верха — 60 px).

Для модуля камеры (актуально для iPhone 12-15):

1. Создайте основной прямоугольник 50×50 px с радиусом 8 px (цвет #1D1D1F).
2. Добавьте три круга диаметром 12 px (для объективов) и один круг 6 px (датчик LiDAR).
3. Расположите модуль в левом верхнем углу корпуса (отступ от краёв — 12 px).

Настройка теней и бликов для 3D-эффекта

Реалистичность макета на 80% зависит от правильных теней и бликов. В Figma это настраивается через панель Effects (значок "FX" в правой части экрана). Для корпуса iPhone добавьте следующие эффекты:

• 🌑 Внешняя тень: X: 0, Y: 4, Blur: 12, Spread: 0, цвет #000000 с прозрачностью 30%.
• ☀️ Внутренний блик: X: 0, Y: -2, Blur: 8, Spread: 0, цвет #FFFFFF с прозрачностью 20%.
• 🔲 Тень экрана: X: 0, Y: 1, Blur: 2, Spread: 0, цвет #000000 с прозрачностью 15%.

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

1. Динамический остров: Y: 1, Blur: 3, Spread: 0, прозрачность 25%.
2. Модуль камеры: Y: 2, Blur: 6, Spread: 1, прозрачность 40% (цвет #1D1D1F).

⚠️ Внимание: Избегайте чрезмерного использования размытия (blur > 20) — это сделает макет "грязным". Для светлых тем интерфейса уменьшайте прозрачность теней до 10-15%.

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

Откройте фотографию реального iPhone в Figma (перетащите изображение на холст) и сравните тени. Если ваш макет выглядит "плоским" по сравнению с фото — увеличьте контрастность теней или добавьте второй слой с меньшим размытием.

Адаптация макета под разные модели iPhone

Один и тот же макет должен корректно отображаться на всех моделях iPhone, от SE до 15 Pro Max. Для этого используйте Auto Layout и Constraints в Figma. Основные правила адаптации:

• 📱 Разрешение экрана: создайте отдельные фреймы для каждой модели с корректными размерами (см. таблицу ниже).
• 🔄 Динамический остров: для моделей без выреза (например, iPhone SE) просто скрывайте этот элемент.
• 🎨 Цветовые схемы: для iPhone 15 добавьте опцию "Always On Display" (приглушённый интерфейс с низкой яркостью).

Для ускорения адаптации используйте компоненты (Components) в Figma. Например, создайте компонент "Динамический остров" и переиспользуйте его во всех макетах, меняя только видимость. Это позволит обновлять дизайн централизованно.

Дополнительные фишки: анимации и интерактивность

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

• 🔄 Свайп между экранами: используйте Smart Animate для плавного перехода (настройка: Ease In Out, длительность 300 ms).
• 📱 Нажатие на кнопки: добавьте эффект Scale (масштаб 0.95) при клике.
• 🎥 Анимация Dynamic Island: растягивание капсулы при воспроизведении музыки или таймера.

Пример настройки анимации для кнопки:

1. Выделите кнопку и нажмите + в панели Prototype.
2. Выберите действие While Tap → Scale.
3. Установите значение 0.95 и длительность 200 ms.

Для сложных анимаций (например, переходы между табами) используйте плагин "Anima" или "ProtoPie Connect". Они позволяют создавать микроинтеракции, которые невозможно реализовать стандартными средствами Figma.

Где скачать готовые шаблоны и UI-киты

Если вам нужно быстро создать макет, воспользуйтесь готовыми ресурсами:

• 🍎 Официальный UI-кит от Apple: скачать здесь (включает иконки, шрифты SF Pro и шаблоны экранов).
• 🎨 Figma Community: поиск по запросу "iPhone 15 Pro Mockup" — там сотни бесплатных шаблонов с реалистичными рамками.
• 🛠️ Plugins: Device Frames, Mockup Generator, iOS GUI Kit.

При выборе шаблона обращайте внимание на:

1. Актуальность: некоторые шаблоны не обновлялись с 2020 года и содержат устаревшие элементы (например, кнопку Home для iPhone X).
2. Лицензию: проверьте, разрешено ли использование в коммерческих проектах.
3. Кастомизацию: хороший шаблон позволяет легко менять цвета, размеры и добавлять свои элементы.

FAQ: Частые вопросы о создании макетов iPhone в Figma

🔍 Как сделать макет iPhone с прозрачным фоном для презентации?

Удалите фоновый прямоугольник корпуса, оставьте только обводку и внутренние элементы. Затем экспортируйте фрейм в формате PNG с включённой опцией Transparent Background.

📏 Почему мой макет iPhone 15 Pro выглядит "криво" на реальном устройстве?

Скорее всего, вы использовали неверные размеры экрана. Для iPhone 15 Pro корректное разрешение — 393×852 px (а не 390×844 px, как у iPhone 13). Также проверьте настройки Constraints — элементы должны быть привязаны к краям экрана, а не к центру.

🎨 Как добавить эффект "глянцевого" экрана?

Создайте поверх экрана полупрозрачный белый прямоугольник (#FFFFFF, прозрачность 5%) и примените к нему эффект Blur с радиусом 8 px. Затем добавьте ещё один слой с градиентом от прозрачного к белому (Linear Gradient, угол 45°).

🔄 Можно ли автоматически адаптировать макет под все модели iPhone?

Да, с помощью Auto Layout и Variants в Figma. Создайте основной компонент с гибкими ограничениями (Constraints), затем дублируйте его для каждой модели, меняя только размер фрейма. Плагин Responsive также поможет автоматизировать этот процесс.

📱 Где найти точные PSD-шаблоны для Photoshop, если Figma не подходит?

На сайтах Freepik или Dribbble ищите по запросам "iPhone 15 PSD Mockup" или "Apple Device Template". Обращайте внимание на отзывы и рейтинг файла — многие шаблоны содержат ошибки в пропорциях.