22% пользователей, у меня к вам есть много вопросов

👉 @PortalToDesign

Очень распространённая ошибка в карточке товара: ограничение количества вводимых символов.

Правильный подход — ограничивать отправку, а не ввод, давая пользователю пространство для размышлений и исправления ошибок.

Напоминаю: A — это неверный отрицательный пример, а B — правильный.

Один знакомый добавил, что китайский ввод — тоже важная причина: такие языки, как пиньинь, где есть подсказки слов-кандидатов, требуют дополнительного места для символов.

👉 @PortalToDesign

Совет по Design Engineering:

Одно CSS-свойство отвечает за большинство уродливых анимаций раскрытия.

Это height: auto.

Замените его на: grid-template-rows: 0fr → 1fr;

👉 @PortalToDesign

Поддерживайте единообразие эффектов фокуса.

👉 @PortalToDesign

Совет: не каждая ошибка требует сообщения. Иногда достаточно намёка.

👉 @PortalToDesign

🎨 Paper Shaders теперь полностью open source и бесплатны

Авторы проекта открыли исходный код Paper Shaders и сняли ограничения на использование.
Теперь на их основе можно:
✦ создавать плагины, библиотеки и шаблоны;
✦ разрабатывать сайты и приложения;
✦ делать плагины для Figma;
✦ использовать в коммерческих проектах и даже перепродавать собственные решения.

По словам разработчиков, это только начало — они продолжают развивать проект и уже работают над новым поколением Paper Shaders.

https://shaders.paper.design/

👉 @PortalToDesign

Когда сеньор дизайнер проверяет твой файл

👉 @PortalToDesign

Open-source библиотека motion-эффектов — Kinetics теперь содержит 99 анимаций.

- CSS + React версия
- Промпт-версия для вашего AI-кодинг-агента

http://kinetics.colorion.co

👉 @PortalToDesign

scroll-padding — недостающая часть для чистых скролл-затуханий. Держит элементы видимыми и кликабельными.

👉 @PortalToDesign

Компонент загрузки файлов — в действии.
Прогресс в реальном времени, возможность поставить загрузку на паузу и возобновить её, а также корректные переходы между состояниями — от начала до завершения. Именно так должен быть реализован UX загрузки файлов.

👉 @PortalToDesign

Я постоянно использую 60%-ное сглаживание углов в стиле Apple. Но каждый раз, когда я пытаюсь объяснить это Codex или Claude Code, они часто понимают меня неправильно. Поэтому я нашел навык (skill), который может использовать любой желающий со своими ИИ-агентами:

npx skills add gabrielobholz/corner-smoothing-skill

Теперь мне достаточно просто сказать:

«Создай прямоугольник с радиусом 32 и сглаживанием 60».

И я получаю именно ту форму, которую имел в виду.

👉 @PortalToDesign

Что за хрень: кому вообще приходит в голову использовать Unicode вот так?

👉 @PortalToDesign

Смотри: Вот как избежать хаоса с hover-эффектами.

👉 @PortalToDesign

Что??? 🤣

👉 @PortalToDesign

В Figma теперь можно зацикливать дорожки свойств (Property Tracks) на таймлайне Motion.

Для этого щёлкните правой кнопкой мыши по любой дорожке свойства и выберите "Loop Track".

Также к таким дорожкам можно привязываться (snap), удерживая Shift, либо при перетаскивании конца области воспроизведения (Playback Area).

👉 @PortalToDesign

Вот почему нативные меню ощущаются намного удобнее, чем кастомные.

Prediction Cone (или Safe Triangle) — это невидимая область, которая не позволяет подменю закрыться, когда вы ведёте курсор по диагонали к вложенному меню.

Красивое решение. 👏

👉 @PortalToDesign