К содержанию
Открыть Morfa
Гайд

Как подготовить и передать макет для вёрстки

Что сделать в файле до передачи, как открыть разработчику режим «Код» и как зафиксировать версию, по которой идёт вёрстка.

Открыть MorfaГайды

Обновлено 9 минут чтения

// «Карточка» из «Morfa».
import {type ComponentPropsWithRef} from 'react';
import {Avatar} from './Avatar';
import {Button} from './Button';
import {Tag} from './Tag';
import {cx} from '../lib/cx';
import styles from './Card.module.css';

export type CardProps = ComponentPropsWithRef<'div'> & {
  /** «Заголовок» */
  heading: string;
  /** «Описание» */
  description: string;
};

export function Card({heading, description, className, ...props}: CardProps) {
  return (
    <div className={cx(styles.root, className)} {...props}>
      <header className={styles.header}>
        <div className={styles.author}>
          <Avatar size={40} className={styles.avatar}>МО</Avatar>
          <div className={styles.name}>

Коротко

Чтобы передать макет для вёрстки в Morfa, соберите экраны во фреймах с автолейаутом, оформите цвета и текст стилями или переменными, сохраните именованную версию (⌥⌘S) и пригласите разработчика в команду с ролью «Разработчик». Роль бесплатна, не занимает место редактора и открывает режим «Код» (⇧D) с размерами, кодом и ассетами.

Если вы делитесь одним файлом через «Поделиться», режим «Код» откроется только с правом «Может редактировать»: гость с правом «Может смотреть» его не видит. Любой доступ требует входа в аккаунт.

Каким должен быть макет для вёрстки

Верстальщик переносит в код структуру макета. Чем точнее она повторяет будущую страницу, тем меньше вопросов и ручной работы. Режим «Код» читает тот же файл, поэтому порядок в слоях сразу виден и в сгенерированном коде.

Что подготовить в макете и что получит разработчик
В макетеЗачемЧто видно в коде
Каждый экран — отдельный фрейм с понятным именемЭкран легко найти по названиюОтдельная страница проекта на каждый экран
Блоки на автолейауте (⇧A)Отступы и выравнивание заданы числами, а не на глазFlexbox с теми же отступами
Кнопки, поля, карточки — компоненты с вариантамиПовторяющийся элемент описан один разReact-компоненты с пропсами, варианты — union-типы
Варианты «Наведение», «Нажата», «Фокус», «Отключена»Видно, как элемент реагирует на действия:hover, :active, :focus-visible, :disabled
Цвета и текст — стили или переменныеЗначения не расходятся между экранамиCSS-переменные и токены в src/tokens.css
Иконки — векторыИконка остаётся чёткой в любом размереКомпоненты-иконки в src/icons

Как свойства и варианты устроены в самом редакторе, описано на странице компоненты и варианты, а как стили и переменные становятся токенами — в статье дизайн-токены.

Как открыть разработчику режим «Код»

Режим «Код» есть не у всех, кто видит файл. Его получают те, кто может редактировать файл, и роль «Разработчик» в команде. Наблюдатель и гость с правом «Может смотреть» вместо кода видят подсказку: «Код доступен разработчикам и редакторам команды».

Способы дать доступ и что получит разработчик
СпособГде настроитьРежим «Код»Правка макета
Роль «Разработчик» в командеОкно «Участники»ЕстьНет
Роль «Наблюдатель» в командеОкно «Участники»НетНет
Гость файла с правом «Может смотреть»«Поделиться»НетНет
Гость файла с правом «Может редактировать»«Поделиться»ЕстьЕсть

«Доступ по ссылке» в окне «Поделиться» подчиняется тому же правилу: «Все, у кого есть ссылка, — смотреть» режим «Код» не открывает, а «Все, у кого есть ссылка, — редактировать» открывает и «Код», и правку.

Для вёрстки удобнее всего роль «Разработчик»: она даёт «Код», экспорт и историю версий, но не позволяет случайно сдвинуть макет. Место редактора она не занимает. В бесплатной команде до 2 редакторов, а разработчиков и наблюдателей добавляют бесплатно.

  1. Создайте команду

    В файловом менеджере нажмите «Создать команду» и дайте ей название. Если команда уже есть, пропустите шаг.

  2. Перенесите файл в команду

    Если файл личный, выберите в его меню «Переместить в команду». Это могут владелец и администраторы команды.

  3. Создайте ссылку-приглашение

    Откройте окно «Участники», в строке «Ссылка-приглашение» выберите роль «Разработчик» и нажмите «Копировать ссылку». По умолчанию ссылка действует 30 дней и принимает до 100 человек; в «Настроить» можно выбрать 1, 7 или 30 дней и от одного до 100 человек.

  4. Перешлите ссылку сами

    Письма не отправляются, поэтому пришлите ссылку в мессенджере или почтой. Разработчик откроет её, войдёт в свой аккаунт и присоединится к команде.

Аннотации и измерения: как объяснить то, чего не видно

Не всё читается из макета: что происходит при ошибке, откуда берётся текст, какое расстояние обязательно сохранить. Такие вещи пишут в аннотациях прямо на слоях, а важные расстояния закрепляют измерениями.

Аннотации и измерения ставит тот, кто может редактировать файл. У разработчика файл только для просмотра: пометки он видит, но не добавляет, а вопросы задаёт в комментариях. Показать или скрыть аннотации на холсте — «Вид → Аннотации» (⇧Y).

  • Аннотация (Y)

    Щелчок по слою открывает заметку рядом с ним. Категории: «Разработка», «Взаимодействие», «Доступность», «Контент».

  • Измерение (⇧M)

    Протяните от края одного слоя к краю другого: расстояние между ними закрепится на холсте.

  • Комментарий (C)

    Обсуждение с ответами и @упоминаниями. Метка крепится к фрейму, обсуждение можно отметить как решённое.

  • Ссылка на слой (⌘L)

    По ссылке файл открывается на нужной странице с выделенным слоем. Удобно, чтобы ответить на вопрос разработчика.

Нарезка: иконки и картинки для вёрстки

Разработчик может скачать иконки и картинки сам: в разделе «Ассеты» вкладки «Код» они выгружаются в SVG и PNG. Но если важны имена файлов и масштабы, задайте их заранее: настройки экспорта хранятся в слоях и одинаковы для всех, кто открывает файл.

Настройки добавляют в разделе «Экспорт» вкладки «Дизайн». Первое нажатие «+» даёт PNG 1×, следующие — 2× с суффиксом «@2x» и 3× с «@3x». Область, которая не совпадает с одним слоем, вырезают инструментом «Фрагмент» (S). Все файлы страницы с настройками выгружаются через «Экспорт…» (⇧⌘E) одним ZIP.

Какой формат выбрать для ассетов
ЧтоФорматМасштаб и особенности
Иконки и логотипыSVGБез масштаба; можно добавить id слоёв
ФотографииJPG или WEBP1×, 2×, 3× или вручную от 0,01× до 32×
Картинки с прозрачностьюPNGТе же масштабы, суффиксы «@2x» и «@3x»
Макет для согласованияPDFВекторный, страница на каждый слой, до 50 страниц

Что разработчик увидит в режиме «Код»

Режим «Код» (⇧D) показывает тот же холст только для просмотра. При наведении видны расстояния между слоями, отступы и промежутки автолейаута подсвечиваются. Справа открывается вкладка «Код» с разделами «Компонент», «Код», «Расположение», «Типографика», «Стили и переменные», «Ассеты» и «Экспорт» — каждый подробно разобран на странице дизайн в код.

Код выдаётся на «CSS», «React + CSS Modules», «React + Tailwind», «React + inline-стили» или в виде «Токенов». Если генератор что-то не перенёс сам, под кодом будет список «Что перенести вручную». Проект целиком собирает «Экспорт в React…» — ZIP на Vite, React 19 и TypeScript 5.9 с README на русском.

tsxУпрощённый пример, а не дословный вывод генератора: у компонента «Кнопка» вариант «Вид» стал union-типом, а свойство «Текст» — строковым пропсом.
export type ButtonProps = ComponentPropsWithRef<'button'> & {
  view?: 'filled' | 'outline';
  label: string;
};
⇧D
Режим «Код»
Y
Аннотация
⇧M
Измерение
⇧Y
Показать или скрыть аннотации
⌘L
Копировать ссылку на слой
⌥⌘S
Сохранить версию…
⇧⌘E
Экспорт…
Клавиши для передачи макета (на Windows и Linux вместо ⌘ — Ctrl, вместо ⌥ — Alt)

Как зафиксировать версию для вёрстки

Пока идёт вёрстка, дизайн может меняться. Чтобы у дизайнера и разработчика была одна точка отсчёта, сохраните именованную версию: «Сохранить версию…» (⌥⌘S), название и описание, например «Вёрстка, этап 1».

Именованные версии не удаляются по сроку на обоих планах, их может быть до 200 на файл. В меню версии есть «Скопировать ссылку на версию»: по ней файл откроется именно в том состоянии, которое вы отдали в работу. После правок сохраните следующую версию с описанием изменений и пришлите ссылку на неё — обе останутся в «Истории версий».

Чек-лист перед передачей макета

Пройдите список, прежде чем отправлять ссылку.

  • Каждый экран — отдельный фрейм с понятным именем, блоки внутри собраны на автолейауте.
  • Цвета, текст и тени оформлены стилями или переменными, повторяющиеся элементы — компонентами.
  • У интерактивных компонентов есть варианты состояний.
  • Версии для разных ширин экрана сделаны отдельными фреймами.
  • Неочевидное поведение описано в аннотациях, ключевые расстояния закреплены измерениями.
  • Иконкам и картинкам заданы форматы, масштабы и имена для экспорта.
  • Сохранена именованная версия, ссылка на неё отправлена разработчику.
  • У разработчика роль «Разработчик» в команде или право «Может редактировать».

Если макет переносили из Figma, сначала пройдитесь по отчёту импорта: в гайде перенос из Figma описано, какие шрифты заменяются и что становится фиксированным расположением.

Частые ошибки и чего пока нет

Две ошибки встречаются чаще других.

Чего в передаче пока нет

  • Кода для iOS (Swift), Android и Vue: только CSS, React и токены.
  • Статуса «Ready for dev», своих категорий аннотаций и расширения для VS Code.
  • Ссылки без входа в аккаунт: открыть файл может только тот, у кого есть доступ.
  • Писем о приглашениях и упоминаниях: ссылки пересылают сами, упоминания видны в редакторе.

Как выглядит работа с макетом со стороны верстальщика, описано на странице для разработчиков.

Morfa — редактор интерфейсов в браузере

Компоненты, автолейаут, прототипы, совместная работа и код React. Без VPN, с оплатой в рублях.

0 ₽
План «Бесплатный»: 10 файлов, все инструменты и экспорт, без срока
990 ₽
в месяц за план «Профессиональный» или 790 ₽ при оплате за год; 20 ГБ картинок
Figma → Morfa
Импорт файлов по ссылке, бесплатно на любом плане
Без VPN
Открывается в браузере из России, без установки
Открыть MorfaВсе цены

Вопросы

Что чаще всего спрашивают о теме «Передача разработчику».

Может ли гость с правом «Может смотреть» открыть режим «Код»?

Нет. Режим «Код» открыт тем, кто может редактировать файл, и роли «Разработчик» в команде. Гостю с правом «Может смотреть» вкладка показывает подсказку, что код доступен разработчикам и редакторам команды.

Чем роль «Разработчик» отличается от «Наблюдателя»?

Обе роли бесплатны, не занимают место редактора и не дают править макет. У разработчика есть режим «Код» и история версий, а наблюдатель только смотрит и экспортирует.

Как передать макет, если файл личный, а не командный?

Перенесите его в команду через «Переместить в команду» в меню файла и пригласите разработчика с ролью «Разработчик». Второй путь — «Поделиться» с правом «Может редактировать», но тогда разработчик сможет менять макет.

Как показать разработчику конкретный элемент макета?

Выделите слой и нажмите ⌘L («Копировать ссылку на слой»). По ссылке файл откроется на нужной странице с выделенным слоем. Открыть её может тот, у кого есть доступ к файлу.

Чем аннотация отличается от комментария?

Аннотация (Y) — постоянная пометка на слое для вёрстки с одной из четырёх категорий. Комментарий (C) — обсуждение с ответами и упоминаниями, которое закрывают отметкой «решённое».

Нужно ли нарезать иконки, если в «Коде» есть раздел «Ассеты»?

Не обязательно: в «Ассетах» разработчик сам скачает иконки и картинки в SVG и PNG. Настройки экспорта в слоях нужны, когда важны имена файлов, папки и масштабы вроде «@2x» и «@3x».

Читайте также

Начните с шаблона или с файла из Figma

Бесплатно — 10 файлов, все инструменты и экспорт. Карта не нужна.

Открыть MorfaГайды