Про Vertical Trim в Figma
Этот материал — более развернутая версия поста из нашего Telegram-канал для дизайнеров.
Проблема. Посмотрите на первую кнопку на иллюстрации. Может показаться, что текст на ней немного сдвинут вниз. Но это не так: он выровнен строго по центру — по 24 px сверху и снизу.
Причина. Такое искажение положения текста на кнопке возникает из-за особенностей самого текста. Дело в том, что у него есть дополнительные интервалы над и под буквами. Они нужны, чтобы строки текста не слипались, когда их несколько.
Однако если текст занимает одну строку, эти интервалы создают лишнее пространство, которое мешает дизайнеру точно выравнивать его относительно других элементов. По этой же причине текст на кнопке из примера выше визуально кажется слегка смещённым вниз.
Решение. Решить проблему с лишними интервалами можно несколькими способами. Например, в нашем случае с кнопкой можно:
- уменьшить межстрочный интервал текста (line height);
- увеличить нижний внутренний отступ кнопки (padding);
- или воспользоваться функцией Vertical Trim; на этой функции остановимся подробнее.
Vertical Trim в Figma позволяет выбрать, как отображать контейнер с текстом.
По умолчанию используется стандартный режим (Standard). Но можно включить вариант Cap height to baseline. Тогда Figma автоматически убирает лишние интервалы сверху и снизу, и контейнер точно совпадает с высотой букв.
Эта функция очень полезна, если вы используете её в дизайнерских целях. Но если вы готовите проект для разработки, использовать Vertical Trim нужно с осторожностью.
Проблема в том, что свойство Cap height to baseline пока поддерживается не всеми браузерами. Например, его не поддерживает Firefox. Поэтому перед использованием данного свойства в Figma обязательно обсудите этот момент с разработчиком, чтобы убедиться, что он потом сможет корректно реализовать такой способ отображения текста.