Паритет экранов входа

Девять состояний семи экранов регистрации, собранных по редлайнам. Для экрана входа макет и наша сборка стоят рядом; для остальных — только сборка, потому что их рендеров в сохранившейся выгрузке нет. Ширина всюду 390 dp — та же, что у кадра макета.

Как открыть эти же экраны в Figma

Все девять состояний лежат на странице «Авторизация и регистрация», секция «Экран Вход, регистрации и верификации» файла Podushe | Mobile-app.
Быстрее — по ссылке «открыть ноду в Figma» у каждого экрана: она ведёт прямо на нужный фрейм и подсвечивает его.
Вручную: Bwjfrippxq86431WDzDDP7?node-id=<id с дефисом> — например нода 597:55329 открывается как node-id=597-55329.
Эталоны 49 экранов макета (весь раздел «Профиль», карта и вход) сохранены в репозитории: docs/figma/reference/.

9состояний

7экранов

84юнит-теста

11правок по ревью

0открытых вопросов

A1 · велком

Экран входа

158:9505 открыть ноду в Figma

Сверено по редлайну

фон: #F5F5F5 + пятна #85DADE@30%, #933ED8@40%, #AD6DE1@40%
фотокарточки: 225×425 r13 на (43, 89) · 238×410 r15 на (115, 153)
круглое фото: 121×121 r30.68 на (12, 447)
3D-иллюстрация: 195×195 на (198, 36)
пилюля «Питомцы»: 164×83 r36.9 на (212, 490), иконка 48, текст 590/18.46
искры: 35 на (124, 59) · 22 на (152, 78) · 17 на (326, 490)
заголовок: Display 760/42, две строки, вторая #282A31@40%
зона действия: 390×96, паддинг 24, кнопка 342×48

Что показало ревью

исправленоstatusBarsPadding сдвигал коллаж на высоту статус-бара — в ноде координаты считаются от верха кадра
исправленокрупная 3D-иллюстрация рисовалась на круглой подложке от мелких иконок
исправленозаголовок переносился по ширине вместо жёсткого переноса макета
исправленоцветные пятна фона заливали весь кадр — в ноде их центры выше y≈290, и зона заголовка остаётся чистым #F5F5F5
исправленовместо нарисованных заглушек стоит сама верхняя часть макета: фон, фотографии, гантеля, пазл и пилюля «Питомцы» вырезаны из рендера ноды
исправленофотокарточки в макете не наклонены — наклон −8° и +6° был выдумкой
исправленослот 121×121 на (12, 447) — это 3D-пазл, а не круглое фото
исправленозаголовок переносился на три строки: веса 650 и 760 в макете — узкие начертания SF Pro, им дано горизонтальное сжатие 0.72; строка стала 281.9 dp против 280 в макете

ассетыКоллаж вырезан из рендера ноды 158:9505 в масштабе ×2. Отдельных ассетов (иконки, 3D, фотографии) в сохранившейся выгрузке нет — для них нужна квота Figma, она откроется около 10 сентября.

A2 · пусто, кнопка неактивна

Ввод номера

260:24430 открыть ноду в Figma

Сверено по редлайну

шапка: 390×124, паддинг 16/64/16/12, заголовок 590/18 по центру
лист: r32/32/0/0 #FFFFFF, тень 2 #000@4%, от y=124
блок заголовка: 390×118, паддинг 16/24/16/16, gap 6
«Авторизация»: 650/28 · подпись 510/16@40% в две строки
поле: 358×46 r100 #F5F5F5, префикс «+7», плейсхолдер «(000) 000-00-00»
группа кнопки: gap 32 от поля, внутри gap 16, кнопка 358×48
юридический текст: 510/14@40% по центру, две ссылки #007AFF

Что показало ревью

совпалоправок по редлайну не потребовалось

A2 · аккаунт заблокирован

Ввод номера

579:52473 открыть ноду в Figma

Сверено по редлайну

поле: обводка 1 px #F84040
ошибка: «Аккаунт заблокирован» 510/14 #F84040 под полем
подпись: «Если вы считаете…» 510/14@40% НАД кнопкой
кнопка: «Связаться с поддержкой» Brand 358×48
юридический текст: в этом состоянии отсутствует

Что показало ревью

совпалоструктура повторяет ноду один в один

A4 · неправильный код

Ввод кода

261:27297 открыть ноду в Figma

Сверено по редлайну

ячейки: шесть, высота 96 r16, gap 8, обводка #F84040
блок: 358×126 V gap 12: ячейки + строка ошибки 18
ошибка: «Неправильный код авторизации» 510/14 #F84040, паддинг 12
кнопка: «Получить код заново» Brand на y=400
таймер: в этом состоянии строки нет

Что показало ревью

совпалоправок не потребовалось

A4 · лимит отправок

Ввод кода

592:5040 открыть ноду в Figma

Сверено по редлайну

ошибка: «Лимит отправок исчерпан» 510/14 #F84040
кнопки: две в столбце gap 12: disabled на y=400 и вторичная на y=460
таймер: «Повторить попытку через 14:59», формат mm:ss
вторичная: «Изменить номер», стекло Regular

Что показало ревью

исправленов закрытом на ввод состоянии мигал курсор — у OtpField появился флаг enabled

A5 · Москва по геопозиции

Регистрация 1/4

597:55329 открыть ноду в Figma

Сверено по редлайну

шапка: 390×128 без заголовка, кнопка «назад» 48 на (16, 66)
полоса шагов: 358×6, четыре сегмента по 85, gap 6, r20
«Шаг 1 из 4»: 510/18@40%, блок gap 12, заголовок 650/28
блок «Город»: лейбл 510/16@40%, карточка 358×204 r20 #F5F5F5
строка города: «Москва» 590/16 · «Определили по геопозиции» 510/14@40% · «Изменить» #007AFF
блок «Районы»: чипы 40 в три ряда, gap 8
«Другие районы ›»: 510/16@40% + chevron 20 на y=754
зона действия: 390×96 поверх листа, кнопка 342×48

Что показало ревью

исправленозона действия в ноде лежит поверх листа, а не под ним — из-за этого строка «Другие районы ›» пропадала за краем экрана

A5 · выбраны два района

Регистрация 1/4

597:56595 открыть ноду в Figma

Сверено по редлайну

выбранные чипы: #282A31 с белым текстом
лимит: два района, третий не выбирается
«Весь город»: снимает остальные, остальные снимают его
город без гео: подписи «Определили по геопозиции» нет

Что показало ревью

совпалопосле правки зоны действия расхождений нет

A6 · выбран город

Поиск города

597:56057 открыть ноду в Figma

Сверено по редлайну

заголовок: «Поиск города» 590/18 по центру
поле поиска: 358×46 r100, лупа 20, крестик при непустом
строки: высота 44, текст 590/16, галочка у выбранного
разделители: 1 px #000@7% с отступом 16
кнопка: «Определить по геолокации» Secondary 342×48, липкая

Что показало ревью

совпалоправок не потребовалось

A7 · выбран район

Поиск районов

609:74123 открыть ноду в Figma

Сверено по редлайну

заголовок: «Поиск района»
строки: высота 65, название 590/16, чекбокс 24 справа
чекбокс: внутренний квадрат 18 r6, отмеченный #007AFF
кнопки: «Сбросить» Secondary и «Применить» Brand, 167×48 каждая

Что показало ревью

исправлено«Сбросить» и «Применить» в ноде одной ширины, а BottomAction жёстко давал вторичной 115 — добавлен параметр secondaryWidth