Сплошные vs прозрачные цвета в UI-дизайне

Я посмотрел сотни цветовых систем, и у большинства возникает одна и та же проблема

В светлой теме тени помогают передать уровни (elevation).

В тёмной теме тени почти не видны, поэтому используют более светлые фоновые слои.

Пока всё логично. Но вот в чём проблема:

Элементы переднего плана (бейджи, алерты, кнопки) обычно делаются со сплошными цветами.

А значит…

Они выглядят по-разному в зависимости от фона, на котором находятся.

❌ Один и тот же компонент → разный внешний вид на разных уровнях elevation

Поэтому я попробовал другой подход:

Использовать прозрачные цвета для foreground-компонентов вместо сплошных.

Результат:
Они адаптируются к фону и выглядят более консистентно на разных уровнях.

Это небольшое изменение, но оно делает систему более целостной, особенно в тёмной теме.

Интересно, вы пробовали использовать прозрачные цвета в своих дизайн-системах?

С какими минусами сталкивались? 🤔

👉 @PortalToDesign

Обзор 5 крутых плагинов для Figma, которые можно использовать в создании дизайна.

👉 @PortalToDesign

Это точно..

👉 @PortalToDesign

Contrast Ratio — онлайн-инструмент для проверки контрастности цветов

👉 @PortalToDesign

4 шаблона композиции для дизайна первого экрана.

👉 @PortalToDesign

Как же часто так бывает..

👉 @PortalToDesign

Воспроизведение видео прямо на странице станет доступно уже на следующей неделе

👉 @PortalToDesign

Когда прошёл все этапы дизайн-процесса и наконец сидишь над имплементацией

👉 @PortalToDesign

Полезный лайфхак для Figma, который позволяет быстро скопировать стили из одного проекта в другой.

👉 @PortalToDesign

Совет по UI-дизайну: называй цвета по их роли, а не по внешнему виду.

Если токены называются как цвета (blue-500, grey-100), непонятно, где их применять. Лучше давать имена по назначению.

Простая структура:
[element.tone.emphasis.state]

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

Можно углубляться до компонентных токенов, но чаще это добавляет сложность без выигрыша в ясности.

👉 @PortalToDesign

Figma: дизайн → код, код → дизайн — разбор

Поговорили с командой Figma, чтобы понять, как это устроено под капотом.

В статье разбирается: почему очевидные подходы не работают, как MCP это решает и какие инженерные проблемы остаются.

Читать полностью: https://blog.bytebytego.com/p/figma-design-to-code-code-to-design

👉 @PortalToDesign

Я смотрю на свой дизайн, разрушенный правками клиента

👉 @PortalToDesign

Несколько советов, которые помогут сделать твой дизайн чище.

👉 @PortalToDesign

Imagen3D — ещё один сайт, который создаст 3д модель по вашему фото.

👉 @PortalToDesign