19757
Присоединяйтесь к нашему каналу и погрузитесь в мир дизайна Cсылка для друзей: https://t.me/+kH_SR315BCk2YjUy Связь: @devmangx РКН: https://clck.ru/3Foc9k
С помощью ИИ и Three.js можно просто создавать красивые 3D-миры кодом.
Вот мой рабочий процесс ↓
1/
Сначала я описываю ИИ мир, который хочу создать.
Не только то, как он должен выглядеть, но и:
• атмосферу
• композицию
• взаимодействия
• анимацию
• уровень реализма
• что должно генерироваться процедурно, а для чего нужны внешние ассеты ↓
2/
Затем я прошу ИИ определить подходящие технологии.
В зависимости от концепции это могут быть:
Three.js
GLSL / TSL
GSAP
постобработка
процедурная геометрия
системы частиц
физика и анимация
Разработчик Эрик Лу придумал Ghost Font — шрифт, который могут прочитать люди, но не нейросети.
На самом деле это не совсем шрифт, а способ кодирования текста в анимированном видео с движущимися точками. Точки, из которых состоят буквы, движутся в одну сторону, а точки фона — в другую.
Наш мозг легко улавливает это движение и быстро складывает его в буквы. Поэтому человек практически сразу понимает текст.
А вот ИИ-модели разбивают видео на кадры, анализируют их как отдельные изображения и пытаются восстановить смысл. Но в каждом отдельном кадре букв нет.
При этом для нейросетей также добавляется «ложный текст», который они уже могут прочитать. Это служит дополнительной ловушкой для ИИ.
Даже самые мощные ИИ-модели Fable и GPT Sol 5.6 Ultra не могут прочитать настоящее сообщение.
Вы также можете [написать собственное послание] другу.
👉 @PortalToDesign
Рисуем свет сквозь ребристое стекло и изучаем паттерн отражения (Reflection Pattern) в Figma.
👉 @PortalToDesign
Вау. Просто подборка кинематографичных hero-секций.
https://openhero.art/
👉 @PortalToDesign
Новый навык /apple-design поможет применять принципы дизайна Apple на практике
Появился новый навык /apple-design, основанный на материалах конференции WWDC от Apple. Его автор изучил лучшие доклады о дизайне и собрал 17 ключевых принципов дизайна и анимации, которые лежат в основе пользовательского опыта продуктов Apple.
👉 @PortalToDesign
Сайдбар для любого продукта.
Посмотрите, как он адаптируется от CRM до HR и DeFi: плавно переключается между полноценной панелью с подписями и компактной вертикальной панелью с иконками, поддерживает сгруппированную навигацию и показывает тултипы в свернутом режиме.
👉 @PortalToDesign
Вот почему нативные меню ощущаются намного удобнее, чем кастомные.
Prediction Cone (или Safe Triangle) — это невидимая область, которая не позволяет подменю закрыться, когда вы ведёте курсор по диагонали к вложенному меню.
Красивое решение. 👏
👉 @PortalToDesign
Что за хрень: кому вообще приходит в голову использовать Unicode вот так?
👉 @PortalToDesign
Компонент загрузки файлов — в действии.
Прогресс в реальном времени, возможность поставить загрузку на паузу и возобновить её, а также корректные переходы между состояниями — от начала до завершения. Именно так должен быть реализован UX загрузки файлов.
👉 @PortalToDesign
Подборка премиальных цветов для твоих проектов.
👉 @PortalToDesign
Когда сеньор дизайнер проверяет твой файл
👉 @PortalToDesign
Совет: не каждая ошибка требует сообщения. Иногда достаточно намёка.
👉 @PortalToDesign
Зачем летом вспоминать про снег, ёлки и гирлянды? Так потому что готовить магию декабря все начинают задолго до морозов.
В новой статье на Хабре — как в 2ГИС переосмыслили новогодний слой. Если вы продуктовый дизайнер и ищете способ наладить совместную работу между дизайном и производством, этот кейс вам точно пригодится.
Другие инженерные инсайты от 2ГИС → в Telegram-канале RnD
Быстро и просто анимируем иконку в Figma Motion.
👉 @PortalToDesign
Необычным образом стилизуем текст с помощью новых инструментов в Figma.
👉 @PortalToDesign
А это курируемая коллекция готовых промптов для создания впечатляющих лендингов и мобильных приложений: https://motionsites.ai/
Просто копируйте, вставляйте и запускайте 🦍
👉 @PortalToDesign
Некоторые из моих любимых UI-библиотек:
NumberFlow — для анимации чисел.
input-otp — для полей ввода одноразовых кодов (OTP).
Liveline — для графиков в реальном времени.
Leva — для создания настраиваемых GUI.
cmdk — для командных меню (command menu).
Virtuoso — для виртуализации списков.
dnd kit — для реализации drag-and-drop.
Sonner — для toast-уведомлений.
👉 @PortalToDesign
Figma опубликовала AI Report 2026 — исследование о том, как искусственный интеллект меняет процессы разработки цифровых продуктов. Главный вывод отчета: AI перестает быть инструментом для отдельного специалиста и становится основой совместной работы команд.
Несколько интересных цифр. Уже 41% специалистов считают, что AI заметно изменил командную работу. Два года назад такого мнения придерживались всего 7%. Дизайнеры всё чаще участвуют в разработке: за год этот показатель вырос с 21% до 41%. Разработчики, в свою очередь, всё активнее вовлекаются в дизайн — с 44% до 60%. При этом 76% респондентов выполняют как минимум половину своей работы прямо на общем canvas, а 60% проводят там большую часть рабочего времени.
В Figma считают, что с развитием AI роль дизайна становится только важнее. Генерировать интерфейсы, код и контент становится всё проще, однако именно люди по-прежнему принимают ключевые решения: что вообще стоит создавать, как продукт должен работать и какие компромиссы выбрать. По данным исследования, 90% участников считают, что значимость дизайна не снизилась с приходом AI, а почти шесть из десяти уверены, что она даже выросла.
Ещё один важный вывод отчета касается внедрения AI в компаниях. Наиболее успешными оказываются организации, где изменения происходят одновременно снизу — по инициативе команд, и сверху — при поддержке руководства. В этом случае AI становится частью общих процессов компании, а не набором личных приёмов отдельных сотрудников.
👉 @PortalToDesign
В Figma теперь можно зацикливать дорожки свойств (Property Tracks) на таймлайне Motion.
Для этого щёлкните правой кнопкой мыши по любой дорожке свойства и выберите "Loop Track".
Также к таким дорожкам можно привязываться (snap), удерживая Shift, либо при перетаскивании конца области воспроизведения (Playback Area).
👉 @PortalToDesign
Смотри: Вот как избежать хаоса с hover-эффектами.
👉 @PortalToDesign
Я постоянно использую 60%-ное сглаживание углов в стиле Apple. Но каждый раз, когда я пытаюсь объяснить это Codex или Claude Code, они часто понимают меня неправильно. Поэтому я нашел навык (skill), который может использовать любой желающий со своими ИИ-агентами:
npx skills add gabrielobholz/corner-smoothing-skill
«Создай прямоугольник с радиусом 32 и сглаживанием 60».
scroll-padding — недостающая часть для чистых скролл-затуханий. Держит элементы видимыми и кликабельными.
👉 @PortalToDesign
Open-source библиотека motion-эффектов — Kinetics теперь содержит 99 анимаций.
- CSS + React версия
- Промпт-версия для вашего AI-кодинг-агента
http://kinetics.colorion.co
👉 @PortalToDesign
🎨 Paper Shaders теперь полностью open source и бесплатны
Авторы проекта открыли исходный код Paper Shaders и сняли ограничения на использование.
Теперь на их основе можно:
✦ создавать плагины, библиотеки и шаблоны;
✦ разрабатывать сайты и приложения;
✦ делать плагины для Figma;
✦ использовать в коммерческих проектах и даже перепродавать собственные решения.
По словам разработчиков, это только начало — они продолжают развивать проект и уже работают над новым поколением Paper Shaders.
https://shaders.paper.design/
👉 @PortalToDesign
Поддерживайте единообразие эффектов фокуса.
👉 @PortalToDesign
Совет по Design Engineering:
Одно CSS-свойство отвечает за большинство уродливых анимаций раскрытия.
Это height: auto.
Замените его на: grid-template-rows: 0fr → 1fr;
👉 @PortalToDesign