Загрузка...

Create beautiful animation in Figma

Thread in Learning created by shafty Mar 21, 2021. (bumped May 17, 2021) 2218 views

  1. shafty
    shafty Topic starter Mar 21, 2021
    Всем привет. Сегодня я расскажу как создать красивую анимацию в Figma. Не претендую на первооткрывателя, так как все предельно просто и наверняка некоторые умеют делать сие действие
    1. Итак. Давайте создадим белый фрейм, а нем изобразим простой квадрат с текстом. Выглядить он будет примерно так:

    [IMG]

    2. Теперь нам нужно сделать дубликат фрейма, который мы сделали выше

    [IMG]

    3. Поменяем цвет кнопки на дубликате, к примеру, на черный, а так-же немного увеличим саму кнопку с зажатой клавишей Shift, по желанию можете прибавить к тексту +1 пиксель

    [IMG]

    4. Мы подошли к самому интересному, это анимация. Переходим к первому фрейму, и выбираем слой квадрата

    [IMG]

    5. С выделенным слоем квадрата, нажимаем на панель "Prototype" в правом верхнем углу

    [IMG]

    6. Панель немного изменилась, справа от надписи "Interactions" есть значок "+", нажимаем на него, под надписью "Interactions" появится слой

    [IMG]

    7. Нажимаем на слой, перед нами выскакивает панель "Interactions details", здесь мы будем настраивать анимацию

    [IMG]

    8. Нажимаем на текст "None", высвечивается список, в списке выбираем "While Hovering". Ниже появляется еще один текст "None", нажимаем на текст и выбираем "Navigate to". Справа от "Navigate to" автоматически будет выбран слой, ничего трогать не нужно. Ниже появляется заголовок "Animation", а ниже заголовка, текст "Instant", нажимаем на текст и выбираем "Smart Animate", ниже от "Smart Animate" будет настройка времени появления и настройка точки появления, ничего не трогаем. Я не буду объяснять значение каждого пункта, здесь легко можно разобраться самому. У вас должно получится так:

    [IMG]

    9. Поздравляю! Ты сделал свою первую анимацию. Теперь, при наведении на квадрат с текстом, квадрат плавно становится больше и меняет цвет. Результат(нажми) вы можете посмотреть, а так-же сохранить для более подробного изучения

    [IMG]
    Итоги урока

    Согласитесь, за 2 минуты мы оживили кнопку и сделали ее немного красивее. Экспериментируйте, изучайте, ведь анимировать можно все что угодно

    Буду рад ответить на любые вопросы
    [COLOR=rgb(144, 144, 144)]Telegram - @thisdye[/COLOR]

    Пишите свое мнение в комментариях. Спасибо за внимание!
     
  2. 1ls
    1ls Mar 21, 2021 gold rain 138 Mar 27, 2019
    Спасибо, как раз изучаю фигму, думаю пригодится)
     
  3. ZaFFkiN
    ZaFFkiN Mar 24, 2021 Banned 683 Oct 13, 2020
    Благодарачка, познавательный урок)
     
  4. Maust
    Maust Mar 29, 2021 Везде не успеть 780 Jul 13, 2018
    Для тех кто начал работать в фигме будет годно
     
  5. Flxsh
    Flxsh Apr 7, 2021 Banned 649 Jun 30, 2020
    Полезно, но мне кажется я где-то видел подобный урок
     
  6. экстази_inactive3906157
    ребята, для дурака. Обьясните, где скачать Фигму, есть ли кряки? Или как. Или там онли онлайн версия
     
  7. KASURA_inactive264082
    Спасибо, давно хотел сделать анимацию
     
Loading...
Top