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

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

Где находится информация о цвете в Figma

Figma — мощный векторный редактор, ориентированный на командную работу и точность проектирования интерфейсов. Один из ключевых аспектов дизайна — корректное использование цвета. Чтобы понять, какой именно оттенок применяется к элементу, необходимо обратиться к панели свойств, которая автоматически обновляется при выделении объектов.
Когда вы кликаете по любому слою — фигуре, тексту, иконке или группе — в правой части интерфейса активируется боковая панель. В ней отображаются все параметры выбранного элемента. Цветовые настройки находятся в блоке Paints, который включает подразделы Fill (заливка) и Stroke (обводка). Если у объекта несколько заливок, они отображаются в виде стека — сверху вниз.
Цвет может быть представлен в виде сплошного оттенка (Solid), градиента (Gradient) или изображения (Image). Для простых цветов Figma показывает код в формате HEX, а также значения в моделях RGB и HSL. Наведя курсор на цветовой квадрат, вы увидите всплывающую палитру с дополнительными опциями: изменение прозрачности, переключение между форматами и доступ к глобальным стилям.

Как проверить заливку и обводку

• Fill — основной цвет фона элемента. Может быть один или несколько. Каждый Fill можно включать/выключать с помощью глаза рядом с полем.
• Stroke — цвет и толщина контура. Особенно важен при создании иконок, рамок и UI-компонентов.
• Opacity — общая прозрачность слоя, влияет на восприятие цвета. Учитывайте её при передаче макета разработчикам.

Если цвет не отображается, возможно, он задан через стиль. В этом случае рядом с HEX-кодом будет указано название стиля, например, «Primary / Blue 500». Такие стили можно переопределить, но лучше использовать как есть — это обеспечивает согласованность дизайна.

Как использовать пипетку в Figma

Пипетка — один из самых быстрых способов узнать цвет прямо с макета. Этот инструмент позволяет захватывать любой пиксель, даже если он частично перекрыт другими слоями. Активировать пипетку можно двумя способами: через верхнее меню (значок пипетки) или сочетанием клавиш Ctrl+Alt+C (Windows) или Cmd+Option+C (Mac).
После активации пипетки курсор превращается в каплю. Наведите его на нужный участок и кликните — цвет автоматически копируется в буфер и применяется к текущему выделенному элементу. Однако важно понимать: пипетка берёт цвет с растрового отображения на экране, а не из исходных данных слоя. Это значит, что если под слоем есть тень, градиент или эффект наложения, вы можете получить смешанный оттенок.

Ограничения пипетки и как их обойти

• Не работает вне активного файла Figma — только внутри открытого проекта.
• Не различает полупрозрачные наложения: если цвет смешивается с фоном, пипетка покажет результат смешивания, а не исходный оттенок.
• Может давать неточные значения при масштабировании выше 100% из-за сглаживания пикселей.

Чтобы избежать ошибок, перед использованием пипетки:

1. Убедитесь, что нужный слой видим и не перекрыт другими.
2. Переключитесь на 100% масштаб (View → 100%).
3. Проверьте, нет ли эффектов (Effects) или масок (Masks), влияющих на отображение.
4. По возможности используйте поиск по имени стиля вместо визуального выбора.

Форматы цветов: HEX, RGB, HSL и другие

Figma поддерживает несколько систем представления цвета, и понимание их различий помогает точнее передавать данные разработчикам. По умолчанию используется HEX — шестнадцатеричный код, популярный в веб-разработке. Но вы можете переключаться на RGB (Red-Green-Blue), HSL (Hue-Saturation-Lightness) или даже LAB в некоторых случаях.
HEX-коды удобны своей компактностью: #4A90E2 — легко читаемый и стандартный формат. Однако они не дают информации о прозрачности. Для этого используется RGBA, где четвёртое значение — alpha-канал. В Figma прозрачность указывается отдельно от цвета, что упрощает управление, но требует внимания при экспорте.

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

В Figma достаточно кликнуть по цветовому квадрату в панели Fill или Stroke. Откроется палитра, где в нижней части вы увидите поля с числами. Справа от них — значок, позволяющий выбрать систему: HEX, RGB, HSL. Переключение происходит мгновенно, без потери точности.
Если вам нужно скопировать цвет в другом формате, просто щёлкните по соответствующему полю — значение автоматически копируется в буфер обмена. Это особенно полезно при работе с разными платформами: Android-разработчики часто используют ARGB, а iOS — UIColor с компонентами от 0 до 1.

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

