Figma

Экран описан в макете точнее, чем в задаче: размеры, отступы, цвета, шрифты, из каких компонентов он собран и как ведёт себя автолейаут. Интеграция даёт Buff читать отмеченные файлы Figma так, как их показывает панель инспектора, — параметрами и именами токенов, — и принимает вопросы прямо в комментариях к макету. Картинку макета получает только модель, которая умеет читать изображения; всё остальное работает с любой.

• Сверстать экран как в макете, а не как показалось

  Разработчик берёт задачу «сделать экран входа». В задаче — одна строка и ссылка на Figma. Отступы, скругления, размеры шрифтов и цвет кнопки он обычно снимает глазами и округляет.

  Результат. Бот читает фрейм экрана инструментом и отвечает параметрами: автолейаут по вертикали с отступом 24 и интервалом 16, кнопка 48 в высоту со скруглением 12, заливка — стиль «Кнопка/Малахит», #0FA37F. Верстать есть с чего, и цифры совпадают с макетом.

• Дизайн-система: какие токены есть и что они значат

  В проекте появляется третий оттенок зелёного, потому что никто не помнит, какой из них «основной». Токены записаны в Figma — стилями и переменными, — но туда редко заглядывают из кода.

  Результат. Инструмент get_styles отдаёт опубликованные стили со значениями и переменные по режимам: «Цвет/Акцент» — #0FA37F в светлой теме и #33CC99 в тёмной. Ответ ссылается на имена токенов, и в код попадают они, а не ещё один hex.

• Вопрос прямо на макете

  Дизайнер оставляет в Figma комментарий к экрану: «а что будет, если почта уже занята?». Раньше такой вопрос уходил в чат и терялся между двумя инструментами.

  Результат. Он упоминает бота в комментарии. Бот отвечает в ту же ветку, опираясь на код проекта и на сам макет: какой текст ошибки в коде, есть ли для него состояние в компоненте поля. Обсуждение остаётся там, где макет.

• Ревью: макет и код расходятся

  На ревью спорят, той ли толщины обводка у поля и тот ли межстрочный интервал у заголовка. Скриншот на скриншот — аргумент слабый, а открывать Figma и мерить вручную долго.

  Результат. Бот сравнивает: в макете обводка 1, цвет #D1D5DB, заголовок Inter Semi Bold 24/32 с трекингом −0.5. В коде — 2 и 28. Расхождение названо в числах, спор закрыт за один комментарий.

