Умная анимация в Фигме (Smart Animate)

Вторая часть видео о прототипировании и анимации в Фигме. В этот раз сконцентрируемся на новом функционале Smart Animate, позволяющем создавать довольно сложные анимированные прототипы.
Сделаем анимацию перелистывания карточек, сложный переход в списке, удаление элемента через свайп, раскрытие карточки в календаре и даже сымитируем загрузку приложения.
Файл с примерами - www.figma.com/file/xPUCIIfwHSNYWZ8LpZD6Y9/Prototyping-and-Animation-Public?node-id=0%3A1

Пікірлер: 144

  • @user-op1go3cf5v
    @user-op1go3cf5vАй бұрын

    боже, это лучший урок что я видел за последнее время! спасибо, подписался)))

  • @DifferentTurn
    @DifferentTurn4 жыл бұрын

    Максим, ваш канал это просто кладезь знаний! Большое спасибо за труд :)

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

    Спасибо. Рад, что контент оказался полезен 🙂

  • @Michael_Faze
    @Michael_Faze4 жыл бұрын

    лучшего обучения про анимацию в фигме пока еще не встретил. Респект.

  • @karenrose2504
    @karenrose25043 жыл бұрын

    очень информативное и полезное видео. А главное всё по делу без лишних слов :) Отдельное спасибо за ссылку на файл!

  • @nzmath_lessons
    @nzmath_lessons3 жыл бұрын

    Спасибо большое! Урок подготовлен и реализован гораздо лучше, чем у многих профессиональных педагогов.

  • @sleepsweet450
    @sleepsweet4503 жыл бұрын

    Сколько же ты сил и знаний вкладываешь в свои видео... Я просто в восторге.. Это круче, чем какие-либо платные курсы на зарубежных платформах

  • @user-zm8mo6hi4v
    @user-zm8mo6hi4v4 жыл бұрын

    Спасибо, тебе, за то что ты делаешь! ))))

  • @lidiaborisova7216
    @lidiaborisova72164 жыл бұрын

    Потрясающе! Огромное спасибо. Сложили все по полкам!

  • @artemnikitin9696
    @artemnikitin9696 Жыл бұрын

    Фигма - очень умный инструмент. Спасибо , автор, ты хорошо обьснил работу анимации . Стоит рассказывать чуть более эмоционально, это улучшает запоминание материала и вас

  • @polinaershova699
    @polinaershova6993 жыл бұрын

    Боже мой, спасибо Вам большое! Вы просто столько знаний даете абсолютно бесплатно, за которые многие требуют каких-то баснословных денег. Ааааа спасибо тысячу раз!!

  • @user-hn3ys2dx7y
    @user-hn3ys2dx7y2 жыл бұрын

    Спасибо за урок, понятное и чёткое объяснение без воды

  • @annaustimenko6602
    @annaustimenko66022 жыл бұрын

    Спасибо огромное за ваши уроки! Это так бесценно 🙏

  • @khakimweb-1270
    @khakimweb-12703 жыл бұрын

    Очень полезное и интересное видео. Рад, что нашел Ваш канал. Однозначно лайк и подписка

  • @iliakovalski683
    @iliakovalski6834 жыл бұрын

    Большое спасибо, видео 10 анимаций в фигме из 10, разжевал так, что даже школьники поймут. Молодец. Лайк и подписка, заслужил!))

  • @leonid2713

    @leonid2713

    3 жыл бұрын

    Даже школьники...

  • @leonid2713

    @leonid2713

    3 жыл бұрын

    @@iliakovalski683 Зачем употреблять слово школьник в данной ситуации? Школьник не может размышлять/учиться? Что значит указательное 'даже' в твоём предложении, почему ты не написал, например, так: 'даже анацефал поймёт'. Тогда было бы понятно, что ты не принижаешь чьи-либо умственные способности, а говоришь о том, что материал из урока лёгок в освоении.

  • @iliakovalski683

    @iliakovalski683

    3 жыл бұрын

    ​@@leonid2713 Возможно ты прав и если ты считаешь мои слова оскорбительными для себя или кого-то другого, то я извиняюсь и постараюсь больше так не писать. В данном случае я решил не использовать грубые слова по типу тех, что ты приводишь в пример, поэтому недолго думая написал первое пришедшее на ум. Изначально я не вкладывал в него негативного контекста, который ты написал , я понимаю, что фраза "даже школьники" звучит как-будто я их принижаю, но тут я скорее хочел подчеркнуть, что даже неопытный человек сможет понять) Лайк, за то, что подметил и написал об этом)

  • @saradanato

    @saradanato

    2 жыл бұрын

    @@iliakovalski683 такой адекватный и добрый ответ🤍

  • @liberty3170
    @liberty31703 жыл бұрын

    Восторг!!! Спасибо за видео, очень помогли!!!

  • @user-qb6hs4pt8q
    @user-qb6hs4pt8qАй бұрын

    Спасибо за все эти приемы, очень полезно. Только есть нюанс. Теперь нет костылей, можно добавить два взаимодействия на один элемент. Что бы понять это у меня ушло примерно часа 3 попыток понять, "а почему не работает?"))))

  • @pletnov
    @pletnov4 жыл бұрын

    Решил перейти на Figma. А тут такой контент! Для старта самое то! Спасибо! Лайк + подписка!

  • @Anton_Ivaniuk
    @Anton_Ivaniuk Жыл бұрын

    Вот это находка! Благодарю за урок!

  • @sardorbekkholdorov8232
    @sardorbekkholdorov82323 жыл бұрын

    твои видео бомбааа плюс с файликамииии. Продолжай в том же духе, спасибо большое за качественную работу

  • @snezh_snezh
    @snezh_snezh4 жыл бұрын

    Спасибо! даже все мелкие подводные камни показали. очень полезно)

  • @kirill6281
    @kirill62812 жыл бұрын

    Супер! Спасибо тебе, очень понятная и ценная информация! 👍👍👍

  • @sashashestakova2143
    @sashashestakova21434 жыл бұрын

    Спасибо Вам большое! Очень информативное видео)

  • @botsmandead
    @botsmandead2 жыл бұрын

    Супер видосы. Фирма становиться интереснее и интереснее

  • @rocket409
    @rocket4092 жыл бұрын

    Смотрю в 2022 году, но все еще нужный и полезный урок, спасибо)

  • @marketingoptima9992
    @marketingoptima99922 жыл бұрын

    Супер! Долго искал имнно гайд в конце))

  • @ArtImmersion
    @ArtImmersion2 жыл бұрын

    препод от бога! Прохожу курс в одной школе, но учусь у вас. Спасибо !

  • @olagulakowa3227
    @olagulakowa32274 жыл бұрын

    спасибо большое за материал,хорошо объясняете,очень приятно смотреть:)

  • @ch1nedits808
    @ch1nedits8083 жыл бұрын

    Посмотрел первый урок и начинаю этот. Я в восторге

  • @user-qf6rh4gv7v
    @user-qf6rh4gv7v2 жыл бұрын

    Спасибо за ваш канал, захожу в ютуб только ради таких видео)

  • @lowcreature
    @lowcreature3 жыл бұрын

    Время идёт, фигма изменяется, урок устаревает. Скажем, в примере на 6:00 обратный переход на предыдущую карточку не работает, если в списке включен вертикальный скроллинг, потому что он конфликтует с функцией on drag. Поэтому во второй карточке нужно тащить стрелку обратного перехода не от #elements (в котором скролл), а от находящегося внутри него #Frame60. Или вот на 16:00 теперь не нужно добавлять никаких костылей, потому что появилась возможность добавить второй interaction на тот же блок - on drag стал умным и понимает, влево или вправо переходить.

  • @0xarsen

    @0xarsen

    2 жыл бұрын

    сейчас что первый совет не очень помогает, либо я не правильно делаю

  • @cristinaprevir9489
    @cristinaprevir94894 жыл бұрын

    Спасибо! Очень доходчиво обьясняешь!

  • @Pop8Tart
    @Pop8Tart3 жыл бұрын

    очень круто, спасибо большое за видео!

  • @vladfolk2418
    @vladfolk24182 жыл бұрын

    Спасибо добрый человек, только благодаря этому видео наконец подучилось задуманное

  • @alinashchebetun1000
    @alinashchebetun10004 жыл бұрын

    Очень круто, спасибо :3

  • @vmakushchenko2044
    @vmakushchenko2044 Жыл бұрын

    Спасибо тебе, добрій человек:) Понятно и доходчиво, все бы так объясняли, да еще и таким приятным голосом

  • @user-zn8uv2kl2g
    @user-zn8uv2kl2g2 жыл бұрын

    Спасибо большое! Вы большой молодец!

  • @Shaxxxxxxxx
    @Shaxxxxxxxx2 жыл бұрын

    Бомба 👍🏽🔥

  • @Sarkozuhus
    @Sarkozuhus2 жыл бұрын

    Спасибо тебе, добрый человек.

  • @innakolisnyk4522
    @innakolisnyk45223 жыл бұрын

    Шикардос!

  • @VanyaAnikin
    @VanyaAnikin2 жыл бұрын

    Максим, большое спасибо за видео! Супер полезно, круто что информация излагается поэтапно от простого к сложному, всё понятно доступным языком. Я собственно почему начал смотреть это видео, решил сделать тёмную тему для сайта компании, в которой работаю, хотя работаю я далеко не дизайнером, а аккаунт менеджером, мне не очень нравится эта должность, душа лежит к интерфейсам, и вот на майских я решил не тусоваться, а что-то предпринять для улучшения качества жизни и внутренней удовлетворённости. Конечно мне никто такого задания не давал, это я делаю абсолютно по собственной инициативе, надеюсь текущий дизайнер компании оценит анимацию, которой я научился в этом видео и предложит мне должность дизайнера, а с аккаунтингом я распрощаюсь, всем хорошего дня и отличного настроения!

  • @eklysenkova
    @eklysenkova10 ай бұрын

    Огромное спасибо за видео! Сто миллионов лайков автору!)

  • @pikarsetage
    @pikarsetage2 жыл бұрын

    Сказать годный контент-ничего не сказать Спасибо)

  • @antontitov
    @antontitov3 жыл бұрын

    Просто божественный контент!

  • @anna_anna496
    @anna_anna4964 жыл бұрын

    Спасибо огромное за видео!

  • @met4ltech
    @met4ltech4 жыл бұрын

    Спасибо большое. Хороший урок.

  • @user-no8nx7su5u
    @user-no8nx7su5u3 жыл бұрын

    Класс! Спасибо большое

  • @user-iq6bb8nx9m
    @user-iq6bb8nx9m Жыл бұрын

    Здорово ❤❤❤ Спасибо!

  • @ShineLine3
    @ShineLine3 Жыл бұрын

    Полезно. Спасибо.

  • @victoriamilko783
    @victoriamilko7832 жыл бұрын

    спасибо огромное за крутой урок!

  • @sergeymedkov8425
    @sergeymedkov84253 жыл бұрын

    Самый полезный урок!

  • @user-hg2zq9px1n
    @user-hg2zq9px1n Жыл бұрын

    Спасибо, видео очень полезно)

  • @kirillmamontov7998
    @kirillmamontov7998 Жыл бұрын

    спасибо за урок!

  • @fesfes1226
    @fesfes12263 жыл бұрын

    Спасибо, тебе хороший человек!

  • @Drampam
    @Drampam3 жыл бұрын

    Восторг!

  • @1raskumar
    @1raskumar Жыл бұрын

    афигеть.круто!

  • @killervasin86
    @killervasin86 Жыл бұрын

    Спасибо за оба видеоурока по прототипированию в Figma. Лайфхаки про костыли с прозрачными слоями - это полезно, как минимум с точки зрения знания что без костылей не обойтись при реализации некоторых сценариев.

  • @user-ez5xl1zb3e

    @user-ez5xl1zb3e

    Жыл бұрын

    в фигме уже есть возможность присваивать несколько линков одному слою

  • @user-vm2pv2zx8k
    @user-vm2pv2zx8k2 жыл бұрын

    Thank you, this was very helpful information. I did it simple and awhile.

  • @lusymikaelyan877
    @lusymikaelyan8773 жыл бұрын

    Круттттттттоооо, спасибо большое пол часа и максимум знаний (Y)

  • @aslan_akhmedov
    @aslan_akhmedov3 жыл бұрын

    Супер! Очень много узнал и сразу применил в макете. Большое спасибо! Думаю ты знаешь, что недавно вышла обнова - скролл к выбранным объектам. Было бы супер полезно узнать от тебя подробности новой фичи.

  • @alexandraborshchevskaya7958
    @alexandraborshchevskaya79583 жыл бұрын

    пушка! спасибо

  • @DigitalismSchool
    @DigitalismSchool4 жыл бұрын

    Даже не знал, что в фигма так можно. Ахринеть

  • @evgenyzaika6417
    @evgenyzaika64174 жыл бұрын

    Класс!! Очень полезно

  • @karinamag393
    @karinamag3932 жыл бұрын

    Благодарю

  • @iuliiastepanova7915
    @iuliiastepanova79154 жыл бұрын

    спасибо очень круто)

  • @alyonaale
    @alyonaale2 жыл бұрын

    Класс, утащила в закладки

  • @user-zk7wn8li7c
    @user-zk7wn8li7c2 жыл бұрын

    Спасибо! 🤗 Лайк и подписка)

  • @user-dp4wm8fx5e
    @user-dp4wm8fx5e2 жыл бұрын

    Спасибо!!!

  • @just_funk8923
    @just_funk89234 жыл бұрын

    Круто!

  • @alexbagirov2583
    @alexbagirov25834 жыл бұрын

    Огоромное спасибо! Благодоря тебе я скоро смогу сделать приложение о котром уже долго думал, но не мог начать, так как именно этих знаний не хватало. На бумажных макетах уже давно утонул.

  • @leonid_anat
    @leonid_anat Жыл бұрын

    Повторил все виды анимаций с урока, также с первой части Очень увлекательно и ахуенно Открыл фигму с новой стороны:)

  • @zoferi.v236
    @zoferi.v2364 жыл бұрын

    Пока что это самые лучшие уроки по фигме среди русскоязычных каналах.)

  • @rv4112
    @rv41124 жыл бұрын

    Спасибо!

  • @Katherine-bs1su
    @Katherine-bs1su3 жыл бұрын

    я абсолютно влюблена в ваши уроки😍

  • @user-mc3uv6qy6z
    @user-mc3uv6qy6z4 жыл бұрын

    Спасибо! Особенно за неочевидные мелочи.

  • @0xarsen
    @0xarsen2 жыл бұрын

    У тебя очень классные видео

  • @MonsterPump
    @MonsterPump3 жыл бұрын

    Спасибо за ваши уроки! Уже на неделю в них залип, очень доступно) Хотел спросить можно ли как-то экспортировать вместе с мокапом из экрана презентации? Обычный экспорт сохраняет только сам экран, а плагины не так хорошо прорисованы, как родные в экране презентации. Спасибо)

  • @jackdoe1312
    @jackdoe13124 жыл бұрын

    Делал в десктопе несколько слайдеров. Все экраны должны быть копиями первого (а уже потом иметь одинаковые имена), тогда сработала smart animate.

  • @funnymataleao
    @funnymataleao4 жыл бұрын

    Блин, спасибо огромадное за совет, как сделать переход у карточек со скрытым слоем. Всю голову поломал, никак не мог нормально анимировать Onboarding Screens. Костыль конечно, но сейчас всё получилось!

  • @ogarchie4370
    @ogarchie43704 жыл бұрын

    20:38 можно без читов, выделяете текст tap to delete или иконку жбана и от них кидаете направляющую к след. экрану

  • @user-kb6sf8dl4i
    @user-kb6sf8dl4i4 жыл бұрын

    Лучший

  • @ogarchie4370
    @ogarchie43704 жыл бұрын

    спс за файл

  • @adamkolins7283
    @adamkolins72834 жыл бұрын

    Ты лучший

  • @leonid_anat
    @leonid_anat Жыл бұрын

    Макс, спасибооооооооооооооооо

  • @oleksiioshkalo9580
    @oleksiioshkalo95804 жыл бұрын

    Приятные видео, спасибо! Подскажите пожалуйста, в конце видео есть фрагмент с hover на кнопке. В примере, меняем по сути весь frame на такой-же, но с измененной кнопкой. Но как быть если есть, например интернет-магазин, где хочется, чтобы на всех страницах сайта, все кнопки были hoover-абельные? Т.е. чтобы в Present было всё 1 в 1, как хочется чтобы сделал frontend-щик. Такое возможно? Заранее благодарен )

  • @Oswee
    @Oswee4 жыл бұрын

    Af***ij content! Spasibo shto podelilsa!

  • @SvetlanaAnatolivna
    @SvetlanaAnatolivna8 ай бұрын

    Добрый день! Огромное спасибо за уроки! В предпоследнем уроке прямоугольник, который сократили по scale, и его элементы в значениях имеют дроби. Не будет ли это недостатком и как быть верстальщику?

  • @TALGAlll
    @TALGAlll2 жыл бұрын

    Фигма оказывается не Фигня а оФигенна!

  • @AlekseyVasko
    @AlekseyVasko4 жыл бұрын

    Спасибо за урок) Как ты поверул иконку по оси Z?

  • @MsSotnya
    @MsSotnya4 жыл бұрын

    Здравствуйте. Как сделать, чтобы анимация появления текста/элемента осуществлялась автоматически при скроллинге вниз/вверх (без клика)?

  • @luminitacernev1230
    @luminitacernev12304 ай бұрын

    Спасибо большое за урок ! Мне только не понятно стало как всё-таки делать анимацию на этот график круглый на 08:40 , там с уменьшением и прозрачностью всё понятно, а вот что вы поставили на интерекщионс и какие задали тригеры не понятно. Надеюсь кто-то понял и подскажет как сделал

  • @sanbait
    @sanbait4 жыл бұрын

    может исправили уже но слайдеры из 16 минуты легко делаются нынче на изи без анимаций итд вроде. А вот как сделать что бы на 1 экране можно было выбрать несколько кнопок из списка ( больше 2) никто не в курсах (

  • @nurseitumarkulov7655
    @nurseitumarkulov76554 жыл бұрын

    Здравствуйте! можете подсказать как сделать всплывающие надписи по очереди в фирме в одном фрейме ?

  • @blueplastic2002
    @blueplastic20024 жыл бұрын

    Я в UX/UI дизайне чуть ли не полный 0. Хотел бы узнать как эту все тему с анимациями перенести например за Зиро блок или еще куда. Хочу сделать портфолио с использование смарт анимейта, но размещать его ссылкой на презентацию фигмы не вариант. Вобщем вопрос таков: куда весь этот анимационный прототайпинг пихать?

  • @aleks3388
    @aleks33883 жыл бұрын

    Спасибо огромное за видео, полузная информация! У меня вопрос : как сделать чтобы иконка перекручивалась вокруг своей оси (в концу видео с app loading) ?

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Зажмите Alt (Win) и тяните за контейнер по горизонтали или вертикали. Alt отвечает за масштабирование относительно центра. Вам нужно "утянуть" иконку "в минус", чтоб по ширине она была точно такой же, но как бы отраженной с другой стороны. Smart Animate воспроизведет проделанное вами действие и развернет иконку вокруг своей оси.

  • @aleks3388

    @aleks3388

    3 жыл бұрын

    @@disarto.digital спасибо, разобралась :)

  • @yuliamiu9530
    @yuliamiu95304 жыл бұрын

    Спасибо за урок! Можно ли сохранить анимацию в видео прямо из программы?

  • @yuliamiu9530

    @yuliamiu9530

    4 жыл бұрын

    Увидела, что есть видео про сохранение уже)

  • @alinaarakelian3763
    @alinaarakelian37633 жыл бұрын

    Спасибо большое за такие полезные видео! Можете, пожалуйства, объяснить, прототипирование и такого плана анимация это задача веб-дизанера или верстальщика?

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Продумать все взаимодействия - это задача дизайнера. Задача верстальщика воплотить это наиболее оптимальным образом.

  • @alinaarakelian3763

    @alinaarakelian3763

    3 жыл бұрын

    @@disarto.digital поняла, спасибо

  • @elenamalakhina160
    @elenamalakhina1604 жыл бұрын

    Спасибо большое. Информативно и доходчиво всё объяснил. Ты случайно не около Сан Франциско работаешь? P.S. Была бы рада получить консультацию по поводу требуемых скилов при приеме на работу. С меня кофе и плюшки.

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

    Нет, я не около SF 🙂

  • @GKlimovDesign
    @GKlimovDesign3 жыл бұрын

    Добрый день, подскажите как сделать ховер элементу при скроле так что бы когда элемент видно не полностью из за части футтера к примеру ховер не проявлял всю кнопку так как она вынесена за предел фрейма и сама является фреймом и получается наводишь на её край и он вылазит поверх все элементов

  • @user-hj8px8fs9n
    @user-hj8px8fs9n2 жыл бұрын

    Скажите пожалуйста а работает ли данная анимация для десктоп прототипирования без выбора скина устройства (хочу анимировать скрол бокового меню) причём я сделал фрейм в котором хочу анимировать скрол

  • @disarto.digital

    @disarto.digital

    2 жыл бұрын

    Конечно, для этого просто выберите в поле "Device" пункт "None" (вкладка Prototype). Чтоб увидеть эту опцию, нужно кликнуть на пустое пространство рабочей области. Т.е. не должен быть выбран ни один из объектов.

  • @xSNYPSx
    @xSNYPSx4 жыл бұрын

    можешь выложить файл куда то еще ?) не грузит по ссылке чет (((

Келесі