Методология передачи макета

Макет, который можно понять без созвона.

DFC Bridge помогает записать в макете, что это за страница, какие элементы повторяются на разных ширинах и что делают кнопки. Разработчику не приходится угадывать.

Подготовить макет Проверить в Figma

Адаптивыhome1440 · 375

Действиеcontact-modalcontact-button

Одна страница, два адаптива и связанное модальное окно.

Что такое DFC Bridge?

DFC Bridge — Design Frontend Contract — открытая методология подготовки интерфейсного дизайна к реализации без скрытых предположений. В Figma она связывает реальную структуру макета, стабильные имена и явно записанные решения: адаптивы, действия, данные и состояния.

Методологию можно применять без плагина. DFC Bridge Assistant — необязательный помощник в Figma для разметки и проверки поддерживаемых правил. Он не генерирует готовое приложение, а результат проверки исходного макета не заменяет проверку работающего интерфейса.

DFC Bridge Assistant и способы проверки · Официальная методология на GitHub · MIT

Один макет — одна понятная структура

Что меняется после DFC Bridge

Например, кнопка «Связаться» на двух ширинах должна открывать одно и то же окно. Одинаковые имена помогают узнать элементы. Записи в квадратных скобках уточняют их смысл — это метки в именах слоёв, не код.

Без DFC Bridge

desktop
  frame-42
    heading
    button

mobile-final-2
  group-91
    title

Названия показывают внешний вид, но не объясняют связи и действия.

С DFC Bridge

home [page=home] [bp=1440] [view=default]
  hero [section=home-hero]
    hero-title
    contact-button [action=modal:contact-modal]
  contact-modal [modal=contact-modal]

home [page=home] [bp=375] [view=default]
  hero [section=home-hero]
    hero-title
    contact-button [action=modal:contact-modal]
  contact-modal [modal=contact-modal]

Видно, какие макеты относятся к одной странице и какое окно должна открыть кнопка. Теги сами не создают раскладку или работающее поведение.

Как начать

Три действия до передачи

01
Выберите часть макета
Начните с одной страницы или новой секции и её нужных ширин.
02
Запишите недостающие решения
Сохраните имена тех же элементов. Укажите, куда ведут ссылки и что делают кнопки.
03
Проверьте понятность
Попросите коллегу найти эти элементы и их цели. Если пришлось объяснять устно — дополните файл.

Выберите следующий шаг