Как изменить цвет текста в фигме

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

Основные шаги: как изменить цвет текста

Изменение цвета текста в Figma — это простая, но многослойная задача. На поверхности она сводится к одному действию: выбору заливки (Fill) для текстового слоя. Однако важно понимать контекст: работаете ли вы над прототипом, дизайн-системой или макетом для разработчиков.
Начните с выделения текстового объекта. Это можно сделать кликом по нему на холсте или через панель слоёв слева. После этого в правой панели свойств активируется раздел «Text», где находятся все параметры шрифта, размера и цвета. Искомый параметр — «Fill» — расположен вверху, сразу под настройками шрифта.
Кликните по цветовому квадрату рядом с надписью «Fill». Откроется палитра с несколькими вкладками: выбор по цветовому кругу, ввод кода (HEX, RGB, HSL), а также доступ к сохранённым цветам и стилям. Вы можете выбрать оттенок вручную, ввести точный HEX-код (например, #FF5733) или щёлкнуть по уже определённому в проекте цвету.
Если вы работаете в команде, крайне важно использовать единые цветовые значения. Ручной подбор приводит к расхождениям: один дизайнер может использовать #4A90E2, другой — #4B91E3. Такие мелкие различия нарушают консистентность интерфейса.

1. Выделите текстовый фрейм или блок.
2. Перейдите в правую панель свойств.
3. Найдите параметр Fill и нажмите на цветовой квадрат.
4. Выберите нужный цвет вручную, по коду или из библиотеки.
5. При необходимости закрепите цвет как стиль для повторного использования.

Работа с прозрачностью

Цвет текста может быть не только сплошным, но и полупрозрачным. Для этого в том же окне выбора цвета используйте ползунок Opacity или введите значение в процентах. Например, 80% — стандартная прозрачность для второстепенного текста (подсказки, плейсхолдеры).
Прозрачность особенно важна при работе с тёмными темами. Текст с 100% непрозрачностью на тёмном фоне может быть слишком резким. Снижение opacity до 85–90% делает восприятие комфортнее.

Режимы выбора цвета в Figma

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

• Color picker — классический выбор по цветовому кругу и яркости.
• HEX — шестнадцатеричный код, самый распространённый в веб-дизайне.
• RGB — красный, зелёный, синий; используется в экранах.
• HSL — оттенок, насыщенность, светлота; удобен для тонкой настройки.
• Variables — подключение переменных (доступно в новых версиях Figma).

Для точного соответствия брендбуку лучше всего использовать HEX-коды. Они однозначно определяют цвет и легко передаются разработчикам. Если вы получили от маркетолога цвет «корпоративный синий — #2C3E50», просто вставьте его в поле HEX.

Eyedropper: пипетка в Figma

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

Текстовые стили и их применение

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

1. Настройте текст так, как он должен выглядеть (цвет, шрифт, размер).
2. Откройте панель свойств и найдите параметр «Text style».
3. Нажмите значок + и введите имя стиля, например, «Heading/H1/Dark».
4. Сохраните. Теперь этот стиль будет доступен во всём файле.

После создания стиля вы можете применять его к любым текстовым блокам. При этом, если вы позже измените сам стиль (например, поменяете цвет), все экземпляры обновятся автоматически.

Локальные vs глобальные изменения

Если вы изменили цвет текста вручную после применения стиля, Figma покажет значок «локального переопределения» — маленький кружок в углу параметра. Это означает, что данный элемент больше не полностью следует стилю.
Чтобы вернуть синхронизацию, нажмите на значок и выберите «Reset to Style». Это вернёт цвет (и другие параметры) к значениям стиля.

Переменные в Figma: современный подход к цвету

С выходом переменных в Figma (2023–2024) изменился подход к управлению цветами. Теперь вместо статических значений можно использовать динамические переменные, которые можно подключать к тексту, фигурам, эффектам и даже к другим переменным.
Переменные позволяют:

• Создавать темы (светлая/тёмная).
• Менять цвет всей системы одним кликом.
• Связывать цвет текста с состоянием компонента (например, error, success).

Чтобы использовать переменную для цвета текста:

1. Перейдите в панель «Design System» (значок кубика в левом нижнем углу).
2. Создайте новую переменную типа «Color».
3. Назовите её, например, «Text/Primary».
4. Назначьте значение (HEX, RGB и т.д.).
5. Вернитесь к текстовому слою, откройте Fill и выберите переменную из списка.

Теперь, если вы измените значение переменной «Text/Primary» с #212121 на #FFFFFF, весь текст, привязанный к этой переменной, автоматически обновится.

Условные переменные и режимы

Figma поддерживает условные переменные — например, цвет может меняться в зависимости от режима (light/dark). Это особенно ценно при проектировании адаптивных интерфейсов.
Создайте переменную «Text/Primary» и добавьте два режима: «Light Theme» (#212121) и «Dark Theme» (#FFFFFF). Подключите её к тексту — и при переключении режима цвет будет меняться автоматически.

Распространённые ошибки и как их избежать

Даже простая операция — изменение цвета текста — может сопровождаться типичными ошибками, особенно у новичков.

Ошибка 1: Ручной ввод без проверки

Многие дизайнеры вводят HEX-коды вручную, но допускают опечатки. Например, #3498db вместо #3498DB — технически одно и то же, но в системе контроля версий это может выглядеть как изменение.
Решение: всегда сверяйте код с брендбуком. Лучше — используйте стили или переменные.

Ошибка 2: Игнорирование контрастности

Цвет текста должен обеспечивать достаточную контрастность с фоном. По стандарту WCAG 2.1 минимальный уровень контрастности для обычного текста — 4.5:1.
Figma не проверяет контраст автоматически, но вы можете использовать плагины, такие как «Contrast Checker» или «Stark», чтобы протестировать сочетание цветов.

Ошибка 3: Отсутствие документации

Если вы создаёте дизайн-систему, но не документируете, где какой цвет используется, команда теряет ориентиры.
Решение: создайте страницу «Typography» в Figma, где покажите все текстовые стили с примерами использования.

Экспертные рекомендации

При работе с цветом текста в Figma руководствуйтесь следующими принципами:

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

Автоматизация — ключ к масштабируемости. Чем больше проект, тем выше цена ошибки. Переменные и стили снижают когнитивную нагрузку и позволяют сосредоточиться на дизайне, а не на рутине.

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

Заключение

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

• Цвет текста задаётся через параметр Fill в панели свойств.
• Для точности используйте HEX-коды или пипетку.
• Текстовые стили позволяют стандартизировать оформление.
• Переменные — современный способ управления цветом с поддержкой тем.
• Всегда проверяйте контрастность и документируйте решения.