Перейти к содержимому

Правила подготовки макета

DFC Bridge добавляет только тот смысл, которого нет в Figma. Сам файл остаётся источником правды для раскладки, размеров, стилей, иерархии и данных компонентов.

Внутри hero: hero-copy с текстом, hero-actions с двумя элементами управления и workshop-art
Читайте вложенные рамки снаружи внутрь: hero содержит текстовую группу, действия и визуал; текст и элементы управления имеют смысловых родителей. Это схема структуры, не сравнение ширин и не снимок Figma. Открыть в полном размере.

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

Не записывайте размеры, интервалы, цвета, направление раскладки или варианты компонентов в имена слоёв и теги. Добавляйте тег только тогда, когда он отвечает на продуктовый вопрос: что это за страница, что делает элемент или что нужно экспортировать.

Используйте фреймы и компоненты для настоящих связей. У обёртки должна быть задача: собрать контент, задать раскладку, обрезать, дать фон или создать область взаимодействия.

Основной поток собирайте нативными средствами раскладки Figma. GROUP не является контейнером контента; используйте его только внутри настоящего поддерева [asset], которое переносится одним визуальным ресурсом. «Непрозрачное» здесь значит, что внутреннюю композицию не пересобирают и не проверяют как раскладку контента. Какие контейнеры оставлять, объясняют правила обёрток.

Корень страницы описывает одну страницу, состояние и подготовленную ширину:

home [page=home] [bp=1440] [view=default]

Для других ширин сохраняйте те же [page] и [view]. Нативная Section Figma может организовать холст, но не заменяет корень страницы и не добавляет ему смысл страницы.

  • редактируемый текст, данные и изображения остаются контентом;
  • [decor] отмечает конкретный декоративный слой, а не окружающий контейнер контента;
  • [asset] означает, что визуал передаётся одним ресурсом.

Не превращайте редактируемый текст в изображение только ради сохранения композиции.

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

Используйте компонент из правильной библиотеки. У экземпляра могут быть собственные контент и действие, но не отвязывайте его и не прячьте старые версии ради внешней аккуратности.

DFC Bridge описывает смысл, связи и ограничения. Метод не требует конкретного frontend-фреймворка. Детали реализации относятся к структурированному контракту или записи реализации.

Макет готов, когда другой человек может найти страницу, ширины, важные связи, действия, правила контента и открытые вопросы без обращения к автору.

Приближайте и листайте. Закрыть — Esc.