💻💻 Figma догоняет Liquid Glass!

Наконец-то ответ на хайповый дизайн-апдейт Apple! Напоминаю: на WWDC25 Купертино показали Liquid Glass — динамичные стеклянные элементы с преломлением света, реакцией на контент и движение. Красота! Но...

🎨 В Figma:
— Только жалкая имитация через blur() и opacity 😒
— Дизайнеры рвали волосы: «Без шейдеров и IOR (индекса преломления) — фейк!»

🔥 Сегодняшний анонс:
Figma вводит нативную работу с преломлениями! Теперь можно реалистично симулировать блики, искажения и "толщину" стекла

Когда ждать? Фигма говорит «скоро». Надеюсь, не как даркмод в Adobe XD

😫 А вот веб — треш
Осталось запилить Liquid Glass в браузеры. Но тут вау-эффект = вау-боль:

— Преломление: Надо колдовать с IOR, светом, окружением...
— Анимации: Элементы должны плавно играть при ховерах/тапах/скроллах — как в нативке!
— Производительность: Чтобы не падало ниже 60 FPS на слабых Android

💬 Что будете делать первым с Liquid Glass в Figma? Делитесь идеями!

😈 PNG 2025: масштабный апдейт

После 22 лет ожидания — W3C выпустил третью редакцию спецификации PNG — PNG3. Формат получил мощный апдейт, актуальный для современных задач

Ключевые нововведения:

🎬 APNG — официальный стандарт: Анимированные PNG теперь — часть формата. Прямая поддержка анимации в браузерах и софте без хаков

☀️ Поддержка HDR: Возможность хранить изображения с высоким динамическим диапазоном для более ярких и контрастных картинок

📝 Надежное хранение EXIF: Стандартизированная встроенная поддержка метаданных (камера, настройки)

💻💻 Figma + Liquid Glass — в релизе

Эффект жидкого стекла теперь можно применять в своих макетах

🎛️ 5 ключевых настроек:

Light (Свет): Угол падения света (45° по умолчанию)

Refraction (Преломление): Сила "искривления" фона под стеклом. Ноль = почти обычная рамка

Depth (Глубина): Создает ощущение толщины стекла. Работает в связке с Refraction. Без преломления эффект слабый

Frost (Мороз): Фактически размытие фона! Увеличивайте, чтобы сделать стекло менее прозрачным и улучшить читаемость текста на нем

Dispersion (Дисперсия): Эффект хроматической аберрации (радужные края, как в призме). Для стильных арт-объектов

Важные нюансы:

Тестируйте на реальном фоне. Эффект зависит от того, что под стеклом. Используйте компоненты с разными бэкграундами для быстрого сравнения

Сильный refraction и низкий frost делают текст на стекле нечитаемым

P.S.: Если вы делаете макет сайта или веб-приложения — не думайте даже об этой функции. На этапе верстки разработчики вас развернут 😁