Онбординг · кадр 1144:15679 · «По любви»

Экран «Новый опыт» по ноде

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

нода 1144:15679 кадр 390×844 узлов в дереве 111 переменных 20 стилей текста 7 компонентов 19 снимок 1170×2532 → 462×1000

Figmaприложение

Тяните шторку. Статус-бар и полоску home iOS приложение не рисует — их рисует система Android, и в сравнении они исключены (спека 6.4).

2,79 %

пикселей вне маски с ΔE2000 > 6. Порог приёмки — 0,3 %, так что вердикт красный: экран ещё не закрыт.

4,40 → 2,79 %

было до правки высоты текстового блока (см. режим «до правки»).

0,0 dp

сдвиг прогресс-бара, подписи и кнопки — совпали точно.

Снимок сделан на JVM (Paparazzi) и ужат до 1000 px по длинной стороне — это ≈×1,19 вместо ×3. Числа здесь предварительные: окончательный вердикт даёт снимок с эмулятора 1170×2532.

Измерения

Где что оказалось

Границы элементов найдены по цвету на обеих картинках и переведены в dp кадра. Совпадением считается расхождение в пределах ошибки измерения на масштабе ×1,19 — это ±0,85 dp.

Элемент	Figma, dp	Приложение, dp	Δ	Что это значит
Прогресс-бар, заполнение	102,1…106,4	102,1…107,2	0	совпало
Заголовок «Новый опыт», глифы	144,4…167,1	146,9…168,8	+2,5	шрифт статический TT Runs против вариативного в макете
Вопрос, строка 1	211,9…227,1	211,0…226,2	−0,9	совпало
Вопрос, строка 2	235,5…251,6	235,5…250,7	0	совпало
Тег «Уважаю границы»	274,4…314,9	272,7…313,2	−1,7	в пределах ошибки
Ползунок шкалы	327,5…363,8	325,0…362,1	−2,5	проверить на ×3
Подпись «Увидят все пользователи»	716,7…725,1	716,7…725,1	0	совпало
Кнопка «Далее»	746,2…801,1	746,2…801,1	0	совпало
Полоска home iOS	831,5…834,9	нет	—	системный элемент iOS, не воспроизводится

Крупным планом

Эмодзи, тег и шкала

Тег, точки шкалы и ползунок совпадают по форме, размеру и цвету. Эмодзи — нет: в макете набор Apple, на Android набор Google. Это решение Р-15 «попробуем и посмотрим» — вот на что смотреть.

Увеличение: тег с эмодзи и шкала, сверху Figma, снизу снимок приложения — Увеличение ×3 от снимка. Скрепка и голубь нарисованы разными наборами эмодзи; всё остальное в этих полосах — плашка тега 2893:16303, девять точек increment 3×3 с цветами 4 × Beigeish Black, 1 × Pale Beige, 4 × Terracotta, восемь сегментов 30,375×2 и ползунок 40×38 с белой обводкой 2 наружу — из ноды.

Метод

Как экран собирался

Порядок задан правилом К-15 спеки и скиллом figma-atomic-layout: снизу вверх, рендер — последним и только как контроль. У каждого числа в коде стоит адрес: id переменной, id стиля или guid узла.

ШАГ 0

Нода

Один запрос к API за узлом кадра, ответ сохранён. Написан разборщик дерева: геометрия относительно кадра, авто-лейаут, заливки, привязки переменных, свойства вариантов.

206 КБ ответа · 111 узлов · 37 фреймов, 28 инстансов, 18 текстов

ШАГ 1

Токены

Все привязки boundVariables сведены к переменным трёх коллекций и заведены в код с адресом в комментарии.

20 переменных · 464:154 Brand/Terracotta, 3023:9986 sp-huge, 710:11066 cr-medium…

ШАГ 2

Стили текста

Параметры берутся из стиля, а не из сырых полей .fig: у заголовка там записан старый Bold 22/24, а по стилю — ExtraBold 30/32.

7 стилей · 656:9878 TTRuns-800-30-32, 1144:13810 Manrope-700-20-24…

ШАГ 3

Атомы

Компоненты кита от вложенных к внешним: сегмент и ползунок раньше шкалы, шкала раньше ячейки. Варианты, чьи ноды ещё не читал, помечены в коде и не додуманы.

8 атомов · наборы 830:7424 .progress (6 вариантов), 2893:16486 slider-cell (5), 656:5869 button (22)

ШАГ 4

Раскладка

Каждый контейнер переведён по таблице «поле Figma → Compose»: направление, отступы, зазор, выравнивание, fill / hug / fixed.

