Цветовая палитра в духе Figma
Палитра в духе Figma - тёмный, нейтральный вид рабочего пространства: почти чёрный канвас, насыщенный фиолетовый основной цвет для выделения и тёплый оранжевый акцент для второстепенных подсветок.
Посмотрите, как палитра в духе Figma выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе Figma?
Дизайн- и прототипирующие инструменты сталкиваются с особым ограничением, которого нет у большинства другого софта: хром вокруг канваса должен оставаться тихим, потому что настоящим содержимым - тем, что человек проектирует - могут быть любые цвета. Это подталкивает такие инструменты к тёмному, нейтральному рабочему пространству с одним-двумя насыщенными акцентами, зарезервированными для состояний интерфейса вроде контуров выделения и активных инструментов, а не для декора.
Этот мокап - панель инструментов, дерево слоёв, канвас с выделенным фреймом и панель свойств - заимствует этот подход "рабочее пространство прежде всего", чтобы показать, как палитра работает в плотных функциональных панелях вокруг нейтрального канваса. Это оригинальный макет в этом духе, а не копия реального интерфейса какого-либо конкретного дизайн-инструмента или защищённого товарным знаком UI.
Ключевые визуальные характеристики
- Тёмный, почти чёрный фон канваса, на котором любой цвет дизайна читается чётко
- Узкая панель инструментов с одними иконками вдоль одного края рабочего пространства
- Панель слоёв с вложенным деревом фреймов и элементов
- Контур выделения и маркеры изменения размера в одном насыщенном акцентном цвете
- Панель свойств на противоположной стороне с числовыми полями и цветовыми образцами
Цветовые характеристики
- Тёмная нейтральная база, чтобы содержимое канваса оставалось в фокусе, а не окружающий хром
- Один насыщенный основной цвет, зарезервированный для присутствия соавторов и интерактивных акцентов
- Отдельный тёплый акцент, используемый именно для контуров выделения, маркеров и активных состояний инструментов
Типографика
- Простой, компактный системный шрифт без засечек, единообразно применяемый ко всем подписям и полям панелей
- Мелкие, плотные размеры текста везде, так как несколько узких панелей делят одну и ту же ширину
- Числовые поля (позиция, размер, радиус) оформлены табличным, почти моноширинным начертанием для быстрого сканирования
UI-паттерны
- Узкая панель инструментов с иконками вдоль одного края рабочего пространства
- Панель дерева слоёв со вложенными фреймами и элементами и переключателями видимости
- Центральный канвас с выделенным фреймом и маркерами изменения размера по углам
- Панель свойств с полями X/Y/W/H, цветовыми образцами заливки и настройками эффектов
- Небольшой плавающий курсор соавтора с именной меткой, обозначающий присутствие в реальном времени
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе Figma?
Тёмный, почти чёрный фон канваса, один насыщенный основной цвет для присутствия соавторов и акцентов, и отдельный тёплый акцент, зарезервированный для контуров выделения и активных состояний инструментов.
Это официальные цвета бренда Figma?
Нет - это оригинальный макет, вдохновлённый общим видом дизайн- и прототипирующих инструментов вроде Figma, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Почему дизайн-инструменты по умолчанию используют тёмный канвас вместо белого?
Проектируемое содержимое может быть любого цвета, поэтому нейтральный тёмный фон не конфликтует с ним и снижает утомление глаз при долгой работе - хром остаётся незаметным фоном для самой работы.
Можно ли посмотреть свои цвета в этом интерфейсе в духе Figma, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Figma вместо цветов по умолчанию.