Как сделать анимацию списка в Figma
Для создания анимации списка при ховере, мы будем использовать Auto layout. В этом уроке мы поэтапно рассмотрим работу с ним.
Шаг 1
- Создаём текстовый слой.
- Дублируем его несколько раз и уменьшаем размер.
- Оборачиваем маленький текст в Autolayout (Shift+A).
Шаг 2
- Выделяем все текстовые слои и также оборачиваем в Autolayout (Shift+A).
- Выравнивание делаем вверх-влево, меняем настройки на Space between.
- Добавляем небольшой отступ ~15 сверху для маленького текста.
Шаг 3
- Дублируем весь фрейм.
- Скрываем маленький текст в первом фрейме.
- Меняем шрифт основного текста во втором фрейме.
Шаг 4
- Выделяем оба фрейма и оборачиваем в Autolayout (Shift+A).
- Меняем расстояние между фреймами на 0.
- Дублируем весь фрейм.
Шаг 5
- Меняем настройки высоты у первого фрейма с Hug на Fixed.
- Делим высоту всего фрейма на 2.
- Поставьте галочку Clip content.
Шаг 6
- Меняем настройки высоты у второго фрейма с Hug на Fixed.
- Выравнивание делаем низ-лево.
- Делим высоту всего фрейма на 2.
- Поставьте галочку Clip content.
- Добавляем второму фрейму обводку сверху и снизу.
Шаг 7
Создаём Component set из наших фреймов и связываем варианты:
- While hovering
- Smart animate
- Ease out — 300ms.
Шаг 8
Копируем первый вариант в наш дизайн, дублируем и изменяем контент.
Готово!
Крутая анимация списка готова! Такая анимация отлично подойдёт для необычной демонстрации списков или ссылок на внутренние страницы сайта.
Рекомендуем ознакомиться:
Как сделать объёмные фигуры в Figma
Для создания объёмных фигур в Фигма, нам понадобиться плагин Blend. В этом уроке мы научимся с ним работать.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
