Коротко
Morfa — редактор интерфейсов в браузере: компоненты с вариантами, автолейаут, переменные с режимами, прототипы, совместная работа в реальном времени, доски, импорт из Figma и экспорт в код React.
Ниже — страница о каждой возможности: что она делает, как ей пользоваться и чем она похожа на то, к чему вы привыкли.
Возможности: все страницы
- Возможности
Компоненты и варианты
Как устроены компоненты в Morfa: «Создать компонент» (⌥⌘K), наборы вариантов, четыре типа свойств, экземпляры с переопределениями, библиотеки и код.
Читать - Возможности
Автолейаут
Автолейаут в Morfa: направление и перенос, интервал «Авто», отступы, размеры «Фикс.», «Обтянуть» и «Заполнить», абсолютное положение и flexbox в коде.
Читать - Возможности
Переменные и режимы
Переменные в Morfa: коллекции, четыре типа, режимы для светлой и тёмной темы, привязка к заливкам и размерам, CSS-переменные в коде и что пока не работает.
Читать - Возможности
Прототипы
Как сделать кликабельный прототип интерфейса в Morfa: 10 триггеров, 8 действий, переходы и пружины, оверлеи, прокрутка, рамки устройств и плеер.
Читать - Возможности
Совместная работа
Совместное редактирование макета в Morfa: курсоры соавторов, «Следить», комментарии, роли в команде, ссылки-приглашения и история версий.
Читать - Возможности
Дизайн в код
Режим «Код» в Morfa показывает React-компонент и CSS слоя, а «Экспорт в React…» выгружает проект на Vite и TypeScript. Что попадает в код и чего пока нет.
Читать - Возможности
Онлайн-доска
«Доска» в Morfa: стикеры, фигуры, соединители, блок-схемы и 10 шаблонов для мозгового штурма и ретроспектив, плюс таймер и голосование.
Читать - Возможности
Экспорт
Экспорт PNG, JPG, WEBP, SVG и векторного PDF в Morfa: масштаб от 0,01× до 32×, нарезка фрагментами, ZIP для нескольких файлов и ограничения форматов.
Читать - Возможности
Векторный редактор
Векторный редактор онлайн в Morfa: перо и карандаш, правка точек, булевы операции, профиль толщины. SVG открывается слоями и сохраняется обратно в SVG.
Читать - Возможности
Шрифты с кириллицей
Все 87 шрифтов Morfa с кириллицей по группам — от Inter и Golos Text до JetBrains Mono. Какие брать для интерфейса и сайта и как добавить шрифты компьютера.
Читать - Возможности
Шаблоны
Шесть шаблонов файлов и десять шаблонов доски в Morfa: что внутри «Мобильного приложения», «Сайта» и «UI-кита», какие уже кликабельные и как начать.
Читать - Возможности
Приложение для компьютера
Приложение Morfa для Windows, macOS и Linux готовится к выпуску, скачать его пока нельзя. Что оно добавит к браузеру, на чём построено и как работать сейчас.
Читать
Как устроен редактор
Morfa открывается в браузере: слева страницы и слои, в центре холст, справа свойства выделенного слоя, вкладки «Дизайн», «Прототип» и «Код». Если вы работали в Figma, вы узнаете расположение панелей и горячие клавиши.
Все инструменты доступны на плане «Бесплатный», без урезанных функций: ограничения есть только на число файлов, объём картинок и срок истории версий.
