b-dev-mobile
312537cd8a
- Снятие токенов из Figma роли design (ocVUCYCrfFUoqYYvlcLPBF): цвета сверены — совпадают с F7Colors; типографика Raleway 14/18/20/24 (база в F7Typography есть). - F7Spacing (4dp-сетка) + F7Radius — закрывают аудитный пробел «нет spacing-токенов». - docs/DESIGN-SOURCE.md: карта страниц/секций Figma, доступ по API, процесс попиксельной вёрстки, заметка про rate-limit (точечные node-запросы). Источник — Figma (боевой forbion не трогаю). Координация mail/044. designsystem компилируется.
50 lines
3.5 KiB
Markdown
50 lines
3.5 KiB
Markdown
# Источник дизайна — Figma (попиксельная мобильная вёрстка)
|
||
|
||
Задача: мобильный клиент = мобильная версия F7 попиксельно. Источник истины — **Figma роли `design`**
|
||
(не боевой forbion; glb устарел). Координация — mail/044 (через integrator-b). Приоритет:
|
||
**Файлы → Почта → Конференции**, референс **360dp**, тема светлая.
|
||
|
||
## Доступ к Figma API
|
||
|
||
Токен — вне git: `/root/.f7cloud-keys/figma.env` (`FIGMA_TOKEN`, `FIGMA_FILE=ocVUCYCrfFUoqYYvlcLPBF`).
|
||
```bash
|
||
source /root/.f7cloud-keys/figma.env
|
||
curl -H "X-Figma-Token: $FIGMA_TOKEN" "https://api.figma.com/v1/files/$FIGMA_FILE/nodes?ids=<ID>&depth=2"
|
||
```
|
||
⚠️ **Rate limit:** глубокие сканы всей страницы (`1:90` depth≥3) ловят **429**. Работать ТОЧЕЧНО —
|
||
запрашивать конкретные node ID нужного экрана с малой глубиной. Рендер кадра в PNG:
|
||
`GET /v1/images/$FIGMA_FILE?ids=<ID>&format=png&scale=2`.
|
||
|
||
## Карта файла (страницы)
|
||
|
||
| ID | Страница |
|
||
|---|---|
|
||
| `1:90` | 🟢 Дизайн облачного рабочего места — ОСНОВНОЙ дизайн (65 секций по модулям) |
|
||
| `0:1` | Брендбук (токены: TYPOGRAPHY 1:116, цвета 97:8269) |
|
||
| `2095:46379` | ⚫️ Пробная тёмная тема (на будущее) |
|
||
|
||
Мобильные экраны — кадры **360px** (полноэкранные ~360x800), разбросаны по секциям модулей и по
|
||
верхнему уровню `1:90`. Секции: Файлы `17:4427`/`948:65419`, Почта `97:16912`/`1609:71537`,
|
||
Конференции/Встречи `4:1166`, Конференция `1002:67493`. NB: ссылка владельца `1327:29454` —
|
||
ДЕСКТОП (1440), не мобиль.
|
||
|
||
## Снятые токены (сверено с Figma)
|
||
|
||
**Цвета** — совпадают с текущим `F7Colors` (палитра снята точно ранее): Primary `#70B62B`,
|
||
Background `#FBFBFB`, Surface `#FFFFFF`, SurfaceMuted `#F5F5F5`, TextPrimary `#151515`,
|
||
TextSecondary `#808080`, Border `#E6E6E6`, PrimaryLight `#F1F8EA`.
|
||
|
||
**Типографика** — шрифт **Raleway** (medium 500 / semibold 600), шкала 14/18/20/24px
|
||
(lh 20/22/24/26). В `F7Typography` есть база; точные размеры конкретных экранов сверяются поэкранно.
|
||
|
||
**Spacing/радиусы** — раньше НЕ было токенов (аудит: ~1087 инлайновых .dp). Заведены
|
||
`F7Spacing` (4dp-сетка) + `F7Radius`. Точные значения экрана — с макета.
|
||
|
||
## Процесс попиксельной вёрстки (на экран)
|
||
|
||
1. Найти node ID мобильного экрана (360) в Figma, отрендерить PNG-эталон (scale=2).
|
||
2. Извлечь измерения: размеры/паддинги/цвета/текст-стили дочерних узлов (точечный nodes-запрос).
|
||
3. Свести к токенам (`F7Colors`/`F7Spacing`/`F7Typography`), реализовать в Compose.
|
||
4. Верификация side-by-side: PNG Figma ↔ скриншот приложения (владелец — физ.телефон + BlueStacks;
|
||
universal debug-APK со всеми ABI готов, дефолт-URL glb).
|