TGViewer
Channel Public Channel
Концепты интерфейсов

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

@conceptui

Впечатляющие и взрывающие мозг дизайн-решения, а также просто хорошие паттерны и приёмы каждый день
Subscribers
2.98K
Photos
103
Videos
470
Links
583

Showing posts older than #777 · Back to latest

Older Posts 20 shown
Post #754 1.63K
Как передавать анимации в разработку?

В 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-эффектов.

🖼️ Концепты интерфейсов
  • 👍 5
  • ❤ 1
Post #753 1.52K
В фигме такую анимацию сделать не получится 😭

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

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

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

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

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

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

🖼️ Концепты интерфейсов
  • ❤ 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →