Как обрезать текст в фигме

Обрезка текста в Figma — это не просто удаление символов, а управление его отображением в рамках дизайнерского макета. Это может потребоваться при адаптации интерфейса под разные размеры экранов, ограничении длины заголовков или описаний, а также при создании компонентов с фиксированными размерами. В отличие от редакторов текста, Figma не предлагает кнопки «обрезать», но предоставляет гибкие инструменты для контроля переполнения и форматирования.

Основные способы обрезки текста

В Figma нет прямого инструмента «обрезать текст» как в графических редакторах. Однако есть несколько эффективных методов, позволяющих контролировать, сколько текста отображается в макете. Каждый способ решает свою задачу: от адаптации под мобильные экраны до создания универсальных компонентов.

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

Второй — использование свойств текстового слоя. Figma позволяет задавать ограничения по ширине и высоте. Когда текст достигает границ, он либо переносится, либо обрезается. Особенно полезно сочетать это с функцией «Overflow».

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

Как выбрать правильный способ?

Выбор метода зависит от контекста. Для прототипирования и макетов, где важна точность отображения, лучше использовать автоматическое масштабирование. Если нужно показать сокращённый текст с троеточием — выбирайте overflow. А для статичных макетов подойдёт ручная обрезка.

• Ручная обрезка — быстро, но неадаптивно.
• Масштабирование — гибко, но может повлиять на читаемость.
• Overflow — визуально корректно, особенно для списков и карточек.

Автоматическое масштабирование текста

Figma предлагает мощную функцию — автоматическое масштабирование (Auto Size). Она позволяет текстовому блоку изменять свой размер в зависимости от содержания. Но есть и обратная сторона: можно заставить текст уменьшаться, чтобы вписаться в фиксированный контейнер.

Для этого перейдите в панель свойств справа. Найдите раздел «Text». Рядом с шириной и высотой вы увидите значок цепочки — это Auto Size. Щёлкните по нему и выберите один из вариантов:

1. None — ручное управление размерами.
2. Hug contents — блок подстраивается под текст.
3. Fit content — текст подстраивается под блок.

Выбрав Fit content, вы активируете режим, при котором шрифт будет уменьшаться, пока весь текст не поместится в заданных границах. Минимальный размер можно указать вручную — например, 10 px, чтобы текст не стал слишком мелким.

Настройка минимального и максимального размера

Когда вы включаете Fit content, важно установить лимиты. Figma позволяет задать:

• Минимальный размер шрифта (min font size).
• Максимальный размер (max font size).
• Минимальную и максимальную высоту текстового блока.

Например, если заголовок должен быть не меньше 16 px, укажите это значение. Если текст не влезает даже при минимальном размере, он будет обрезан — но уже с учётом всех ограничений.

Ограничение по высоте и переполнение

Ещё один способ обрезки — фиксация высоты текстового блока и настройка поведения при переполнении. Это особенно актуально для карточек новостей, описаний товаров или профилей пользователей, где нельзя позволить тексту занимать больше двух-трёх строк.

Чтобы активировать этот режим, задайте фиксированную высоту текстовому слою. Затем в панели свойств найдите пункт «Text overflow». Доступны три опции:

• Truncate — обрезает текст и добавляет многоточие в конце последней видимой строки.
• Wrap — переносит текст на новые строки (по умолчанию).
• Clip — просто обрезает без визуальных индикаторов.

Для большинства интерфейсов рекомендуется Truncate. Это стандартное поведение в вебе и мобильных приложениях. Пользователь понимает, что текст сокращён, и может нажать, чтобы прочитать полностью.

Как настроить обрезку по строкам?

Представьте, что вам нужно, чтобы описание в карточке занимало ровно две строки. Вот пошаговый алгоритм:

1. Выделите текстовый слой.
2. Установите нужный шрифт, размер и межстрочный интервал (line height).
3. Рассчитайте высоту: например, при line height = 20 px две строки займут 40 px.
4. Зафиксируйте высоту блока на 40 px.
5. Выберите Text overflow → Truncate.

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

Работа с компонентами и вариантами

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

Представьте кнопку с текстом. В одном случае там написано «Купить», в другом — «Добавить в корзину с доставкой завтра». Чтобы кнопка не растягивалась бесконечно, используйте комбинацию Auto Size и ограничений.

Создайте компонент кнопки:

• Установите фиксированную максимальную ширину.
• Включите Auto Size по вертикали (Hug contents), но ограничьте горизонтальное растяжение.
• Для текста внутри установите Fit content и min font size.
• Добавьте Text overflow → Truncate на случай крайних ситуаций.

Такой подход гарантирует, что кнопка сохранит свою форму, а текст останется читаемым.

Использование вариантов компонентов

Figma позволяет создавать варианты одного компонента — например, кнопка с иконкой, с длинным текстом, с loading-состоянием. При проектировании таких вариантов важно тестировать, как текст ведёт себя в каждом из них.

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

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при работе с текстом в Figma. Они могут привести к некорректному отображению в прототипах или сложностям при передаче макетов разработчикам.

Первая ошибка — игнорирование автоматического масштабирования. Многие продолжают вручную подгонять размер шрифта, забывая, что Figma может сделать это сама. В результате при замене текста макет ломается.

Вторая — использование Clip вместо Truncate. Clip просто обрезает текст без многоточия. Пользователь не понимает, что информация усечена. Это нарушает принципы доступности и юзабилити.

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

Экспорт и совместимость

То, как вы обрезаете текст в Figma, влияет на то, как это будет реализовано в коде. Современные CSS-свойства, такие как text-overflow: ellipsis, line-clamp и max-lines, напрямую соответствуют настройкам Figma.

При экспорте макетов в Zeplin, Avocode или напрямую в Figma Dev Mode разработчики видят параметры текста. Если вы использовали Truncate, они поймут, что нужно применить text-overflow: ellipsis и white-space: nowrap (для одной строки) или -webkit-line-clamp (для нескольких).

Однако важно помнить: Figma не экспортирует поведение автоматического масштабирования в виде CSS. Это значит, что если вы используете Fit content, разработчику нужно будет реализовать аналогичную логику через JavaScript или CSS clamp().

Экспертное мнение

По его словам, лучшие практики включают:

• Создание дизайн-систем с чёткими правилами обрезки текста.
• Использование компонентов с параметрами (variants) для разных сценариев.
• Тестирование на 150% увеличении длины текста (правило «+50% for translation»)

Он также отмечает, что Figma постепенно улучшает работу с текстом, но пока не хватает функций вроде автоматического line clamping для N строк без ручного расчёта высоты.

Вопросы и ответы

Заключение

Обрезка текста в Figma — это не просто техническая операция, а важный элемент проектирования адаптивных и доступных интерфейсов. Понимание того, как работают Auto Size, Text Overflow и компоненты, позволяет создавать макеты, которые выдерживают реальные условия использования.

• Используйте Text Overflow → Truncate для визуально корректной обрезки.
• Применяйте Fit content, чтобы текст автоматически масштабировался.
• Фиксируйте высоту блока для контроля над количеством строк.
• Тестируйте компоненты с длинными текстами и разными языками.
• Учитывайте, как настройки отразятся на реализации в коде.