Макет для разработчика и верстальщика

Кто видит вкладку «Код»

Вкладка «Код» зависит от того, как дизайнер дал вам доступ к файлу. Главное правило: тот, кто может только смотреть, кода не видит. Исключение одно — роль «Разработчик» в команде: она тоже только смотрит, но «Код» у неё есть.

Без доступа к коду на вкладке «Код» в правой панели написано «Код доступен разработчикам и редакторам команды», а картинки можно скачать через «Экспорт». Ссылка на просмотр разработчику не подходит, а право на правку даёт больше, чем ему нужно. Поэтому удобнее всего роль «Разработчик». Ролей у личных файлов нет, так что файл сначала переносят в команду.

1. 1

   Дизайнер создаёт команду

   «Создать команду» в файловом менеджере. Бесплатная команда даёт до 2 редакторов, а разработчики и наблюдатели в это число не входят.

2. 2

   Переносит файл

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

3. 3

   Приглашает вас

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

4. 4

   Вы входите и открываете файл

   Холст только для просмотра, а режим «Код», экспорт, версии и комментарии доступны.

Dev Mode бесплатно: чем «Код» отличается от Figma

В Figma полный доступ к Dev Mode даёт платное место. В Morfa режим «Код» есть на обоих планах, а роль «Разработчик» не занимает место редактора и ничего не стоит.

Набор у «Кода» скромнее, чем у Dev Mode: нет статуса «Ready for dev», своих категорий аннотаций и расширения для VS Code. Что есть, описано ниже.

Режим «Код»: порядок работы

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

1. 1

   Включите режим

   Нажмите ⇧D или выберите «Код» в переключателе режимов.

2. 2

   Наведите на слой

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

3. 3

   Выберите язык

   В разделе «Код» — «CSS», «React + CSS Modules», «React + Tailwind», «React + inline-стили» или «Токены». Файлы открываются вкладками, их можно скопировать или скачать.

4. 4

   Заберите картинки

   В «Ассетах» иконки скачиваются в SVG и PNG 2×, картинки — исходным файлом. В «Экспорте» лежат файлы в тех форматах и масштабах, которые настроил дизайнер.

5. 5

   Отметьте вопросы

   Аннотация (Y) и измерение (⇧M) работают и в этом режиме. Категории аннотаций — «Разработка», «Взаимодействие», «Доступность» и «Контент»; показ на холсте — «Вид → Аннотации» (⇧Y).

Шестерёнка открывает настройки: «Единицы» px или rem, формат цвета HEX, RGB или HSL и «Подставлять токены». Они запоминаются на устройстве.

Что получается в коде

Генератор пишет обычный код, который проходит проверку TypeScript в строгом режиме. Автолейаут становится flexbox, свойства компонента — пропсами с типами, варианты — union-типами. Состояния «Наведение», «Нажата», «Фокус» и «Отключена» превращаются в :hover, :active, :focus-visible и :disabled. Как собрать макет, чтобы код вышел чистым, — на странице автолейаут.

• Стили и переменные становятся CSS-переменными, режим включается атрибутом, например data-theme="dark". О режимах — на странице переменные.
• Векторы становятся компонентами-иконками в src/icons.
• Разметка семантическая: заголовки, main, header, nav, footer.
• Повторяющиеся элементы собираются в массив и выводятся через .map().

import {type ComponentPropsWithRef} from 'react';
import {cx} from '../lib/cx';
import styles from './Tag.module.css';

export type TagProps = Omit<ComponentPropsWithRef<'div'>, 'color'> & {
  /** «Цвет»: 'gray' — «Серый», 'blue' — «Синий», 'green' — «Зелёный», 'yellow' — «Жёлтый», 'red' — «Красный» */
  color?: 'gray' | 'blue' | 'green' | 'yellow' | 'red';
};

export function Tag({color = 'gray', children, className, ...props}: TagProps) {
  return (
    <div className={cx(styles.root, className)} data-color={color} {...props}>
      <div className={styles.dot} />
      <span className={styles.label}>{children}</span>
    </div>
  );
}

Экспорт в React: проект целиком

Чтобы не собирать код по слоям, выгрузите проект через меню «Файл» → «Экспорт в React…».

1. 1

   Выберите объём

   «Выделенное», «Страница» или «Все страницы».

2. 2

   Выберите оформление

   CSS Modules, Tailwind CSS 4 или inline-стили.

3. 3

   Запустите проект

   Распакуйте ZIP и выполните npm install, затем npm run dev. Проект собран на Vite, React 19 и TypeScript 5.9.

Внутри — сброс стилей, токены в src/tokens.css и src/tokens.ts (для Tailwind ещё src/theme.css), страница на каждый экран и README на русском. Картинки в других форматах — на странице экспорт, а порядок передачи макета со стороны дизайнера — в гайде о передаче разработчику.

Чего в «Коде» нет

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