Как сделать чб в фигме

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

Зачем переводить дизайн в чёрно-белый режим

Перевод интерфейса в чёрно-белый формат — это не просто эстетический эксперимент. Это метод анализа, аналогичный проверке черно-белого фото в фотографии: если композиция остаётся понятной без цвета, значит, иерархия, контраст и структура построены правильно. По данным WebAIM, 8% мужчин и 0,5% женщин страдают от дальтонизма. Для них цвет — не надёжный индикатор состояния элемента. Даже без нарушений восприятия, пользователи могут просматривать интерфейс на экране с низкой яркостью, в солнечном свете или с включённым режимом «экономии энергии».

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

Способ 1: Использование эффекта «Grayscale»

Самый быстрый и прямой способ — применить встроенный эффект «Grayscale» к целому слою, фрейму или странице. Для этого:

1. Выберите нужный фрейм, группу или все элементы на холсте (Ctrl+A для всего).
2. Перейдите в панель свойств справа → раздел «Effects».
3. Нажмите «Add effect» → выберите «Color Adjustments».
4. В открывшемся меню установите ползунок «Saturation» на 0%.
5. При необходимости отрегулируйте яркость (Brightness) — для улучшения читаемости текста.

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

Способ 2: Создание чёрно-белого стиля через стили цветов

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

1. Откройте панель «Styles» в левой боковой панели Figma.
2. Создайте новую категорию: «Grayscale Palette».
3. Добавьте 5–7 стилей: от чисто белого (#FFFFFF) до глубокого чёрного (#000000), с шагом 10–15% яркости.
4. Назовите их: «Gray 50», «Gray 100», … «Gray 900» — как в Material Design.
5. Замените текущие цвета в интерфейсе на соответствующие оттенки серого.

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

Способ 3: Плагины для автоматизации

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

Установить плагин: откройте меню «Plugins» → «Browse plugins» → найдите нужный → нажмите «Install». После установки запустите его через «Plugins» → имя плагина. Большинство из них работают с выделенными объектами или всей страницей.

Способ 4: Создание переключателя с компонентами

Самый профессиональный и масштабируемый способ — создать полноценный переключатель между цветной и чёрно-белой версиями. Он работает как «тёмная/светлая» тема, но для отсутствия цвета.

1. Создайте компонент: например, «Theme Toggle» — прямоугольник с текстом «Color / B&W».
2. Сделайте два варианта: один с цветами, другой — с оттенками серого.
3. Сохраните как компонент с вариантами (Variants).
4. Вставьте его в каждый экран или фрейм, где нужен переключатель.
5. Свяжите его с фреймами через «Override» — при смене варианта компонента, меняется и цветовая схема всего экрана.

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

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

Даже опытные дизайнеры допускают ошибки при переходе в чёрно-белый режим. Вот основные:

• Забыли проверить текст на фоне. Серый текст на сером фоне — самая частая ошибка. Используйте инструмент «Contrast Checker» в Figma (через плагин «Stark» или встроенный в Figma 2025).
• Игнорировали иконки. Иконки без контура или с тонким обводом становятся невидимыми. Добавьте 1–2px обводку или увеличьте толщину линий.
• Применили эффект только к части интерфейса. Если эффект «Grayscale» применён только к фону, но не к кнопкам — возникает диссонанс. Проверяйте каждый элемент.
• Не сохранили исходные цвета. После применения плагина или эффекта — не сохраняйте изменения в оригинальном файле. Всегда копируйте файл перед экспериментами.
• Считают, что «всё и так читается». Человеческий глаз воспринимает серые оттенки менее точно, чем цвет. То, что кажется «достаточно контрастным», может быть нечитаемым на слабом экране.

Проверьте себя: откройте чёрно-белую версию, закройте глаза на 5 секунд, откройте — что видно чётче? Если не всё — значит, нужно улучшать контраст.

Экспертное мнение: почему это критично для доступности

Чёрно-белый режим — это не фишка для дизайнеров. Это инструмент социальной ответственности. WCAG, ISO 9241 и законодательство в ЕС и США требуют, чтобы цифровые продукты были доступны всем. Цвет — не единственный способ передать информацию. Форма, размер, положение, текст, иконки — всё это должно работать без цвета.

Не забывайте: пользователь может использовать ваш продукт на старом смартфоне, в солнечный день, с плохим зрением или с нарушениями восприятия. Чёрно-белый режим — это проверка на человечность.

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

Заключение

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

Проверка на чёрно-белый режим — это стандарт профессиональной практики. Она выявляет слабые места, которые цвет скрывает: плохой контраст, слабая иерархия, неочевидные взаимодействия. Дизайн, который работает в чёрно-белом режиме, работает в любом.

• Используйте эффект «Grayscale» для быстрого тестирования, но не как финальное решение.
• Создавайте отдельные цветовые стили для чёрно-белого режима — это масштабируемо и надёжно.
• Применяйте плагины для автоматизации, но всегда сохраняйте оригинал.
• Компоненты с вариантами — лучший способ для командной работы и постоянного тестирования.
• Чёрно-белый режим — не опция, а обязательный этап проверки доступности.