Зачем нужен DFC Bridge

Макет: desktop и mobile.

Настоящая страница 01 Figma: готовый внешний вид в двух ширинах, но корни названы desktop и mobile-final-2 — Выглядит готовым. Что именно передали — пока непонятно.

Frontend, backend и ИИ гадают: что собирать, откуда данные и куда ведут кнопки?

DFC Bridge не диктует дизайн. Передаём решения, а не догадки.

Скачать макет .fig

Открой Figma.
На главной нажми Import.
Выбери скачанный .fig.

1. Красиво. Но непонятно

desktop и mobile-final-2. Это одна страница или разные? Названия не отвечают. Команда начинает додумывать.

Сравним деревья. Где тот же заголовок и кнопка?

Настоящее раскрытое дерево слоёв Figma на desktop: Heading и Button — Desktop: `Heading` / `Button`.

Настоящее раскрытое дерево слоёв Figma на mobile: Title mobile и Button copy — Mobile: `Title mobile` / `Button copy`.

Два решения «чтобы на мобильном было красивее»:

«Мастерская понятных макетов» → «Мастерская макетов». Поменяли текст, не перенос строки.
Весь hero-actions вынесли из hero-copy в hero, после картинки. Поменяли родителя, не просто порядок.

Фрагмент настоящего скрина Figma: desktop, полный заголовок и обе кнопки перед картинкой; имя корня сохранено — Desktop: полный заголовок, обе кнопки перед картинкой.

Фрагмент настоящего скрина Figma: mobile-final-2, сокращённый заголовок и обе кнопки после картинки; имя корня сохранено — Mobile: пропало «понятных», обе кнопки под картинкой. Полный исходный скрин.

Но нужно согласовать вариант текста и описать перенос. Здесь этого нет: frontend и ИИ гадают.

2. Связали экраны

Договорились: одна страница workshop, маршрут /workshop, вид default, ширины 1440 и 375. Записали в именах корней:

workshop [page=workshop] [route=/workshop] [bp=1440] [view=default]
workshop [page=workshop] [route=/workshop] [bp=375] [view=default]

Отдельные непрерывные записи Figma. Автоматика вводит посимвольно и переносит через Cut/Paste; курсор не сопровождает действия. Подписи и подсветка добавлены поверх.

Детали: «Открыть на весь экран» под записью → «Исходный размер».

Отдельно: связали корни одной страницы. GIF.

Корни с нативными ширинами 1440 и 375 имеют общие workshop и default — Один вид; две ширины.

Frontend знает, что собирать. ИИ не ищет «самый final». Теги описывают договорённость, не создают раскладку или код.

3. Нашли те же элементы

Назвали по роли, не по устройству. Теперь frontend и ИИ могут сопоставить элементы:

Было на 1440 / 375	Стало на обеих ширинах
`Heading` / `Title mobile`	`hero-title`
`Button` / `Button copy`	`contact-button`

Здесь выбрали общий заголовок и родителя. Это не единственный путь.

Title mobile → hero-title. Имя, не текст. GIF.

Вернули полное «Мастерская понятных макетов». GIF.

Весь hero-actions → в hero-copy. Не одну кнопку. GIF.

Другой текст — согласованный продуктовый вариант. Другой родитель — описанная трансформация. Внутри одного родителя порядок менять можно.

Те же два элемента внутри hero-actions переходят из ряда на 1440 в колонку на 375 — Те же кнопки и родитель.

На desktop кнопки рядом, на mobile — друг под другом. Разная раскладка — нормально: меняется Auto Layout, текст и родитель здесь те же.

Нативный кадр подготовленной страницы на 1440 px: полный заголовок и кнопки рядом, с полями вокруг hero — 1440 px: кнопки рядом.

Нативный кадр подготовленной страницы на 375 px: полный заголовок и кнопки перед иллюстрацией, с полями страницы — 375 px: кнопки друг под другом, перед картинкой.

Заголовок остаётся текстом. workshop-art [decor] [asset] — цельной картинкой. Не превращаем весь интерфейс в PNG.

4. Собрали библиотеку

button-primary и button-secondary стали общими компонентами. Правим источник — обновляются экземпляры.

В UI-kit показали состояния обоих стилей, в Modals — общий вид окна. Frontend и ИИ видят образцы, а не придумывают их.

Настоящие UI-kit: два стиля кнопок в обычном состоянии, при наведении, фокусе, нажатии и недоступности; рядом Modals с contact-modal — Два стиля, пять примеров состояний. Окно — рядом в Modals.

Default → hover, затем отдельный фокус. GIF.

В библиотеке — вид. На экземпляре страницы — действие. Одна и та же кнопка в другом месте может делать другое.

contact-button [action=modal:contact-modal] → открыть окно.
faq-link [href=#faq] → перейти к FAQ.

href=#faq указывает на anchor=faq, action=modal:contact-modal — на modal=contact-modal — Объявленные цели, не работающий интерфейс.

На экземпляре: действие → цель на 375. GIF.

К цели находит скрытый слой, не открывает окно. Поведение ещё нужно реализовать.

Как устроены компоненты

Это образцы, не работающий прототип.

State=default/hover/pressed/disabled — варианты Figma, не DFC-теги или виды страницы. Фокус независим: Focus visible=true может сочетаться с hover и pressed.

Условие отключения и его владелец — в контракте реализации. Загрузки нет: окно и якорь, не запрос.

В каждом корне — свой скрытый [modal=contact-modal]. Главный компонент в Modals — источник вида, не ещё одна цель. Окно с почтой, не форма отправки.

Источник данных и договорённости фиксируем в контракте данных.

5. Проверили

Отдельная копия: разный текст hero-title и родитель hero-actions. Auto Layout включён. Исправления не показаны. В ролике — старый отчёт и Повторить.