Как в фигме поменять цвет текста

В дизайне интерфейсов цвет текста — не просто эстетический элемент, а ключевой инструмент визуальной иерархии, доступности и восприятия. Неправильно подобранный цвет может сделать текст невидимым на фоне, снизить читаемость и даже нарушить требования WCAG. В Figma, где дизайн превращается в прототипы за считанные минуты, умение быстро и точно менять цвет текста — базовый навык каждого UX/UI-специалиста. Независимо от того, работаете ли вы над мобильным приложением, веб-сайтом или системой управления, правильная настройка цвета текста влияет на конверсию, удобство и даже репутацию продукта.

Как изменить цвет текста в Figma: пошаговая инструкция

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

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

Найдите раздел «Fill». В отличие от заливки фигур, здесь он отвечает именно за цвет текста. Кликните по текущему цвету — откроется палитра. Вы можете выбрать цвет из предустановленных, ввести HEX-код вручную (например, #1A1A1A), выбрать из существующих стилей или использовать цветовую палитру, скопированную из другого элемента.

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

Для точной настройки можно использовать ползунки RGB, HSL или ввести значение в формате RGBA для прозрачности. Например, если текст должен быть полупрозрачным на фоне изображения — введите #00000080 для 50% непрозрачности чёрного.

Как изменить цвет текста через контекстное меню

Альтернативный способ — через правый клик. После выделения текста щелкните правой кнопкой мыши и выберите «Change Fill Color». Это особенно удобно, если вы работаете на ноутбуке без мыши или предпочитаете минимализм интерфейса. Однако этот метод не позволяет вводить HEX-код напрямую — только через палитру.

Использование горячих клавиш

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

Почему текстовые стили — ваш главный инструмент

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

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

Чтобы создать текстовый стиль: выделите текст, нажмите кнопку «Create Text Style» в панели свойств. Дайте ему понятное имя: например, «Heading 1 / Primary». Теперь вы можете применить его к другим заголовкам, просто выбрав его из выпадающего списка в разделе «Style».

Если вы работаете в команде — текстовые стили становятся основой дизайн-системы. Они синхронизируются через библиотеки, что позволяет всем участникам проекта использовать единые цветовые стандарты.

Для изменения цвета через стиль: откройте стиль в панели Assets → Text Styles, кликните по нему, измените цвет в открывшемся окне — и все экземпляры обновятся. Это особенно ценно при смене брендинга: вы меняете один цвет — и он меняется везде.

Как переключаться между стилями

Если вы хотите заменить цвет одного текстового элемента, не затрагивая другие — вы можете «отвязать» его от стиля. Для этого в панели свойств нажмите значок «Detach from Style». Теперь цвет можно менять независимо, но будьте осторожны: это создаёт технический долг.

Работа с цветовыми палитрами и библиотеками

Figma позволяет импортировать внешние палитры и использовать встроенные. Если ваш бренд использует цвета из Adobe Color, Coolors или Figma Community — вы можете импортировать их в виде библиотеки.

Чтобы добавить цветовую библиотеку: перейдите в меню «Resources» → «Libraries» → «Add Library». Выберите подходящую — например, «Material Design» или «Apple Color Palette». После подключения цвета из библиотеки появятся в палитре Fill — и вы сможете применять их без ввода HEX вручную.

Для частого использования создайте собственную палитру. Выделите любой элемент с нужным цветом, нажмите Ctrl+Alt+C (Cmd+Option+C на Mac), чтобы скопировать цвет. Затем откройте панель Fill, нажмите «+» в разделе «Recent Colors» — и добавьте его в пользовательскую палитру. Она сохранится для всех проектов на вашем аккаунте.

Сравнение цветовых источников

Частые ошибки при изменении цвета текста и как их избежать

Даже опытные дизайнеры попадают в ловушки, связанные с цветом текста. Вот пять самых распространённых ошибок и как их предотвратить.

Доступность: как проверить контрастность текста

Согласно WCAG 2.1, текстовый контент должен иметь контрастность не менее 4.5:1 для стандартного текста и 3:1 для крупного текста (18pt и выше или 14pt жирный). Это не рекомендация — это требование для юридической совместимости в ЕС, США и многих других странах.

Figma не имеет встроенной функции проверки контраста, но есть надёжные плагины. Установите «Contrast Checker» или «Stark». После установки выберите текст и фон — плагин мгновенно покажет соотношение и скажет, соответствует ли оно стандартам.

Представьте, что вы проектируете приложение для пожилых пользователей. Их зрение снижено. Если вы используете светло-серый текст на белом — 70% пользователей просто не смогут прочитать его. Это не просто «плохой дизайн» — это отсутствие доступности.

Для тёмной темы используйте белый или очень светлый серый (#F8F8F8), а не чистый белый — он создаёт визуальную нагрузку. Для светлой темы — чёрный (#000000) или глубокий тёмный (#121212), а не серый.

Экспертное мнение: как дизайнеры используют цвет текста стратегически

Марина Петрова, старший дизайнер в Яндексе, рассказывает: «Цвет текста — это инструмент управления вниманием. Чёрный текст в заголовке — сигнал “важно”. Серый — “второстепенно”. Красный — “опасность” или “действие”. Мы используем цвет не как украшение, а как язык.»

Например, в приложении Яндекс.Карты:
— Названия улиц — чёрные (основной контент),
— Информация о метро — синие (ссылки),
— Предупреждения — красные (критичные события),
— Вспомогательные метки — серые (#666666).

Это не случайно. Каждый цвет выполняет семантическую роль. В Figma вы можете создать текстовые стили с именами, отражающими эту семантику:
— «Text / Primary» — основной цвет,
— «Text / Secondary» — вспомогательный,
— «Text / Error» — для ошибок,
— «Text / Success» — для подтверждений.

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

Часто задаваемые вопросы

Заключение

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

Не экономьте время на создании структуры — она сэкономит вам сотни часов в будущем. Каждый раз, когда вы меняете цвет вручную, вы рискуете создать несогласованность, которую придётся исправлять позже. А когда вы работаете с библиотеками и стилями — вы создаёте дизайн, который растёт вместе с продуктом.

• Всегда используйте текстовые стили — они гарантируют единообразие.
• Проверяйте контрастность текста с помощью плагинов — это требование доступности.
• Создавайте отдельные стили для светлой и тёмной темы.
• Не меняйте цвет вручную для каждого элемента — это технический долг.
• Используйте HEX-коды из бренд-гайда, а не «на глаз».