Smart animation in Figma

The second part of the video about prototyping and animation in Figma. This time we will focus on the new Smart Animate functionality that allows you to create fairly complex animated prototypes.
Let's do the animation of flipping cards, a complex transition in the list, deleting an element through the skype, opening a card in the calendar and even simulate the loading of the application.
An example Figma file - www.figma.com/file/xPUCIIfwHS...

Пікірлер: 144

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

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

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

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

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

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

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

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

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

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

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • @leonid2713

    @leonid2713

    3 жыл бұрын

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

  • @leonid2713

    @leonid2713

    3 жыл бұрын

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

  • @iliakovalski683

    @iliakovalski683

    3 жыл бұрын

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

  • @saradanato

    @saradanato

    2 жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

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

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

  • @0xarsen

    @0xarsen

    2 жыл бұрын

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

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

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

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

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

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

    Бомба 👍🏽🔥

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

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

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

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

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

    Шикардос!

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

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

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

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

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

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

  • @user-ez5xl1zb3e

    @user-ez5xl1zb3e

    Жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Восторг!

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

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

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

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

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

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

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

    Благодарю

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

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

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

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

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

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

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

    Круто!

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

    Спасибо!

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

    Спасибо!!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    спс за файл

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

    Лучший

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

    Ты лучший

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

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

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

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

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

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

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

    Af***ij content! Spasibo shto podelilsa!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

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

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

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

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

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

  • @yuliamiu9530

    @yuliamiu9530

    4 жыл бұрын

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

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

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

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

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

  • @alinaarakelian3763

    @alinaarakelian3763

    3 жыл бұрын

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

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

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

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

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

  • @aleks3388

    @aleks3388

    3 жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

  • @cydddiz
    @cydddiz3 жыл бұрын

    Чума!

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

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

  • @disarto.digital

    @disarto.digital

    2 жыл бұрын

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

Келесі