Один из главных принципов масштабируемого дизайна — повторное использование. В Figma это реализуется через Color Styles — глобальные переменные, которые можно применять ко всем элементам. Создав один раз стиль «Text / Primary», вы можете использовать его по всему файлу, и при изменении он обновится везде.
Чтобы создать цветовой стиль:

1. Выберите элемент с нужным цветом.
2. В панели Fill кликните по значку со звёздочкой справа от цвета.
3. Введите имя стиля, например, «Accent / Green».
4. Нажмите Save — стиль появится в списке Paint Styles.

Теперь этот цвет можно применять к другим элементам через выпадающий список стилей. Это не только экономит время, но и снижает риск ошибок. Представьте: вы случайно используете #4A90E1 вместо #4A90E2 — разница минимальна, но в системе это два разных цвета. Стили исключают такую путаницу.

Общие библиотеки для командной работы

Если вы работаете в команде, подключите Shared Library — внешний файл с готовыми стилями, компонентами и текстовыми настройками. Любой участник проекта может подключить эту библиотеку и использовать единые цвета. При обновлении библиотеки все связанные файлы получают уведомление о доступных изменениях.
Это критически важно при масштабировании продукта. Например, брендовый синий цвет меняется с #3498DB на #2980B9. Без библиотеки придётся вручную искать и заменять каждый случай. С библиотекой — одно изменение в источнике, и все файлы обновляются автоматически.

Полезные плагины для анализа цвета

Figma поддерживает сторонние плагины, расширяющие функциональность. Несколько из них специализируются на работе с цветом и могут помочь быстрее определить, проанализировать или преобразовать оттенки.
Contrast — проверяет соответствие цветов стандартам доступности (WCAG). Показывает, проходит ли пара «текст-фон» по контрасту для нормального и слабого зрения. Полезно при создании адаптивных интерфейсов.
Colors — позволяет извлекать палитру из любого слоя или страницы. Плагин анализирует все используемые цвета и строит сводную таблицу. Можно экспортировать в JSON, CSV или скопировать как CSS-переменные.
Stylify — автоматически создаёт стили из выбранных цветов. Подходит для рефакторинга старых макетов, где цвета заданы напрямую, а не через переменные.

Кейс: очистка унаследованного макета

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

1. Запустите плагин Colors и соберите все уникальные цвета.
2. Отфильтруйте похожие оттенки (например, #808080 и #7F7F7F).
3. Создайте набор стилей: «Gray / 100», «Gray / 200» и т.д.
4. Замените прямые заливки на стили через поиск и замену.
5. Удалите дубликаты и задокументируйте палитру.

Теперь макет легко поддерживать, а команда работает с единой системой.

Типичные ошибки при определении цвета

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

• Игнорирование прозрачности: цвет с opacity 80% на белом фоне выглядит иначе, чем тот же цвет с opacity 100%. Разработчики могут не учесть это и применить цвет как есть.
• Смешивание форматов: использование HEX в одном месте, RGB — в другом, без统一 системы. Это усложняет поддержку.
• Отсутствие документации: цвета есть в макете, но нет описания, где и как их использовать.
• Ручной ввод значений: вместо использования стилей, дизайнер вбивает HEX-код вручную, увеличивая риск опечатки.

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

Анна также отмечает, что многие компании недооценивают важность цветовой согласованности. «Ошибка в одном оттенке может повлиять на доверие к бренду. Представьте: кнопка “Купить” на сайте — тёмно-красная, а в приложении — оранжевая. Пользователь чувствует диссонанс, даже если не может объяснить почему.»

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

Заключение

Знание того, как узнать цвет в Figma, — базовый, но критически важный навык для любого дизайнера. Будь то работа с пипеткой, анализ панели свойств или использование глобальных стилей, каждый метод имеет свои преимущества и ограничения. Главное — подходить к цвету системно, а не интуитивно.

• Цвет в Figma можно найти в панели свойств в разделах Fill и Stroke.
• Пипетка удобна, но не всегда точна — используйте её с осторожностью.
• Предпочитайте стили прямым заливкам для масштабируемости и согласованности.
• Проверяйте цвета на доступность и корректность отображения в разных средах.
• Автоматизируйте работу с помощью плагинов и общих библиотек.