1362 подписчика
Как выравнивать текст в сетке по базовой линии шрифта: руководство для Figma
Перевод статьи Роберта Ипсихи о том, как с помощью функции auto-layout согласовать положение базовых линий текста с сеткой и задокументировать это в дизайн-системе
Как правило, чтобы выровнять текстовые элементы по сетке, дизайнеры используют границы текстового контейнера. Но чтобы среди остальных элементов дизайна текст выглядел более аккуратным, лучше выравнивать его так, чтобы с сеткой совпадали не края контейнера, а базовые линии текста
Проблема в том, что сделать это вручную в Figma довольно трудно. Поэтому автор нашёл решение. Он предлагает использовать компоненты на auto-layout вместо обычных шрифтовых стилей. Для этого нужно обрезать шрифт по верхней и нижней границе, а затем обернуть его в auto-layout. После этого в auto-layout можно добавить вертикальные паддинги, или внутренние отступы, и сместить текст так, чтобы его базовая линия всегда совпадала с сеткой
Макет Figma с примерами из статьи
#awd_article #awd_ui
Около минуты
5 декабря 2023