Как в фигме сделать темную тему

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

Как включить темную тему в Figma

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

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

Проверка активации темной темы

• Фон панели инструментов стал тёмно-серым (не белым).
• Текст на кнопках и в меню стал светлым (обычно #F9FAFB).
• В правом верхнем углу рядом с именем отображается значок луны (🌙), а не солнца (☀️).

Создание кастомной темной палитры

Темная тема — это не просто черный фон. Хорошо продуманная темная палитра использует глубокие серые оттенки, чтобы избежать эффекта «вакуума» и сохранить визуальную глубину. Основное правило: избегайте чистого #000000. Вместо него используйте #121212 или #1E1E1E — они мягче для глаз и лучше сочетаются с текстом.

Чтобы создать собственную темную палитру, откройте панель «Colors» в правой боковой панели. Нажмите «+» и создайте новую цветовую группу, например, «Dark Theme». Добавьте в неё 5–7 базовых цветов: фон, поверхность, текст, акцент, вторичный акцент, границы, диммированный. Не забудьте про «disabled» и «hover» состояния — они критичны для интерфейсов.

Пример базовой темной палитры

Использование цветовых переменных для темной темы

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

Перейдите в панель «Design» → «Variables» → «Color». Создайте переменную, например, «Background». Установите её значение на #121212. Затем создайте вторую переменную — «Background Light» — и привяжите её к #1E1E1E. Теперь, когда вы применяете переменную к элементу, вы не привязываетесь к конкретному HEX-коду, а ссылаетесь на логическую роль.

Как создать темную и светлую версии переменных

1. Откройте «Variables» в панели Design.
2. Нажмите «Create variable» → выберите тип «Color».
3. Назовите переменную, например, «Primary Background».
4. Нажмите «+ Add value» и добавьте значение для темной темы (#121212).
5. Создайте второй вариант — «Light» — и назначьте #FFFFFF.
6. В свойствах элемента выберите эту переменную вместо фиксированного цвета.

Теперь, если вы переключите тему в Figma (в настройках профиля), переменные автоматически подхватят соответствующее значение — если вы настроили их через «Theme» в редакторе переменных. Это основа масштабируемой системы дизайна.

Компоненты и библиотеки для темной темы

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

Создайте основной компонент «Button». Затем, удерживая Alt, скопируйте его и измените цвет фона на темный. Нажмите «Create variant» и назовите его «Dark». Теперь у вас есть два варианта: Light и Dark. Когда вы используете этот компонент в макете, вы можете переключать тему прямо в инспекторе — без необходимости пересоздавать элементы.

Рекомендуемые компоненты для темной темы

• Кнопки с hover и active состояниями
• Поля ввода с фокусом и ошибкой
• Навигационные меню (сайдбар, табы)
• Карточки с тенью и границей
• Таблицы с чередующимися строками
• Модальные окна и попапы

Храните эти компоненты в отдельной библиотеке, например, «Dark Theme Kit». Делитесь ею с командой — это ускорит разработку и обеспечит единообразие. Не забудьте обновлять библиотеку при изменении палитры — все ссылки на переменные автоматически обновятся.

Частые ошибки при настройке темной темы

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

• Использование чистого черного (#000) — создаёт ощущение «вакуума», ухудшает читаемость текста и вызывает напряжение глаз.
• Несоблюдение контрастности — текст #CCCCCC на фоне #1E1E1E не проходит WCAG 2.1. Минимум 4.5:1 для обычного текста, 3:1 для крупного.
• Игнорирование состояний — disabled, hover, focus — в темной теме должны быть иначе оформлены, чем в светлой.
• Смешивание темных и светлых компонентов — если в одном макете есть кнопки с разными темами, это выглядит как баг, а не фича.
• Неиспользование переменных — ручная настройка цветов в каждом элементе превращает дизайн в костыль.

Темная и светлая темы: сравнение контрастности

Контрастность — ключевой фактор доступности. В светлой теме текст #333333 на белом фоне даёт контраст ~15:1 — это отлично. Но в темной теме тот же #333333 на #121212 даёт всего 2.5:1 — это недопустимо.

Используйте инструмент Figma «Contrast Checker» (в правой панели при выделении текста) или расширение «Stark» для проверки. Оптимальные пары:

• Текст: #F9FAFB на фоне #121212 → 16:1 (идеально)
• Текст: #B7B7B7 на фоне #1E1E1E → 6.5:1 (хорошо для вторичного текста)
• Акцент: #5E5CE6 на фоне #121212 → 5.7:1 (подходит для кнопок)

Представьте, что вы смотрите на экран в темной комнате. Если текст «выпрыгивает» слишком резко — глаза устают. Если слишком тускло — читать сложно. Золотая середина — мягкий, но чёткий контраст.

Реализация темной темы в команде

Одиночный дизайнер может настроить темную тему за пять минут. Команда — это другая история. Для успешного внедрения требуется системный подход.

1. Создайте единый дизайн-систему с цветовыми переменными и компонентами.
2. Зарегистрируйте её как библиотеку и подключите ко всем проектам.
3. Назначьте ответственного за обновление палитры (например, дизайн-лидера).
4. Добавьте проверку темной темы в чек-лист перед релизом.
5. Проведите короткий воркшоп для разработчиков — объясните, как переменные работают в коде (через CSS-переменные или theme tokens).

Если вы используете Figma для создания дизайн-системы, включите в неё два режима: Light и Dark. Это упростит передачу макетов разработчикам — они увидят обе версии в одном файле и смогут легко переключаться.

Заключение

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

• Темная тема в Figma включается через настройки профиля — это изменяет интерфейс, а не дизайн-файл.
• Используйте #121212 вместо #000000 для фона — это снижает визуальное напряжение.
• Цветовые переменные — обязательный инструмент для командной работы и масштабируемости.
• Проверяйте контрастность текста с помощью встроенного инструмента Figma или Stark.
• Создавайте отдельные варианты компонентов (Light/Dark) для кнопок, полей и навигации.