1. @buff какие отступы и цвет у кнопки «Войти» на экране входа?

   комментарий к макету или вопрос в приложении Buff

   инструмент: search_nodes + get_node

   Кнопка «Войти» — экземпляр компонента «Кнопка/Основная», 342×48. Автолейаут горизонтальный, отступы 12 сверху и снизу, 24 по бокам, интервал 8. Заливка — стиль «Кнопка/Малахит» (#0FA37F), скругление 12, тень 0/4 с размытием 12. Подпись — Inter Semi Bold 16, белая, по центру.

2. @buff покажи токены цвета в этом файле

   комментарий к макету

   инструмент: get_styles

   Опубликованные стили заливки: «Фон/Поверхность» #FFFFFF, «Текст/Основной» #111827, «Кнопка/Малахит» #0FA37F; текстовый стиль «Заголовок/H1» — Inter Semi Bold 24/32. Переменные на вашем плане Figma не читаются — их имена видны в привязках узлов, значения берутся из стилей.

3. /research чем экран входа в макете отличается от того, что в коде

   комментарий к фрейму экрана

   инструмент: get_node + код проекта

   Слово после обращения выбирает работу: без него — короткий ответ, «research» — исследование с документом, «task» — черновик задачи разработки. Исследование прочитает макет параметрами и сверит с вёрсткой в репозитории.

4. @buff что в макете называется «Поле почты» и из чего оно состоит?

   вопрос в приложении Buff

   инструмент: search_nodes + get_node

   Фрейм «Поле почты» 342×56 на экране входа: горизонтальный автолейаут с отступом 16, скругление 8, белая заливка и обводка 1 цвета #D1D5DB. Внутри — текст-подсказка «Электронная почта», Inter 16, цвет #6B7280.

1. Шаг 1

   Установка занимает одно нажатие

   Откройте раздел «Маркетплейс» на локальной странице коннектора. До установки видно, что интеграция получит: адреса, по которым она сможет ходить (API Figma и хранилище картинок), какие учётные данные попросит и какие инструменты увидит модель — с отметкой у того, что отвечает картинкой.

   Коннектор

   

2. Шаг 2

   Настройка — токен и список файлов или проектов

   Адрес API уже подставлен (`https://api.figma.com`), менять его не нужно. Ключ файла виден в его адресе: `figma.com/design/КЛЮЧ/…`; номер проекта — в адресе проекта: `figma.com/files/project/НОМЕР/…`. Достаточно одного из двух списков. Personal access token выпускается в настройках учётной записи Figma и хранится на вашей машине: интеграция его не видит.

   Коннектор

   

3. Шаг 3

   Заведите боту отдельную учётную запись

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

4. Шаг 4

   То же самое из командной строки

   Установка без графики равноправна: `connector install figma`, затем `connector instance add figma --config projects=4815162342` — адрес API подставится сам.

5. Шаг 5

   События приходят сами

   Опрос работает всегда и портов не требует: интеграция раз в 20 секунд читает комментарии отмеченных файлов. Если хочется быстрее — включите приём событий у коннектора и заведите в Figma вебхук FILE_COMMENT на выданную ссылку: он не разбирается по содержимому, а просто будит опрос, поэтому ответ приходит сразу.

   Коннектор

   

Интеграция работает отдельным процессом под собственным пользователем операционной системы: она не видит ключа коннектора, не читает файлы других подключений и не может выйти в сеть мимо коннектора. Подробнее — в разделе о безопасности.

• Figma на любом плане; переменные (Variables) читаются только на Enterprise — остальным доступны стили и привязки узлов.
• Personal access token учётной записи бота с доступом на просмотр к нужным файлам и правом комментировать.
• Сетевой доступ от машины с коннектором до api.figma.com и до хранилища картинок Figma — наружу из вашей сети ничего открывать не нужно.
• Коннектор версии 0.6 или новее: интеграция объявляет инструмент-картинку и значения по умолчанию в настройках, которых старые версии не понимают.
• Коннектор, запущенный с правом заводить отдельного пользователя ОС для интеграции (root или CAP_SETUID).
• Модель, читающая изображения, — только если нужен инструмент render_node; всё остальное работает с любой моделью.

Наша модель не умеет смотреть картинки. Интеграция бесполезна?

Нет — она построена именно для этого случая. Модель получает макет параметрами: размеры, автолейаут, цвета в hex, типографику, имена стилей и переменных, компоненты и их свойства. Единственный инструмент с картинкой ей просто не предлагается, и ответы считаются по параметрам и токенам.

Как Buff узнаёт, видит ли модель картинки?

По описанию модели у провайдера: там указано, какие типы входа она принимает. Если среди них есть изображения — инструмент render_node предлагается; если нет — не предлагается. Настраивать это руками не нужно.

Вы скопируете наши макеты к себе?

Нет. Интеграция читает узлы по запросу модели, когда ответ этого требует, и ничего не переносит и не индексирует заранее. Прочитанное попадает в контекст конкретного ответа, а не в хранилище.

Почему переменные не читаются?

Потому что так устроен API Figma: доступ к переменным (Variables) есть только у планов Enterprise. На остальных планах интеграция берёт токены из опубликованных стилей и показывает имена переменных из привязок узлов; в проверке связи это сказано прямо.

Бот сможет что-то изменить в макете?

Нет. Он читает узлы и пишет комментарии; редактировать слои, публиковать библиотеки или менять права он не умеет — таких инструментов у интеграции нет вовсе.

Большой файл — это большой счёт?

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