Масштабирование типографии

При событие Typo Scale в интерфейсе компоненты Astra DS, Astra Fintech UI, Products UI могут иметь вид Scale собранный под крупный шрифт.

Как понять, что компонент или страница не справляется. Поставьте локальную коллекцию Typo Scale на ×1,5. Вид Scale нужен, если контент не влезает или структура компонента ломается. Будем использовать только два вида Base и Scale, промежуточных у нас нет.

Границы переключений

Видов два, промежуточных нет: ×1,2 и ×1,5 показывают один и тот же Scale.

Автопереключение в Figma

Токен component-type из локальной коллекции typography из Astra DS привязывается к свойству компонента Type Scale. Дальше вид меняется сам вместе с множителем.

Этот способ работать только для встроенных видов scale в компоненте.

Токен для этого и устроен: строковая переменная смыслового слоя со значением Base и Scale . Название вариантов компоненты должны быть только такими, если будет ошибка на символ и регистр переключение не будет работать.

Подробнее как переключать описано ниже.

Два способа реализации компонента

1. Встроенный вид scale в компоненте

Компонент, у которого оба вида лежат внутри и переключаются свойством Type Scale со значениями Base и Scale.

Пропсы в обоих видах одни и те же и отрабатывают одинаково; часть из них в одном из видов может быть отключена — какие именно, решают дизайнер и разработчик вместе.

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

• направление фрейма;
• порядок слоёв внутри него — слой, стоявший третьим, может стать первым;
• отступы и интервалы;
• выравнивание.

Нельзя: переименовывать слои, менять их вложенность, добавлять новые или убирать существующие.

Только при этом условии к свойству цепляется переключалка Figma, и компонент меняет вид сам.

Пример реализаций в компоненте

2. Новый компонент под scale вид

Отдельный компонент — на случай, когда послойно свести два вида в один нельзя. Слово Scale ставится в конец имени, перед суффиксом библиотеки:

Current Product AF → Current Product Scale AF

Как выбрать

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

Отдельный компонент — всегда второй выбор, а не первый.

Изменение Grid и свойств компонента

При событии, можно менять сетку верстки на страницы. Технически разработчики сами пишут логику изменения сетки и свойств компонентов при событии масштабировании.

DP Grid Layout

Дизайн-компонент DP Grid Layout помогает реализовать версии сетки и показывает одну — по системному кеглю. Что внутри каждой версии, решает команда.