Коротко
В Morfa шесть шаблонов файлов — «Пустой файл», «Мобильное приложение», «Сайт», «Презентация», «Соцсети» и «UI-кит» — и десять шаблонов доски, от «Мозгового штурма» до «Блок-схемы». Шаблон файла выбирают в галерее «Начать с шаблона» у кнопки «Новый файл»: он открывается новым файлом, который правится как любой другой.
Три шаблона уже работают как кликабельный прототип: «Мобильное приложение», «Сайт» и «Презентация». Шаблоны доски вставляются на открытую доску из меню «+».
Как начать с шаблона
Шаблон файла создаёт новый файл: исходник не меняется, и тот же шаблон можно открыть снова. Новый файл получает имя шаблона и сразу открывается в редакторе.
Откройте нужный раздел
В файловом менеджере перейдите в «Личные файлы» или в проект команды: файл появится там, где вы его создали.
Откройте галерею
Нажмите стрелку рядом с кнопкой «Новый файл». Откроется окно «Начать с шаблона» с превью всех шести шаблонов.
Выберите шаблон
Нажмите на карточку: файл с именем шаблона создастся и откроется в редакторе.
Запустите прототип
В «Мобильном приложении», «Сайте» и «Презентации» нажмите ▶ в шапке правой панели: плеер откроется в новой вкладке.
Шесть шаблонов файлов: что внутри
Шаблоны собраны теми же инструментами, что и рабочие макеты: на автолейауте, с компонентами и стилями. Поэтому их полезно разбирать по слоям — видно, как устроен аккуратный файл.
| Шаблон | Что внутри | Шрифты | Прототип |
|---|---|---|---|
| «Пустой файл» | Одна пустая страница | — | — |
| «Мобильное приложение» | Приложение для чтения на iPhone 16 (393×852): экраны «Вход», «Лента», «Профиль» и лента в тёмной теме; страница «Компоненты» | Inter | Да |
| «Сайт» | Лендинг 1440 px: шапка, первый экран, блок доверия, преимущества, призыв к действию и подвал на сетке из 12 колонок | Manrope | Да |
| «Презентация» | Три слайда 1920×1080: титульный, три вывода и график; стили текста «Слайд/…» | Inter Tight, Inter | Да |
| «Соцсети» | Пост ВКонтакте 1080×1080, сторис 1080×1920 и картинка для поста в Telegram 1280×720 | Playfair Display, Manrope | — |
| «UI-кит» | Кнопки, поля ввода, чекбоксы, переключатели, теги, аватары и карточка; стили цвета, текста и теней | Inter | — |
Шаблон мобильного приложения
«Мобильное приложение» — приложение для чтения на экране iPhone 16. Всё собрано на автолейауте, а цвета — переменные коллекции «Тема» с режимами «Светлая» и «Тёмная». Экран «Лента — тёмная тема» состоит из тех же экземпляров, просто у фрейма включён режим «Тёмная».
На странице «Компоненты» лежит набор приложения: иконки, кнопки, чипы, поля ввода, карточка, вкладки, нижняя навигация и статус-бар.
- Плеер открывается на экране «Вход» в рамке iPhone 16.
- Кнопка «Войти» ведёт в ленту, нижняя навигация и аватар — в профиль и обратно.
- Строка «Тёмная тема» в профиле открывает ленту в тёмном режиме.
Как довести шаблон до своего приложения, разобрано на странице дизайн мобильных приложений, а как устроены режимы переменных — в гиде тёмная тема.
Шаблон UI-кита
«UI-кит» — небольшая дизайн-система на Inter. На странице «Компоненты» каждый элемент — набор вариантов со свойствами. У кнопки, например, четыре вида («Основная», «Вторичная», «Контурная», «Текстовая») и три состояния («Обычная», «Наведение», «Отключена»), а подпись и иконка меняются свойствами «Текст» и «Иконка».
На странице «Стили» собраны стили цвета, текста и теней, из которых сделаны компоненты.
Поменяйте стили
Замените цвета и шрифты в стилях — компоненты перекрасятся сами.
Добавьте свои компоненты
Соберите элемент во фрейме с автолейаутом и сделайте его компонентом (⌥⌘K).
Опубликуйте библиотеку
«Файл → Опубликовать библиотеку…»: компоненты и стили станут доступны в других файлах команды или ваших личных файлах.
Чем UI-кит отличается от дизайн-системы, объяснено в словаре — UI-кит. Как вести общую библиотеку команды, описано на странице для дизайн-систем.
Шаблоны сайта, презентации и постов для соцсетей
Три остальных шаблона закрывают частые задачи: лендинг, короткую презентацию и набор публикаций.
«Сайт»
Лендинг сервиса онлайн-записи на 1440 px. Каждый блок — автолейаут на сетке из 12 колонок с полями 120 px и промежутками 24 px, цвета и шрифты — локальные стили. В плеере меню и кнопки прокручивают страницу к своим разделам.
«Презентация»
Три слайда 1920×1080 на одной шкале стилей текста «Слайд/…». В плеере слайды листаются кликом или стрелками → и ←.
«Соцсети»
Осенняя акция кофейни в трёх форматах. В сторис текст не заходит в верхние и нижние 250 px, а чашка нарисована из простых фигур — каждую часть можно поправить.
Пошаговая сборка лендинга — в гиде макет сайта, форматы постов и баннеров — на странице для маркетологов. Если нужного размера в шаблоне нет, у инструмента «Фрейм» есть 27 готовых размеров — они собраны в таблице размеров экранов.
Шаблоны доски для мозгового штурма, встреч и схем
Шаблоны доски лежат не в файловом менеджере, а в меню «+» на панели инструментов доски. Создайте доску кнопкой «Новая доска», нажмите «+» и откройте вкладку «Шаблоны» или найдите шаблон поиском. Шаблон встаёт в центр экрана, и вид сразу приближается к нему; на одну доску можно положить несколько шаблонов.
| Группа | Шаблон | Что на доске |
|---|---|---|
| Придумать вместе | «Мозговой штурм» | Вопрос, идеи на стикерах, голосование за лучшие |
| Придумать вместе | «Crazy 8s» | Восемь набросков, по минуте на каждый |
| Придумать вместе | «Майнд-карта» | Главная тема в центре и ветви вокруг неё |
| Провести встречу | «Ретроспектива» | Что получилось, что мешало и что попробуем |
| Провести встречу | «Заметки встречи» | Повестка, заметки, решения и задачи |
| Провести встречу | «Ледокол» | Вопросы для знакомства перед работой |
| Спланировать | «Канбан» | Бэклог, в работе, на проверке, готово |
| Спланировать | «Карта пути клиента» | Этапы, действия, мысли, эмоции и возможности |
| Нарисовать схему | «5 почему» | Пять вопросов от симптома к корневой причине |
| Нарисовать схему | «Блок-схема» | Начало, шаги, решения и конец процесса |
Для мозгового штурма во «Встрече» есть таймер и голосование, они запускаются из меню «Реакции и встреча». Доска считается файлом плана наравне с макетами. Стикеры, соединители и встречи описаны на странице онлайн-доска, а как вести блок-схему — на странице блок-схемы.
Чего в шаблонах нет
Шаблоны — стартовые файлы, а не магазин макетов.
- Публичной галереи шаблонов и сообщества, как Community в Figma.
- Сохранения своего файла как шаблона. Заготовку держат обычным файлом и копируют командой «Дублировать» в меню файла.
- Переменных и условий в прототипах: кликабельные шаблоны построены на переходах между экранами и прокрутке.