Коротко
Дизайн мобильного приложения в Morfa начинается с фрейма устройства: при выборе инструмента «Фрейм» (F) справа показаны шесть размеров группы «Телефон»: четыре iPhone, от iPhone SE (375×667) до iPhone 16 Pro Max (440×956), и два Android, например Android Compact (412×917).
Шаблон «Мобильное приложение» — готовое приложение на iPhone 16: экраны, компоненты, тёмная тема на режимах переменных и кликабельный прототип, который открывается в плеере в рамке iPhone или Android.
В режиме «Код» разработчик видит размеры и токены и скачивает картинки в тех масштабах, которые задал дизайнер, например 2× и 3× для iOS. Кода для Swift и Kotlin нет.
С чего начать: шаблон «Мобильное приложение»
В файловом менеджере нажмите «Начать с шаблона» и выберите «Мобильное приложение». Внутри — приложение для чтения статей на iPhone 16 (393×852), собранное как настоящий проект. На странице «Экраны» лежат «Вход», «Лента», «Профиль» и «Лента — тёмная тема», на странице «Компоненты» — иконки, кнопки, чипы, поля ввода, карточка статьи, нижняя навигация и статус-бар.
Все блоки собраны на автолейауте, цвета — переменные коллекции «Тема». Прототип уже связан: ▶ запускает сценарий «Вход в приложение», кнопка «Войти» открывает ленту, нижняя навигация и аватар ведут в профиль, а строка «Тёмная тема» в профиле — на тёмную ленту. Остальные шаблоны описаны на странице шаблоны.
Размеры экранов iPhone и Android
Новый экран — это фрейм нужного устройства. Выберите «Фрейм» (F): справа появится список размеров, и в группе «Телефон» их шесть. Таблицы со всеми 27 размерами и советами по выбору — в гайде по размерам экранов.
| Размер | Ширина × высота | Для чего удобен |
|---|---|---|
| iPhone 16 | 393×852 | Основной экран макета под iOS, на нём собран шаблон |
| iPhone 16 Pro | 402×874 | Экран чуть крупнее iPhone 16 |
| iPhone 16 Pro Max | 440×956 | Самый крупный телефон в списке |
| iPhone SE | 375×667 | Проверка, что всё помещается на маленьком экране |
| Android Compact | 412×917 | Основной экран макета под Android |
| Android Medium | 700×840 | Средний размер окна Android |
Как собрать экран, который легко менять
Одна и та же кнопка, навигация и статус-бар повторяются на десятках экранов. Чтобы правка в одном месте доходила до всех, собирайте экраны так же, как собран шаблон.
Экран, который тянется
Сделайте экран вертикальным автолейаутом (⇧A), а блокам внутри дайте ширину «Заполнить». Тогда смена ширины в поле W во вкладке «Дизайн» перестроит экран без ручных правок.
Повторяющиеся элементы
Кнопку, поле, нижнюю навигацию и статус-бар сделайте компонентами (⌥⌘K), а состояния вроде «Нажата» и «Отключена» — вариантами. Подробнее — на странице компоненты и варианты.
Шрифт интерфейса
В каталоге 87 семейств с кириллицей; для интерфейса подойдут Inter, Golos Text, Onest или Manrope. Шаблон набран на Inter. SF Pro из макета Figma при переносе тоже становится Inter.
Тёмная тема без копий экранов
В шаблоне экран «Лента — тёмная тема» состоит из тех же экземпляров, что и светлая лента. Отличается только режим: у фрейма во вкладке «Дизайн» в разделе «Переменные» для коллекции «Тема» выбран «Тёмная», а не «Светлая». Цвета привязаны к переменным коллекции «Тема», поэтому экран перекрашивается целиком.
Для своего приложения сделайте так же: заведите коллекцию с режимами «Светлая» и «Тёмная», привяжите к переменным фоны, тексты и акценты, а режим выбирайте на фрейме: «Авто» берёт режим родителя. Пошагово — в гайде про тёмную тему.
Мобильный прототип: переходы, шторки и прокрутка
Связи между экранами задаются во вкладке «Прототип». Тап — это триггер «При нажатии», долгое нажатие — «При удержании», свайп — «При перетаскивании», заставка, которая сама сменяется, — «Через задержку». Для перехода вглубь подойдут «Толкание» или «Сдвиг внутрь» с направлением «Влево», а действие «Назад» проигрывает тот же переход в обратную сторону.
Чтобы прототип показывался в рамке телефона, снимите выделение: во вкладке «Прототип» появится раздел «Устройство». Выберите iPhone 16, iPhone 16 Pro Max или Android, а кнопкой рядом поверните экран. Рамка нужна только плееру и в экспорт не попадает. Остальные возможности собраны на странице прототипирование.
| Что нужно | Что выбрать | Где |
|---|---|---|
| Лента длиннее экрана | Ничего: высокий фрейм верхнего уровня прокручивается в плеере сам | — |
| Карусель карточек | «По горизонтали» у фрейма, из которого выходят карточки | Раздел «Прокрутка» |
| Нижняя навигация или кнопка поверх ленты | «Зафиксирован»: слой остаётся на месте | Раздел «При прокрутке» |
| Шапка раздела или строка фильтров | «Липкий»: слой прокручивается, пока не упрётся в край | Раздел «При прокрутке» |
| Шторка снизу | «Открыть оверлей» и «Положение оверлея» — «Снизу по центру» | Взаимодействие и раздел «Как оверлей» |
| Вернуться в ленту на то же место | «Перейти к» с флажком «Сохранить прокрутку» | Взаимодействие |
Что получит разработчик iOS или Android
Разработчику достаточно бесплатной роли «Разработчик» в команде: он открывает режим «Код» (⇧D), видит размеры и отступы при наведении и скачивает картинки. Масштабы картинок задаёт дизайнер в разделе «Экспорт» вкладки «Дизайн», а разработчик забирает готовые файлы в разделе «Экспорт» режима «Код». Подробнее о роли — на странице для разработчиков.
| Что нужно | Где в Morfa | Что получает разработчик |
|---|---|---|
| Размеры и отступы | Режим «Код», наведение на слой | Расстояния между слоями и подсветку отступов автолейаута в px или rem |
| Цвета и шрифты | Разделы «Стили и переменные» и «Типографика» | Значения в HEX, RGB или HSL и предложенные токены |
| Картинки для iOS | Раздел «Экспорт»: PNG в 2× и 3× | Файлы с суффиксами вида «@2x» |
| Картинки для Android | Раздел «Экспорт»: PNG в 1×, 1,5×, 2×, 3× и 4× | Файлы под разные плотности экрана; по папкам их раскладывают сами |
| Иконки | Раздел «Ассеты» режима «Код» | SVG и PNG в 2× |
«Экспорт в React…» выгружает веб-проект на Vite, React 19 и TypeScript. Для нативного приложения он годится как справка по разметке и токенам, но не как готовый код экранов.
Чего пока нет
- Приложения Morfa для iPhone и Android, в том числе для просмотра прототипа на телефоне: работа на телефоне не заявлена.
- Кода для Swift, Kotlin, Flutter и React Native: вкладка «Код» даёт CSS, React для веба и токены.
- Экспорта анимаций в Lottie, GIF и MP4.
- Переменных и условий в прототипе, видео-триггеров.
Сколько стоит дизайн приложения
Инструменты, прототипы, экспорт и вкладка «Код» одинаковы на обоих планах. На плане «Бесплатный» — 10 файлов и 1 ГБ под картинки без ограничения по сроку: экраны одного приложения удобно держать на страницах одного файла. План «Профессиональный» стоит 990 ₽ в месяц или 790 ₽ в месяц при оплате за год, снимает лимит файлов и даёт 20 ГБ под картинки. Если оплата для вашего аккаунта ещё не открыта, в карточке плана так и написано. Все цены — на главной.