DS-482 — Сравнение Figma ↔ реализация (AMO CRM, мобильные)

Figma: Chat Place | AI Assistant → AmoCRM
Branch: deploy-preview-795 / api-1698.review.chatplace.io
Устройства: iPhone 16 Pro (Safari), iPhone 16 Plus (Safari), Samsung Galaxy S24 (Chrome)
Дата: 30 марта 2026 · v2 (исправленная версия)

⚠️ Исправление v2: В v1 ошибочно указывалось отсутствие разрешения «Обновлять данные в сделке». На самом деле оно присутствует — требуется скролл страницы. Все 3 разрешения + «Защита персональных данных» отображаются корректно.

📱 1. Список действий (Actions)

▼

Figma

Samsung S24

РАСХОЖДЕНИЕ #1 — Кнопка «Добавить действие»: позиция и стиль

Figma: полноширокая синяя кнопка внизу экрана. Реализация: компактная кнопка «Add action» справа от заголовка вверху.

РАСХОЖДЕНИЕ #2 — Статистика карточки: 3 колонки вместо 1

Figma: одна колонка «Создано: 0». Реализация: три колонки (Created / Moved / Updated). Возможно макет устарел.

КОСМЕТИКА #3 — Зелёный индикатор статуса

Зелёная точка Active рядом с карточкой — есть в реализации, нет в Figma.

КОСМЕТИКА #4 — Заголовок карточки обрезается

Figma: 2 строки. Реализация: 1 строка с ellipsis.

ОК Общая структура страницы

Порядок блоков, рамка карточки, иконка бота, отступы — совпадают.

📱 2. Детальная страница AMO (Разрешения)

▼

Figma

iPhone (реализация)

ОК Все 3 разрешения присутствуют

✅ Создавать сделку · ✅ Переводить сделку на другой этап · ✅ Обновлять данные в сделке — все три отображаются с тоглами и ссылками «Настроить».

ОК Защита персональных данных

Блок с тоглом и описанием присутствует. Поле для ссылки на политику конфиденциальности — работает (http://myrules.io).

ОК Кнопка «Отключить» / «Turn off»

Красная обводка, красный текст — соответствует макету.

ОК Тоглы разрешений

Зелёные тоглы справа, текст описания под заголовком, ссылка «Настроить» — всё по макету.

КОСМЕТИКА #5 — Описание условий: текст отличается

Figma: «Когда клиент оставляет свои контактные данные» + «Когда появляется новый контакт». Реализация: по одному условию на каждой карточке.

📱 3. Настройка «Создавать сделку» (/create-lead/)

▼

Figma

Samsung S24

Поэлементное сравнение

Элемент	Figma	Реализация	Статус
Toggle вкл/выкл	✅ Зелёный ON	✅ Зелёный ON	✅
«Когда использовать» / «When to use»	Текстовое поле с инструкцией	Текстовое поле с инструкцией на RU	✅
«Добавлять в этап» / «Add to stage»	Dropdown → «Первичный контакт»	Dropdown → «Первичный контакт»	✅
«Какие данные запрашивать»	ℹ️ инфо-баннер + «+ Добавить данные»	ℹ️ баннер + «Add data»	✅
«Оставлять комментарии к сделкам»	Toggle ON + описание	Toggle + описание	✅
Иконка микрофона	В текстовом поле	Иконка прикрепления (📎)	💡

ОК Структура и набор полей полностью совпадают

Все секции присутствуют в правильном порядке. Данные AMO (этапы воронки) подтягиваются корректно.

📱 4. Настройка «Переводить на другой этап» (/change-lead-step/)

▼

Figma

Samsung S24

Поэлементное сравнение

Элемент	Figma	Реализация	Статус
Заголовок	«Переводить сделку на другой этап»	«Move deal to another stage»	✅
Этап сделки (блок)	Dropdown + текстовое поле правил	Dropdown «Переговоры» + поле описания	✅
Несколько этапов	«+ Добавить этап»	Два блока этапов + «Add stage»	✅
Данные из AMO	«Первичный контакт», «Переговоры» и т.д.	«Переговоры», «Принимают решение»	✅

ОК Структура совпадает — этапы, правила, кнопка добавления

Данные воронки из amoCRM отображаются на русском. Можно добавить несколько этапов.

РАСХОЖДЕНИЕ #6 — Toggle отсутствует на экране настройки

В Figma: toggle вкл/выкл рядом с заголовком (показан в OFF-состоянии). В реализации: toggle только на главной странице разрешений, на экране настройки его нет.

📱 5. Настройка «Обновлять данные в сделке» (/update-lead/)

▼

Figma

Samsung S24

Поэлементное сравнение

Элемент	Figma	Реализация	Статус
Toggle	Зелёный ON	Зелёный ON	✅
«Когда использовать»	Текстовое поле	«When to use» + поле	✅
«Какие данные можно менять»	ℹ️ инфо-баннер + «+ Добавить данные»	ℹ️ баннер + «Add data»	✅
«Оставлять комментарии»	Toggle + описание	Toggle + описание	✅

ОК Полное совпадение структуры

Все секции на месте. Текст инфо-баннера и функциональность добавления данных — идентичны макету.

📱 6. Кросс-девайс различия

▼

iPhone 16 Pro + iPhone 16 Plus

КОСМЕТИКА #7 — Netlify «Collaborate» баннер внизу

Занимает место на мобильных. На проде баннера не будет.

ОК Идентичная отрисовка на iPhone 16 Pro и iPhone 16 Plus

Все блоки отображаются одинаково на обоих устройствах.

ОК Samsung Galaxy S24 — корректное отображение

Все экраны совпадают с iPhone-версией по структуре и содержанию.

📋 Итоговая таблица

▼

#	Экран	Находка	Тип
1	Список Actions	Кнопка «Add action» — позиция и стиль отличаются	🟡
2	Список Actions	Статистика: 3 колонки вместо 1	🟡
3	Список Actions	Зелёная точка активного статуса (нет в Figma)	💡
4	Список Actions	Заголовок обрезается в 1 строку	💡
5	Разрешения	Текст условий отличается от Figma	💡
6	Переводить на этап	Toggle вкл/выкл отсутствует на экране настройки	🟡
7	Все экраны	Netlify Collaborate баннер	💡

✅ Что совпадает

Все 3 разрешения присутствуют с тоглами
Защита персональных данных с полем ссылки
Кнопка «Отключить» — стиль и позиция
Create deal: все 5 секций (toggle, когда использовать, этап, данные, комментарии)
Move deal: этапы из AMO, правила, кнопка «Добавить этап»
Update deal: toggle, когда использовать, данные, комментарии
Данные AMO отображаются на русском (названия этапов воронки)
Кросс-девайс: идентично на iPhone 16 Pro, iPhone 16 Plus, Samsung S24

v2 · 30 марта 2026 · BrowserStack (iPhone 16 Safari, Samsung S24 Chrome) · Figma API