Коротко
Чтобы сделать кликабельный прототип в Morfa, откройте вкладку «Прототип», выделите кнопку и перетащите «+» на экран, куда она ведёт: получится связь «При нажатии» → «Перейти к». В окне «Взаимодействие» выбирают один из 10 триггеров, 8 действий и 8 переходов с кривыми и пружинами.
Плеер запускается кнопкой ▶ или клавишами ⌥⌘↵, показывает экраны в рамке телефона, планшета или ноутбука и сразу подхватывает правки. Публичной ссылки нет: прототип открывают те, у кого есть доступ к файлу, после входа в аккаунт.
Как сделать кликабельный прототип: пошагово
Прототип собирают из экранов — фреймов, которые стоят прямо на странице. Порядок всегда один: экраны, связи между ними, проверка в плеере.
Соберите экраны
Нарисуйте фрейм на каждый экран, например готового размера iPhone 16 (393×852). Можно начать с шаблона «Мобильное приложение»: он уже кликабельный.
Откройте вкладку «Прототип»
Она справа, рядом с «Дизайн» и «Код». Пока вкладка открыта, связи видны на холсте синими стрелками.
Протяните связь
Выделите кнопку и перетащите появившийся «+» на экран, куда она ведёт. Получится взаимодействие «При нажатии» → «Перейти к», и откроется окно «Взаимодействие».
Выберите анимацию
В группе «Анимация» поставьте, например, «Умная анимация», а рядом выберите кривую и длительность в миллисекундах.
Отметьте начало сценария
Выделите первый экран и нажмите «+» в разделе «Начало сценария». Название сценария меняют двойным щелчком.
Выберите устройство
Снимите выделение и в разделе «Устройство» выберите рамку, например iPhone 16.
Запустите плеер
Нажмите ▶ или ⌥⌘↵: прототип откроется в новой вкладке браузера.
Взаимодействие можно добавить и без перетаскивания: кнопка «+» в разделе «Взаимодействия» создаёт пустое, а экран назначения выбирают в списке.
Триггеры: что запускает взаимодействие
Триггер — то, что человек делает в плеере: нажимает, наводит курсор, тянет слой, жмёт клавишу или просто ждёт. Всего их десять.
| Триггер | Когда срабатывает |
|---|---|
| «При нажатии» | Щелчок по слою: кнопки, ссылки, карточки |
| «При наведении» | Пока курсор над слоем: подсказки, меню |
| «При удержании» | Пока кнопка мыши нажата |
| «При перетаскивании» | Когда слой тянут: карусели, свайпы |
| «Курсор наведён» и «Курсор ушёл» | Один раз: когда курсор попадает на слой или уходит с него |
| «Нажатие кнопки мыши» и «Отпускание кнопки мыши» | Сразу при нажатии или в момент, когда кнопку отпустили |
| «Через задержку» | Через заданное число миллисекунд после показа экрана: заставка, автоматический переход |
| «При нажатии клавиши» | Клавиша, которую назначают нажатием: стрелки для слайдов, Esc для закрытия окна |
Действия: что происходит после триггера
Действие отвечает на триггер. В одном взаимодействии их может быть несколько: кнопка «Добавить действие» добавит следующее, например закрыть оверлей и сразу перейти на другой экран.
| Действие | Что делает | Анимация на выбор |
|---|---|---|
| «Перейти к» | Открывает другой экран; есть галочка «Сохранить прокрутку» | Любой из восьми переходов |
| «Открыть оверлей» | Показывает фрейм поверх экрана: меню, диалог, шторку | Любой из восьми переходов |
| «Заменить оверлей» | Меняет открытый оверлей на другой | Любой из восьми переходов |
| «Прокрутить к» | Прокручивает экран к выбранному слою | Без анимации или «Плавная прокрутка» |
| «Изменить на» | Переключает вариант компонента: кнопку, переключатель, вкладку | Без анимации, «Растворение» или «Умная анимация» |
| «Назад» | Возвращает на предыдущий экран | — |
| «Закрыть оверлей» | Закрывает открытый оверлей | — |
| «Открыть ссылку» | Открывает адрес http, https или mailto, по желанию в новой вкладке | — |
«Изменить на» — основа интерактивных компонентов: варианты из набора вариантов переключаются прямо в плеере, без копий экрана. Пример с состояниями кнопки разобран в гайде кнопка с вариантами.
Переходы, кривые и длительность анимации
Переходов восемь: «Растворение», «Умная анимация», «Сдвиг внутрь», «Сдвиг наружу», «Толкание», «Скольжение внутрь», «Скольжение наружу» и переход без анимации, при котором новый экран просто заменяет старый. Новая связь начинается именно с него, а анимацию включают сами.
Сдвиги, толкание и скольжения двигают экран целиком, для них задают «Направление»: влево, вправо, вверх или вниз. «Умная анимация» устроена иначе: она находит на двух экранах слои с одинаковыми именами и плавно меняет их положение, размер, скругление и цвет, а слои без пары растворяет. Поэтому перед умной анимацией соответствующие слои стоит назвать одинаково.
Кривые: «Линейно», «Плавно», «Плавно в начале», «Плавно в конце», два варианта с отскоком и четыре пружины — «Мягкая», «Быстрая», «Упругая» и «Медленно». Длительность задают в миллисекундах, до 10 000 мс; у пружины её задаёт сама кривая. График выбранной кривой виден прямо в окне «Взаимодействие».
Оверлеи: меню, окна и шторки поверх экрана
Оверлей — фрейм, который показывается поверх текущего экрана и не уводит с него: выпадающее меню, диалог, нижняя шторка. Его открывают действием «Открыть оверлей», а закрывают действием «Закрыть оверлей» или щелчком мимо.
Как показывать оверлей, настраивают на самом фрейме: выделите его и раскройте раздел «Как оверлей» во вкладке «Прототип». Те же настройки есть и в окне «Взаимодействие», когда выбрано «Открыть оверлей» или «Заменить оверлей».
- «Положение оверлея»: по центру, в одном из углов, по центру сверху или снизу либо «Вручную» — рядом со слоем, который его открыл.
- «Затемнить фон»: подложка под оверлеем, её цвет и прозрачность настраиваются.
- «Закрывать при клике снаружи»: включается сам, когда фрейм впервые открывают как оверлей.
Прокрутка: длинные экраны и закреплённые панели
Высокий экран прокручивается в плеере сам: если фрейм длиннее рамки устройства или окна плеера, его можно листать. Для блоков внутри экрана — карусели, ленты, таблицы — прокрутку включают на фрейме в разделе «Прокрутка»: «По вертикали», «По горизонтали» или «В обе стороны». Фрейм прокручивает всё, что выходит за его края.
Слоям внутри прокручиваемого фрейма задают поведение в разделе «При прокрутке». «Прокручивается» — слой едет вместе с содержимым. «Зафиксирован» — остаётся на месте, как нижняя навигация. «Липкий» — прокручивается, пока не упрётся в край, как заголовок раздела в списке.
Плеер и рамки устройств
Кнопка ▶ запускает прототип с выделенного экрана, а если ничего не выделено — с первого сценария страницы. Плеер открывается в новой вкладке и получает документ из открытого редактора, поэтому правки видны в нём сразу, даже несохранённые.
В шапке плеера — выбор сценария и счётчик экранов, кнопки «Сначала», «Предыдущий экран» и «Следующий экран», «Показать области нажатия» (подсветит всё, что можно нажать), «Показать в 100%» или «Вписать в окно», «Во весь экран» и «Копировать ссылку на прототип».
| Рамка | Экран, px |
|---|---|
| iPhone 16 | 393 × 852 |
| iPhone 16 Pro Max | 440 × 956 |
| Android | 412 × 917 |
| iPad | 834 × 1194 |
| MacBook | 1280 × 832 |
| Desktop | 1440 × 1024 |
Рамку выбирают в разделе «Устройство», когда ничего не выделено; телефон и планшет можно повернуть. Экраны подгоняются под рамку по ширине. Там же задают «Фон плеера» — цвет вокруг рамки.
- ⌥⌘↵
- Запустить прототип в новой вкладке
- →←
- Следующий и предыдущий экран сценария
- R
- Начать сценарий сначала
- Esc
- Закрыть плеер
На Windows и Linux запуск — Ctrl+Alt+Enter. Если на ту же клавишу назначен триггер «При нажатии клавиши», в плеере сработает триггер, а не клавиша плеера.
Кто может открыть прототип
«Копировать ссылку на прототип» даёт адрес, который откроют только те, у кого есть доступ к файлу, и только после входа в аккаунт. Публичной ссылки, которая открывается без входа, нет.
Чтобы показать прототип заказчику, дайте ему доступ в окне «Поделиться»: право «Может смотреть» или «Доступ по ссылке» — «Все, у кого есть ссылка, — смотреть». Войти в аккаунт ему всё равно придётся. Как устроен общий доступ, описано на странице совместная работа.
Готовые прототипы есть в шаблонах «Мобильное приложение», «Презентация» и «Сайт»: их можно запустить сразу, не настраивая связи. Остальные шаблоны — на странице шаблоны.
Чего в прототипах пока нет
У прототипов есть границы. Для большинства задач есть обходной путь.
| Чего нет | Как обойтись в Morfa |
|---|---|
| Переменных и условий | Сделать варианты компонента и переключать их действием «Изменить на» |
| Видео-триггеров | Взять «Через задержку», «При нажатии» или другой триггер из списка |
| Комментариев в плеере | Оставлять комментарии в файле: инструмент «Комментарий» (C) работает в редакторе |
| Публичной ссылки | Дать доступ «Может смотреть» через «Поделиться»: смотреть смогут после входа |
| Экспорта прототипа в видео или GIF | Показывать прототип в плеере |
Прототип из Figma переносится со связями и сценариями и сразу запускается в плеере. Действия с переменными и условиями и видео-триггеры при переносе пропадают, свои кривые анимации заменяются ближайшими стандартными. Подробнее — в гайде по переносу из Figma.