11 контейнеров · content 358 при полях 16, gap 32; шкала 358×44, линия 334×3, gap 4

ШАГ 5

Экран

Дерево ноды повторено сверху вниз, скрытые слои остались состояниями. Строки — в файле строк с адресом; данные ноды поданы снимку как фикстура, в коде экрана кириллицы нет.

3 новых файла кода · 2 строки в strings.xml

Что показала сборка

Находки

Ни одна из них не нашлась бы «на глаз» — все четыре вылезли, когда экран впервые собрали из ноды и сняли.

Compose не сжимает строку ниже высоты шрифта

Замер onTextLayout: стиль 30/32 даёт блок 40,67 dp вместо 32 по ноде, Manrope 20/24 — 25,67 dp на строку вместо 24. Интерлиньяж работает только вверх: с lineHeight = 100.sp высота становится ровно 100. Каждый блок толкал следующий вниз — заголовок на 2,5 dp, вопрос на 8,4, ползунок на 11. Теперь высота блока берётся из ноды, а строки центрируются в ней.

Цвет Additional/Powdery-50a в коде был непрозрачным

В проекте стоял готовый #F9F3F2, а в ноде это #F2E7E3 с альфой 0,5. Поверх белого они неразличимы, поверх фотографии и терракоты — нет. Исправлено на переменную с альфой.

23 иконки не влезают в ресурсы Android

Первая же сборка выдала STRING_TOO_LARGE: обведённые контуры Figma разбираются в тысячи кривых — ic_community_list_24 весит 87 КБ при пределе 32 767 символов, тогда как SVG-экспорт той же ноды — 1 240 байт. Ресурс молча ломается. Лечится переходом на SVG-экспорт узла, это уходит в фазу кита.

Пунктирные иконки выгружались сплошными

Три иконки «нет сердечек» — рамка пунктиром. В .fig Figma хранит для них две полосы контура, и ни одна по отдельности не равна тому, что Figma рисует. Разобрал правило (осевая линия наружу на половину толщины, целое число периодов с округлением вверх, первый штрих по центру верхней стороны, круглые стыки) и развернул штрихи в заливку: расхождение с рендером упало с 16,2 % до 2,2–5,7 %.

Остаток

Почему 2,79 %, а не ноль

Область	Причина	Класс	Что дальше
Заголовок «Новый опыт»	в макете TT Runs Trial Variable, в проекте статические файлы: контур глифов и высота строки другие	шрифты	решение Р-9 принято: 800 → ExtraBold, 540 → Medium; остаток допустим
Тексты Manrope	вес 540 в макете против Medium 500 в файле шрифта — строка на 1–2 px уже	шрифты	то же решение
🖇️ и 🕊️	набор Apple в Figma против Noto на Android	эмодзи	Р-15: смотрите увеличение выше и скажите — оставляем текстом или вывозим картинками из макета
Сегменты шкалы, 2 dp	полоска толщиной 2 dp на снимке ≈2,4 px: полпикселя сдвига красят её целиком	масштаб снимка	уйдёт на снимке ×3 с эмулятора
Границы букв везде	сглаживание текста в Compose и в Figma различается на доли пикселя	сглаживание	исключается маской текста при вердикте

Карта расхождения: красным отмечены пиксели, отличающиеся сильнее порога — Карта расхождения. Красное — отличие сильнее ΔE 6; синим залиты области, исключённые из счёта (статус-бар и полоска home iOS).

Снимок до правки высоты текстового блока: содержимое смещено вниз — Тот же экран до правки: заголовок, вопрос, тег и шкала съезжали вниз на 2,5–11 dp, потому что Compose делал строки выше, чем задано в макете.

Дальше

Что нужно, чтобы закрыть экран

Шаг	Зачем	Состояние
Снимок с эмулятора 1170×2532	Paparazzi ужимает картинку до 1000 px по длинной стороне, а критерий геометрии — 0,5 dp; на ×1,19 его не проверить	нужен эмулятор
Остальные варианты атомов	у шкалы пять состояний, у кнопки двадцать два, у прогресса шесть — на этом экране виден один; кит собирается со всеми	фаза кита
Второе состояние экрана	в ноде скрыта вторая ячейка вопроса с тремя вариантами ответа и подписью «Выбери один вариант»	в разметке помечено
Поведение	шкала должна двигаться, ответ уходить на сервер: сверяется по поведенческой карте и трассе запросов	после вёрстки
Решение по эмодзи	Р-15: текстом или картинками	за вами