homeseparatorБаза знанийseparatorВсе публикации
separatorБаза знаний

Все публикации

Новости, тренды, практика – всё здесь
preview-animation-in-ux-design.jpg

Анимации в UX. Простые советы, как прокачать интерфейс

Про анимации в UI все понятно. Они передают настроение, добавляют эстетики в интерфейс, акцентируют внимание пользователя и многое другое. А что касается UX? Как анимации влияют на юзабилити? Погнали разбираться!
Анимация
Интерфейсы
Анимация
Интерфейсы
Frame-919.png

Создаём куб в Figma и анимируем его

Для создания куба с текстурой нам понадобиться плагин Easometric и изображение, которое мы будем накладывать на куб. Давайте поэтапно разберём, как создать куб со своим изображением и анимировать его.
Figma
Анимация
Figma
Анимация

Как сделать анимацию списка в Figma

Думаете списки бывают только статические? Наверное, вы просто не анимировали их в Figma. Давайте создадим такой в этом туториале.
Figma
Анимация
Figma
Анимация
Frame-871.png

Создаём hover анимацию в Figma

В этом уроке мы научимся создавать крутую ховер анимацию для карточек. Нам понадобятся изображения и базовые навыки работы с Auto layout. Давайте поэтапно разберём, как создать такую анимацию.
Figma
Анимация
Figma
Анимация
Frame-827.png

Анимация параллакс эффекта в Figma

Для создания эффекта параллакс, нам понадобиться изображение, части которого находяться на разном расстоянии от камеры, чтобы у изображения была глубина и эффект параллакса был более красочным.
Figma
Анимация
Figma
Анимация
Frame-860.png

Как сделать анимацию карусели в Figma

Для создания карусели в Figma нам понадобятся фотографии объектов без фона. Чтобы убрать фон с фотографии, можно воспользоваться плагинами.
Figma
Анимация
Figma
Анимация
Frame-857.png

Как сделать эффект фонарика в Figma

В этом уроке мы поэтапно разберёмся, как создать свечение от фонарика у текста при ховере.
Figma
Эффект фонарика
Figma
Эффект фонарика
Frame-859.png

Создаём эффектную анимацию слайдера в Figma

Для создания эффектной анимации слайдера, нам понадобятся изображения. Можно воспользоваться бесплатными стоками, например, Unsplash или Pexeles.
Figma
Анимация
Figma
Анимация
Frame-858-1.png

Делаем интерактивный слайдер в Figma

Для создания интерактивного слайдера нам понадобятся фото, которые мы будем использовать в карточках слайдера
Figma
Анимация
Figma
Анимация
Frame-856-1.png

Делаем крутую анимацию карточек в Figma

Для создания интересной анимации карточек нам понадобятся изображения без фона (в нашем случае – это мячики).
Figma
Анимация
Figma
Анимация
Frame-846-1.png

Анимируем переключение карточек в Figma

Для создания перехода между карточками, чтобы они шли друг за другом, нам понадобятся изображения, которые будут размещены в карточках.
Figma
Анимация
Figma
Анимация
Frame-850.png

Создаём крутой слайдер в Figma и анимируем его

Для создания крутого слайдера нам понадобятся фотографии, которые будут в карточках слайдера. Можно воспользоваться бесплатными фотографиями с Unsplash или Pexeles.
Figma
Анимация
Figma
Анимация
На страницу:

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy

Nexfield Academy