В этой статье
Scott
D2C (Design to Code) в Pixso помогает преобразовать дизайн во фронтенд-код. Вместо повторного написания разметки и стилей с нуля дизайнеры и разработчики могут работать с одним макетом и сократить объём ручной работы. Сгенерированный код служит отправной точкой для реализации. Перед включением в проект нужно проверить точность отображения, подключение данных и необходимые сценарии взаимодействия.
Надёжная передача дизайна в разработку начинается ещё до экспорта. В рабочем пространстве для совместного UI-дизайна укажите для каждого результата состояние компонента, источник токенов, правила адаптивной вёрстки и ответственного. Так разработчик сможет отличить утверждённые решения от вариантов, которые ещё обсуждаются.
- В одном наборе компонентов отметьте не только успешное выполнение сценария, но и состояния загрузки, отсутствия данных, ошибки и недоступности элемента управления.
- Проверьте, что значения отступов и параметры типографики взяты из общих стилей или токенов, а не переопределены только для конкретного элемента.
- Если сгенерированный код не может точно воспроизвести взаимодействие, запишите известное ограничение и действия, которые потребуется выполнить вручную.
I. Что такое D2C
D2C расшифровывается как Design to Code — преобразование дизайна в код. Этот инструмент помогает фронтенд-разработчикам быстрее переходить от макета к реализации и сокращать затраты на ручное написание кода.
В обычной панели D2C можно распознавать расположение слоёв и компоненты дизайн-системы на страницах Pixso, чтобы перенести эти данные в код и воспроизвести детали макета. Для вывода доступны React, Vue, HTML, ArkUI и Flutter. Ниже описаны настройки и порядок экспорта именно этой панели.
В сочетании с возможностями компонентов Pixso D2C удобнее использовать в реальных проектах. Можно подключить дизайн-систему, распознавать отдельные компоненты и получать соответствующий им код.
- Перенос деталей дизайна в код. Инструмент помогает воспроизвести расположение элементов и их внешний вид в соответствии с исходным макетом. Совпадение результата с дизайном следует проверить в среде, где будет работать приложение.
- Распознавание дизайн-системы и компонентов. D2C определяет и извлекает стили, дизайн-токены и компоненты непосредственно из файла дизайна.
- Сокращение ручной работы над фронтендом. Меньше повторяющихся операций помогает сократить цикл разработки и сделать передачу результата быстрее и стабильнее.
II. Доступ к D2C и различия режимов
Обычная панель D2C доступна как в Design Mode (режиме дизайна), так и в Dev View (режиме разработчика). Однако набор доступных в ней действий различается.
Design Mode: позволяет просматривать, генерировать и экспортировать код. В этом режиме также можно изменять слои макета с помощью функции Optimize design («Оптимизировать дизайн»).
Dev View: в этой панели доступны только просмотр, генерация и экспорт кода. Изменение слоёв через Optimize design, доступное в Design Mode, сюда не входит.
О версии и снимках экрана. Ниже приведены 19 снимков обычной панели D2C с английским интерфейсом. Названия кнопок сохранены и сопровождаются пояснениями на русском. Нынешняя функция D2C⁺ работает в Enterprise Dev View: для неё требуется Enterprise Full-feature Seat или Dev Seat, а файл должен находиться в корпоративном пространстве. D2C⁺ поддерживает React, Vue и Flutter. Условия доступа и отличия от обычной панели сверяйте с руководством по началу работы с D2C⁺ на английском.
- Открытие D2C в Design Mode.
- Открытие D2C в Dev View.
III. Выбор фреймворка и настройки генерации
Выберите целевой фреймворк в раскрывающемся меню и настройте параметры генерации кода. Набор доступных параметров зависит от выбранного фреймворка.
Извлечение стилей (Extract styles): определяет и извлекает стили из файла дизайна. Их названия используются в коде, поэтому проще понять, на какой стиль ссылается элемент.
Извлечение дизайн-токенов (Extract design tokens): определяет и извлекает дизайн-токены из файла. Имена токенов сохраняются в коде и помогают понять назначение соответствующих значений.
Извлечение компонентов (Extract components): распознаёт компоненты в файле дизайна и генерирует код для повторного использования. Имена компонентов в коде помогают сопоставить реализацию с макетом.
Префикс имён классов (Prefix class names): добавляет общий префикс ко всем сгенерированным CSS-классам. Это позволяет избежать совпадений имён с классами из других библиотек стилей проекта.
Макет страницы (Page layout):
Если включить Responsive, при изменении ширины окна браузера элементы с соответствующими настройками компоновки будут стремиться сохранять исходную структуру и взаимное расположение. Поэтому важно проверить и настройки компоновки в самом макете.
Параметр Unit задаёт единицы измерения размеров в сгенерированном коде. В показанном ниже примере можно выбрать px или rem.
Правила именования (Naming convention): для имён файлов предусмотрены два формата.
Pascal Case: SamplePixsoFile
Kebab Case: sample-pixso-file
Тип взаимодействий — только для HTML:
Single HTML page объединяет слои страниц дизайна в один HTML-файл. В этом формате можно реализовать большинство взаимодействий прототипа, настроенных в Pixso.
Multiple HTML pages создаёт отдельный HTML-файл для каждой страницы дизайна. Этот вариант поддерживает лишь некоторые базовые взаимодействия прототипа.
Выберите фреймворк, для которого нужно сгенерировать код.
Настройки кода React: выбор языка, инструмента сборки, формата стилей и других параметров.
- Настройки кода Vue: выбор языка и формата стилей.
Настройки кода HTML: извлечение стилей, компоновка страницы и тип взаимодействий.
Настройки кода ArkUI. На снимке показан параметр извлечения стилей.
Настройки кода Flutter. На снимке показан параметр извлечения компонентов.
Чтобы посмотреть результат извлечения стилей, выберите файл common.css в Project structure («Структура проекта»). В области кода появятся определения стилей из этого файла.
Чтобы проверить извлечённые дизайн-токены, выберите в Project structure CSS-файл с их определениями. На снимке ниже это variables.css: в нём показаны переменные, соответствующие токенам.
Чтобы проверить результат извлечения компонента, выберите его CSS-файл в Project structure. В примере открыт Component23729.css с кодом, соответствующим компоненту и его экземплярам.
IV. Выбор слоёв для преобразования в код
Перед генерацией кода выберите слои дизайна, которые нужно преобразовать.
Способ 1: нажмите Select frame («Выбрать фрейм») и отметьте нужные слои в списке.
Способ 2: на начальном экране D2C выделите нужные слои рамкой, удерживая кнопку мыши и перетаскивая указатель.
- Нажмите Select frame, чтобы выбрать слои из списка.
Выделите нужные слои рамкой на начальном экране D2C.
V. Просмотр и экспорт сгенерированного кода
Проверьте выбранный дизайн и нажмите Next, generate code («Далее: сгенерировать код»), чтобы запустить генерацию.
После генерации код можно просматривать через Project structure («Структура проекта») и Layer list («Список слоёв»). Чтобы увидеть изображения из всех преобразованных слоёв, нажмите View («Просмотр»).
Если нужно сменить фреймворк или изменить параметры, нажмите Regenerate («Сгенерировать заново»). Код будет создан повторно с новыми настройками.
Нажмите Next, generate code.
Просмотрите код. В Project structure доступны файлы проекта, а в Layer list можно выбрать код, соответствующий слою. Через View открываются изображения из всех преобразованных слоёв.
При экспорте в один HTML-файл: если преобразовать несколько слоёв с настройкой Single HTML page, их код объединится в одном файле. При переключении между слоями в Layer list будет найден и подсвечен соответствующий блок кода внутри этого файла.
Нажмите View, чтобы посмотреть изображения из преобразованных слоёв.
Сгенерируйте код заново. Чтобы изменить фреймворк или параметры, нажмите Regenerate и повторите генерацию с нужными настройками.
Экспортируйте код. Закончив проверку, нажмите показанную на снимке кнопку Download code («Скачать код»). Она позволяет выгрузить полный пакет сгенерированного проекта.
Итоги
D2C можно использовать не только для ускорения отдельных операций, но и как связующее звено между дизайн-системой и фронтенд-разработкой. Последовательная проверка настроек, выбранных слоёв и результата помогает сократить ручную работу и затраты, быстрее передавать результат и сохранять единообразие интерфейса. После экспорта включите код в проект, реализуйте подключение данных, права доступа и бизнес-логику, затем проверьте работу приложения перед передачей.
