Масштаб типографики

• Версия: 4.0.0 · Статус: объявлено, в работе · Дата: 06.10.2026
• Источник: решение команды дизайн-системы

---

Обзор

Пользователь увеличивает шрифт в настройках. Компонент, собранный под обычный текст, ломается: подпись не влезает, кнопка режет слово, строка наезжает на значок. Поэтому у компонента есть второй вид, собранный под крупный шрифт.

Проверка: поставьте ×1,5 и посмотрите на базовый вид. Второй вид нужен, если текст обрезается, элементы наезжают или вылезают за край, значок с подписью перестают помещаться рядом. Не нужен, если компонент просто стал выше и шире, а всё осталось на местах — это обычная работа автолаяута.

Множители

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

Два способа реализации

Встроенный Scale

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

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

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

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

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

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

Scale-компонент

Отдельный компонент — когда послойно свести два вида в один нельзя.

Слово Scale ставится последним словом имени, перед суффиксом библиотеки или команды:

Current Product AF  →  Current Product Scale AF

Автопереключения у такого компонента нет: токен цепляется к свойству варианта, а здесь видов в одном компоненте не два. Чем подменять инстанс — открытый вопрос, см. ниже.

Как выбрать

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

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

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

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

Токен для этого и устроен: строковая переменная смыслового слоя со значением Base, единственная в типографике со scope: ALL_SCOPES — то есть предлагается везде.

Границы

В виде Scale не меняются:

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

Обрезать текст или фиксировать высоту, чтобы Scale уложился в габариты Base, нельзя — это отменяет смысл настройки.

Состояние

Ни один компонент библиотеки вид Scale не реализует. Свойство заведено только в Section Heading под прежним именем Typo Scale со значениями True / False, и оно пустое: мастера True и False совпадают до последнего поля, то есть набор удвоен с 12 до 24 без отличий.

Предстоит:

1. Переименовать свойство в Section Heading: Typo Scale → Type Scale, True / False → Base / Scale.
2. Собрать вид Scale — либо убрать свойство, если компоненту он не нужен.
3. Пройти по библиотеке на ×1,5 и выписать, у кого ломается и каким способом это решается.

Открытые вопросы

• Чем переключать Scale-компонент. Пока ответа нет, отдельные компоненты в продукт не отдаём.
• Нужен ли вид Scale компонентам без текста, которые стоят рядом с растущим текстом.

Рядом

• Фундаменты
• Масштабирование типографии — то же правило для продуктовой команды