Жалюзи

🖼️ Концепты интерфейсов

Превратить всё в марки

Попробовать можно тут figmatelia.figma.site

🖼️ Концепты интерфейсов

Концепт визуализации Siri

🖼️ Концепты интерфейсов

Задание для разблокировки приложения: например, прочитать одну страницу книги

🖼️ Концепты интерфейсов

Сворачивание недельного графика

🖼️ Концепты интерфейсов

Многоуровневый таббар

🖼️ Концепты интерфейсов

Удаление с помощью жеста Pinch

🖼️ Концепты интерфейсов

Интерактивное содержание в виде маршрута самолета

🖼️ Концепты интерфейсов

Дополнительная кнопка для обновления в кнопках управления окном

🖼️ Концепты интерфейсов

Переключение между часами, компасом и секундомером

🖼️ Концепты интерфейсов

В фигме такую анимацию сделать не получится 😭

Анимации с искажениями интерфейса, liquid-эффектами, шейдерами, морфингом элементов, 3D-поворотами интерфейса,сложными масками и переходами можно создавать в After Effects.

Именно в этой программе создаются те самые ролики интерфейсов, которые вы видите на Dribbble, Behance, Telegram и в рекламе продуктов.

На курсе Анимация интерфейсов с нуля:

📱 освоите After Effects
🖥 научитесь анимировать UI
😮 сможете делать такие же ролики для портфолио и клиентов

🔥 Сегодня действует скидка 25% — до конца дня.

Если давно хотели начать делать интерфейсную анимацию — это лучший момент.

🖼️ Концепты интерфейсов

Как передавать анимации в разработку?

В UI-дизайне есть несколько инструментов для анимации, но они решают разные задачи. Поэтому и передаются разработчикам по-разному.

📱 Figma

В Figma можно сделать базовую прототипную анимацию: переходы между экранами, появление элементов, простые движения. Это помогает показать логику интерфейса и поведение экранов.

Но передать такую анимацию напрямую в разработку нельзя — она служит визуальным референсом, а разработчики реализуют её вручную в коде.

📱 After Effects

After Effects используется для проектирования и презентации анимации. В нём создают сложные motion-эффекты, показывают идею движения интерфейса, делают ролики для портфолио, презентаций и маркетинга.

Передавать такую анимацию в разработку напрямую сложно: чаще всего используют Lottie, но многие эффекты (blur, distortion, displacement и т.п.) там не поддерживаются.

Поэтому After Effects — это больше инструмент дизайна и демонстрации анимации, а не её прототипирования для приложения.

🔥 Сегодня до конца дня действует скидка 25% на мой курс Анимация интерфейсов с нуля. В нём учу делать анимацию в After Effects.

⌛️ Rive

Rive, наоборот, создавался именно для анимаций, которые сразу работают в продукте. Анимация экспортируется в файл .riv, который разработчики подключают в iOS, Android, Web или Flutter. Благодаря state machine интерфейсные анимации можно управлять прямо из кода.

Но возможности визуальных эффектов в Rive ограничены, поэтому он подходит больше для интерактивных UI-анимаций, чем для сложных motion-эффектов.

🖼️ Концепты интерфейсов

Анимация шрифта Брайля в формате Unicode ⠿

🖼️ Концепты интерфейсов

Кастомное выделение текста

🖼️ Концепты интерфейсов

Выделение текста с помощью «щипка» и расширение/сжатие его с помощью ИИ

🖼️ Концепты интерфейсов

Отправка самолетика в любую точку мира

🖼️ Концепты интерфейсов

Удаление и отмена происходят как рассыпание текста

🖼️ Концепты интерфейсов

Анимация раскрытия деталей из кнопки

🖼️ Концепты интерфейсов

Кастомная тень от пальца на экране

🖼️ Концепты интерфейсов

Анимация перехода к просмотру кода

🖼️ Концепты интерфейсов

Трекер настроения

🖼️ Концепты интерфейсов