Системные элементы экрана

Источник: ds-docs/component-contracts/foundations/system-chrome.md

Строка статуса, домашний индикатор, кнопки навигации Android, системный лист «Поделиться». Всё это рисует операционная система, а не наше приложение. В макете они есть, потому что без них не видно, сколько места остаётся содержимому, — и только поэтому.

В Figma такие слои подписаны заглавными: SYSTEM Status Bar, SYSTEM Bottom Nav Bar, SYSTEM Android Navigation, SYSTEM Activity View, SYSTEM Keyboard - iPhone, SYSTEM Keyboard – Android, SYSTEM Scroll Bar, SYSTEM Device.

Заглавные в имени — и есть признак: приставка SYSTEM значит «здесь будет элемент платформы», а не «вот наш компонент». Дизайнер ставит такой слой для удобства сборки макета: чтобы видеть экран целиком и понимать, сколько места остаётся содержимому.

Мы их не документируем. У них нет ни свойств, которые мы задаём, ни токенов, которые мы меняем, ни поведения, за которое мы отвечаем. Описать их анатомию — значит зафиксировать чужой интерфейс в момент времени и обещать разработчику, что он такой. Он не такой: он разный на разных устройствах и меняется с версией системы.

Своих контрактов у них нет. Внутри чужого дерева такой слой записывается меткой:

- path: "Basic Action/SYSTEM Bottom Nav Bar"
  kind: instance
  of: null
  local: true
  foundation: system-chrome
  size: {width: fill, height: 34}

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

Из макета мы берём одно: сколько места под них зарезервировано и где.

Что зарезервировано


`injected-safe-area-inset-top`	строка статуса: часы, сеть, батарея	сверху, до содержимого
`injected-safe-area-inset-bottom`	домашний индикатор или кнопки Android	снизу, после содержимого

Оба — невидимые распорки: корень прозрачен, внутри лежит системный слой с выключенной видимостью. На экране их нет, место они занимают. В мастерах у них проставлены готовые числа — 50 сверху, 32 снизу, — и это высота одного устройства, взятая для примера.

Число из макета в код не переносится. Реальная высота приходит от системы и меняется: у телефона с вырезом одна, без выреза другая, у Android с кнопками третья, при включённом режиме звонка четвёртая. Компонент, в котором зашито 50, сломается на первом же другом телефоне.

Что это на самом деле: отступ, а не слой

injected-safe-area-inset-top и injected-safe-area-inset-bottom — не компоненты и не слои. Это отступы, которые в готовом приложении задаёт платформа. В макете они нарисованы прямоугольниками только потому, что в Figma отступ иначе не показать.


`injected-safe-area-inset-top`	верхний	строка статуса — часы, сеть, батарея
`injected-safe-area-inset-bottom`	нижний	домашний индикатор либо кнопки навигации Android

Откуда берётся значение

React (`core-ui`)

Отступы присылает системное host-приложение — мобильная оболочка, внутри которой работает веб-часть. Она подставляет их переменными, а вёрстка просто их берёт:

padding-top: var(--injected-safe-area-inset-top);
padding-bottom: var(--injected-safe-area-inset-bottom);

Имена переменных стоят в описании самих компонентов в Figma — это не наша выдумка, а договорённость с оболочкой. Веб-часть получает готовые числа сверху и сама их не вычисляет.

Flutter

Host-приложения здесь нет и переменные из React-контракта не применяются. Отступ проставляется прямо под системный элемент — под строку статуса сверху и под домашний индикатор снизу, — а значения берутся у системы: их отдаёт сама платформа, и виджет компенсирует наезд на содержимое.

Общее для обеих платформ: число из макета в код не идёт. В макете стоит высота одного устройства, взятая для примера, — 50 сверху и 32 снизу для домашнего индикатора, 48 для кнопок Android. Настоящая высота приходит от платформы и на каждом устройстве своя.

Что писать в карточке компонента

Узел с системной распоркой остаётся в дереве — он занимает место, и без него дерево врёт. Но описывается он одной строкой и ссылкой сюда, а не своей анатомией:

<summary>◆ <code>injected-safe-area-inset-top</code> — запас сверху</summary>

- **Роль:** держит место под строку статуса; высоту задаёт система
- **Примечание:** системный запас, см. [system-chrome.md](../../foundations/system-chrome.md)
- **position:** static
- **width:** 100%
- **height:** auto
- **opacity:** 0

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

Внутренний состав системного слоя не пересказывается никогда: ни его отступы, ни его слои, ни его цвета. Они принадлежат операционной системе.

Границы

Это описание говорит разработчику, что здесь зарезервировано место переменной высоты. Как именно его получить в своей платформе — решает разработчик: у React и Flutter разные механизмы, и оба живут вне дизайн-системы.

Дизайн-система отвечает за одно: за то, что место предусмотрено и что содержимое под системные элементы не заезжает.

Источник

Описания компонентов в Figma «Astra DS (Copy)»: injected-safe-area-inset-top (40032034:16760) и injected-safe-area-inset-bottom. Разделение по платформам — договорённость команд, зафиксирована 27.08.2026.