Как уменьшить шрифт в фигме

В Figma изменение размера шрифта — базовая, но критически важная операция для точного позиционирования текста в интерфейсах. Уменьшить шрифт можно несколькими способами: через правую боковую панель Properties, с помощью горячих клавиш или инструмента Text на холсте. Главное — сохранять согласованность типографики в рамках проекта.

Основные способы уменьшения шрифта

Figma предоставляет гибкие инструменты для управления текстом. Уменьшение размера шрифта — одна из самых частых задач при создании макетов, будь то заголовки, подписи или подсказки. Первый и самый прямой способ — использование правой боковой панели. После выделения текстового слоя найдите поле «Font size». Оно расположено в разделе «Text» и позволяет ввести точное значение в пикселях.

Можно не только вводить цифры вручную, но и использовать стрелки вверх/вниз рядом с полем. Каждое нажатие изменяет размер на 1 px. Для более быстрого изменения зажмите Shift и кликните по стрелкам — шаг увеличится до 10 px. Это особенно удобно при переходе от крупных заголовков к мелким подписям.

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

Горячие клавиши для быстрой корректировки

Ускорить процесс помогают сочетания клавиш. Чтобы уменьшить шрифт, используйте:

1. Cmd + Shift + < — на macOS;
2. Ctrl + Shift + < — на Windows.

Каждое нажатие уменьшает размер на 1 px. При зажатом Shift шаг остаётся стандартным. Если нужно изменить сразу на 10 px, добавьте ещё один Shift (в некоторых версиях Figma это работает через Alt + стрелки, но основной метод — через символы «»).

Также можно использовать инструмент Text (T) прямо на холсте. Двойной клик по тексту активирует режим редактирования. Затем просто введите новое значение в строке свойств. Этот способ особенно удобен, когда вы переключаетесь между дизайном и правкой текста.

Работа с типографической сеткой и размерами

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

Например, типичная шкала может включать: 10, 12, 14, 16, 20, 24, 32, 48, 64 px. Такая система помогает избежать хаотичного изменения размеров и обеспечивает визуальную гармонию. Когда вы уменьшаете шрифт, всегда проверяйте, соответствует ли новое значение утверждённой шкале.

Если вы работаете в команде, сетка обычно задана в библиотеке компонентов или Design System. В таком случае перед уменьшением шрифта сверьтесь с документацией. Нарушение типографских правил может привести к конфликтам при ревью или проблемам при разработке.

Использование стилей текста (Text Styles)

Figma позволяет создавать и применять стили текста. Это мощный инструмент для масштабируемого дизайна. Например, можно создать стиль «Body Small» со значением 12 px и применить его ко всем мелким подписям.

Чтобы создать стиль:

• Выделите текстовый слой с нужными параметрами (включая размер);
• В правой панели нажмите иконку «+» рядом с выпадающим списком Text styles;
• Введите имя стиля и сохраните.

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

Совместное редактирование и сохранение консистентности

В условиях командной работы важно, чтобы все участники использовали одни и те же правила. Если один дизайнер уменьшает шрифт до 13 px, а другой — до 14, это нарушает целостность продукта. Чтобы избежать таких ситуаций, необходимо внедрять системные решения.

Первый шаг — централизация управления типографикой. Используйте Shared Libraries и Design Tokens. Figma позволяет публиковать стили текста в виде библиотек, которые затем подключаются другими членами команды. Это гарантирует, что все используют одинаковые значения.

Кроме того, можно настроить плагины для проверки соблюдения типографских норм. Например, плагин «Stylify Me» или «Design Lint» анализирует макет и выявляет отклонения от заданных стилей. Если кто-то случайно установил шрифт 15 px вместо 16 — система предупредит.

Автоматизация через переменные (Variables)

С выходом Figma Variables (на момент 2025–2026 года — стабильная функция) стало возможным связывать размеры шрифтов с динамическими переменными. Например, можно создать переменную `text-size-caption` со значением 12 и привязать её к текстовому стилю.

Преимущества такого подхода:

• Централизованное управление: изменение переменной затронет все связанные элементы;
• Поддержка тем: можно задать разные значения для light и dark режимов;
• Интеграция с кодом: разработчики получают точные значения из Figma через Dev Mode.

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

Даже опытные пользователи Figma допускают ошибки при работе с текстом. Ниже — самые распространённые проблемы и пути их решения.

Ошибка 1: Ручное изменение без проверки системы

Многие уменьшают шрифт «на глаз», не сверяясь с Design System. Это приводит к фрагментации стилей. Решение — всегда использовать Text Styles или переменные. Если нужного стиля нет — создайте его, а не оставляйте «временный» вариант.

Ошибка 2: Применение разных шрифтовых размеров для одного уровня иерархии

Например, в одном карточке подпись 12 px, в другом — 13 px. Это нарушает восприятие. Проверяйте макет с помощью плагинов или ручного аудита. Используйте компоненты: если подпись — часть компонента, она будет одинаковой везде.

Ошибка 3: Игнорирование отзывчивости

На мобильных экранах слишком мелкий шрифт может стать нечитаемым. Перед уменьшением шрифта представьте, как он будет выглядеть на устройстве с маленьким экраном. Минимальный рекомендуемый размер для основного текста — 14 px, для подписей — 11 px.

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

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

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

Заключение

Уменьшение шрифта в Figma — простая операция, но за ней стоит глубокая система принципов: консистентность, читаемость, соответствие дизайн-системе. Используя правильные инструменты — Text Styles, переменные, горячие клавиши — вы не только экономите время, но и повышаете качество своей работы.

• Всегда используйте Text Styles вместо ручного ввода размеров.
• Соблюдайте утверждённую типографскую шкалу.
• Применяйте горячие клавиши для ускорения работы.
• Проверяйте читаемость и контраст после уменьшения шрифта.
• Внедряйте переменные и библиотеки для командной согласованности.