Prototyping and animation in Figma

Detailed video about prototyping and animation in Figma. See how to create the types of transitions and animations most commonly used in interface design. As usual, we go from simple to complex: from the most basic tool to relatively complex examples.
In this video we focus on "classic" functionality for prototyping Figma. In the next video we will consider in details the recently released Smart Animate.
Link to the file with examples www.figma.com/file/xPUCIIfwHS....

Пікірлер: 134

  • @david_webdesigner
    @david_webdesigner4 жыл бұрын

    UI выходит на новый уровень!) не хватало мне смарт анимации !!! Спасибо больше за ролик, объяснил так что даже человек который впервые на фигму заходит поймет!)

  • @user-galimov
    @user-galimov4 жыл бұрын

    Классные видео, молодец🔥 Давай больше по Фигме))

  • @YuliiaKovalevska
    @YuliiaKovalevska2 жыл бұрын

    Поддерживаю предыдущих коментаторов! Спасибо за видео, у тебя действительно талант объяснять сложные вещи. Меня очень вдохновляет твой пример и оптимизм)

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

    Более простой и доступной подачи инфы по работе с инструментами не встречал, даже на всяких распиаренных курсах. Молодчик, для новичков должно быть огонь.

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

    Спасибо за труд! Очень доступным и понятным языком, без выпендрежа разложил по полочкам. Респект таким пацанам!

  • @andybud3885
    @andybud38853 жыл бұрын

    На платном курсе по ux сейчас учусь, там ментор объясняет в три раза хуже тебя! Ты очень крутой! Круче чем все эти инфобарыги и выскочки, которые толком ничего не зная и не умея, сразу начинают менторить. Я в этих менторствах вообще разочаровалась, решила больше никакие курсы не брать. А ты буквально спасаешь мою веру в людей и в то, что существуют еще люди, которые способны действительно помогать новичкам. Тебе не плевать на людей, ты хочешь чтобы люди действительно поняли и научились. Ты реально делаешь большой вклад в развитие дизайн комьюнити в нашей стране и по всему СНГ. Спасибо тебе за твой канал и за твою подачу! Один из лучших в ру сегменте.

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Спасибо за этот отзыв. Очень мотивирует ❤️

  • @yuriy_om
    @yuriy_om3 жыл бұрын

    Огромное спасибо! Посмотрел 10 видосов, чтобы понять как сделать выпадающий список, и только в вашем видео это реально сработало, причём делается все оказывается довольно легко)

  • @marytv2579
    @marytv25794 жыл бұрын

    Сохраню себе в заметки Ваши видео-ролики, спасибо!

  • @user-us8bh8ey6h
    @user-us8bh8ey6h3 жыл бұрын

    Всё чётко и понятно сказано, спасибо за труд

  • @Maresto1000
    @Maresto10004 жыл бұрын

    Здорово! Интересно, понятно и по сути. Большое спасибо!

  • @user-bg5yn6bu5q
    @user-bg5yn6bu5q4 жыл бұрын

    Спасибо за урок. Все понятно и по полочкам)

  • @annapit742
    @annapit7423 жыл бұрын

    Спасибо, очень хорошее видео. Доступно, понятно, хороший звук и голос приятный)))

  • @alsoualsou9
    @alsoualsou93 жыл бұрын

    просто обожаю твои уроки!!!!! спасибо!!!

  • @tianakosheleva6433
    @tianakosheleva64334 жыл бұрын

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

  • @ALEKSEIENKO
    @ALEKSEIENKO4 жыл бұрын

    ААААААААААААААгонь! Супер) Я сегодня первый раз скачал фигму и начал искать уроки) Наткнулся на твой посмотрел . Все максимально понятно и четко ! Делай больше не бросай эту тему!

  • @kuatbodikov5678
    @kuatbodikov56782 жыл бұрын

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

  • @Valeriamarus
    @Valeriamarus3 жыл бұрын

    C огромным удовольствием смотрю уже второе ваше видео. Спасибо)

  • @bon2bon41
    @bon2bon414 жыл бұрын

    супер, вы очень круто даете материал!

  • @user-eg1zi5jc2m
    @user-eg1zi5jc2m3 жыл бұрын

    спасибо за подробное объяснение! плюсов к карме и подписчиков!) подписка однозначно)

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

    Большое спасибо за такое развернутое и информативное видео!

  • @vashamater
    @vashamater3 жыл бұрын

    Отличный контент! Спасибо тебе добрый человек)

  • @annamueller2545
    @annamueller25452 жыл бұрын

    Огромное спасибо! Очень полезные видео. Вы огромный молодец

  • @MrAndy811
    @MrAndy8114 жыл бұрын

    Только вчера искал хоть что то про анимацию в обновлённом интерфейсе Figma на русском - а тут такой подгон. Спасибо!!!

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

    Рад что пригодилось)

  • @tulnikov
    @tulnikov3 жыл бұрын

    Отличное видео! Многое для себя прояснил! Спасибо!

  • @user-wi2pw1xk8i
    @user-wi2pw1xk8i3 жыл бұрын

    Спасибо за контент все понятно и просто!!

  • @smolindesign
    @smolindesign3 жыл бұрын

    Вау, как доходчиво! Спасибо огромное.

  • @alexanderchesnokov916
    @alexanderchesnokov9163 жыл бұрын

    Спасибо за труд!

  • @user-qk9wk8xx4h
    @user-qk9wk8xx4h3 жыл бұрын

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

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

    Как же круто ты все рассказал) Я за полчаса видео узнала больше чем за неделю на курсах)

  • @disarto.digital

    @disarto.digital

    Жыл бұрын

    Круто! Рад это слышать 🙂

  • @happy_natalya
    @happy_natalya3 жыл бұрын

    Я как раз одна из тех, кто впервые в фигме )) Супер видео, все понятно, очень много полезного!

  • @frumosuxenia2811
    @frumosuxenia28114 жыл бұрын

    Спасибо большое!Мне все очень понятно стало.

  • @designer_lisa
    @designer_lisa3 жыл бұрын

    это то, что мне нужно, спасибо большое)))

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

    Огромное, огромное спасибо!

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

    Продолжай в том же духе! Очень полезно, появилось в рекомендациях и сразу же посмотрел. Сразу подпишусь так как делаешь качественно

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

    Disarto, случайно попала на это видео. Очень круто. Сразу подписалась и лайкнула. Хочу вторую часть и полезности от такого автора, как ты. Спасибо.

  • @user-re5gy7mr1b
    @user-re5gy7mr1b3 жыл бұрын

    Спасибо большое! Очень доступно

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

    Друг мой спасибо тебе большое , все очень доступно!!!

  • @leshaalexeeva
    @leshaalexeeva3 жыл бұрын

    Спасибо, очень просто и понятно!

  • @twiggyart587
    @twiggyart5874 жыл бұрын

    Спасибо, не знал что так можно. подписка и лайк!

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

    Попробовала сделать горизонтальный скроллинг, настроила все ок, спасибо за видео! )

  • @tmtn3335
    @tmtn33354 жыл бұрын

    Спасибо за видео !

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

    Большое спасибо!!!

  • @user-wx9dg7im3u
    @user-wx9dg7im3u4 жыл бұрын

    Спасибо! Хороший урок

  • @user-vg1jw2we9o
    @user-vg1jw2we9o3 жыл бұрын

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

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

    Красава, разложил по полочкам, вот что значт спец

  • @aidynbelassarov2149
    @aidynbelassarov21493 жыл бұрын

    Чётко! От души 😅

  • @user-zr8fp6ud2z
    @user-zr8fp6ud2z4 жыл бұрын

    Спасибо большое 👍 дорогой

  • @nikeponomarev9403
    @nikeponomarev94033 жыл бұрын

    спасибо ,всё чётко

  • @tatyanaemelyanova9953
    @tatyanaemelyanova99533 жыл бұрын

    Супер! Спасибо!

  • @alexp6210
    @alexp62102 жыл бұрын

    спасибо за труд

  • @dimalepel
    @dimalepel3 жыл бұрын

    Подписался. Очень полезно.

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

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

  • @zelenoglazaja
    @zelenoglazaja4 жыл бұрын

    почему так мало подписчиков? непорядок! Контент супер, спасибо

  • @hitpau
    @hitpau4 жыл бұрын

    Спасибо!

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

    Спасибоооооооооо, гений))))))

  • @dmitryvladi
    @dmitryvladi2 жыл бұрын

    Ясно и понятно! Отлично объясняешь. Ещё бы лицо твоё в углу для восприятия))

  • @olehborys1462
    @olehborys14623 жыл бұрын

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

  • @grgol6084
    @grgol60843 жыл бұрын

    спасибо за годное видео! Пишу комментарий для продвижения канала

  • @jeanmichel3897
    @jeanmichel38972 жыл бұрын

    Спасибо 👍

  • @fessan8918
    @fessan89184 жыл бұрын

    спасибо!

  • @kettlebellsports
    @kettlebellsports3 жыл бұрын

    Спасибо

  • @user-pf5pc3yh5j
    @user-pf5pc3yh5j3 жыл бұрын

    плюсище

  • @tylerflowamaizing5362
    @tylerflowamaizing53623 жыл бұрын

    Хороший канал

  • @Your_panama
    @Your_panama3 жыл бұрын

    Спасибо тебе, ролик топ но печально что мало подписчиков

  • @user-cp3ue3ym2c
    @user-cp3ue3ym2c2 жыл бұрын

    спасибо, интересно и понятно, на платных курсах так не рассказывают

  • @romanterechko8553
    @romanterechko85534 жыл бұрын

    молодец

  • @tapok1991
    @tapok19913 жыл бұрын

    Класссссс

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

    Спасибо! Очень инетеренсо. Только я не понял как Overlay самому сделать. Надеюсь в других уроках найду!

  • @lk6618
    @lk66182 жыл бұрын

    было бы еще неплохо рассмотреть как при нажатии на один из тригеров открывались несколько оверлеев

  • @xxxacxatxxx
    @xxxacxatxxx4 жыл бұрын

    Спасибо за видео) Как раз разбирался сидел с прототипом, вот только одного не пойму сделал скролинг как в примере, но почему-то он не скролиться, а таскает фреймы, т.е. пока удерживаешь можно посмотреть, отпустил они обратно возвращаются на исходную Т___Т

  • @liteleak4049
    @liteleak40494 жыл бұрын

    Спасиб

  • @Fedorov1975
    @Fedorov19753 жыл бұрын

    Спасибо за подробный обзор! Можно ли сделать так, чтобы при клике на кнопку циклически менялись экраны в фрейме. Пытаюсь запрототипировать дизайн меню в электронном оборудовании с использованием Figma. Т.е. первй раз нажали - первый фрейм, второй раз - второй, третий раз - третий и затем снова первый. Понятно, что можно было бы между фреймами поставить delay, но это не совсем то, что нужно.

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

    Как ты сделал разноцветный круг (20:20), сам круг я то сделал, но как его поделить по цветам, я не знаю, подскажи пожалуйста

  • @Elizaveta_nitsenko
    @Elizaveta_nitsenko4 жыл бұрын

    Отличное видео. Спасибо. Только у меня вопрос, мокап теперь нельзя сделать, как в видео или я просто что-то делаю не так? У меня нет такой кнопки(

  • @user-sj5pe7rs7c
    @user-sj5pe7rs7c3 жыл бұрын

    здравствуйте! подскажите пожалуйста что нужно сделать, чтобы при скроллинге вертикальном фон (картирнка) оставался на месте.

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

    Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы при создании адаптивного дизайна при изменении размера фрейма, другие фреймы автоматически меняли размер? Например, я создал чат окно, где два фрейма в каждом текст. При масштабировании текст расходится по ширине и расстояние между фреймами(моим соотношением и апплнента) увеличивается. Как сделать его заданным и постоянными при изменении размеров фрейма ?

  • @helen1469
    @helen14693 жыл бұрын

    Спасибо, все очень здорово!:) Единственное, а как сделать так чтобы нижнее меню не перекрывало контент? То есть чтобы скроллило до конца, а не закрывало последнюю строчку:( У вас в видео кстати тоже этот момент есть

  • @naval2635
    @naval26354 жыл бұрын

    Привет, подскажи, пожалуйста, почему не отображается кнопка «зафиксировать позицию при скролинге»

  • @mr.dabilin8803
    @mr.dabilin88034 жыл бұрын

    Привет. Слушай, помоги пожалуйста с анимацией в Figma. Есть страница сайта, по середине горизонтальная лента из картинок. Справа и лева от ленты есть стрелочки. По нажатию на стрелку справа, лента сдвинется на одну картинку влево. Нажму два раза на стрелку, сдвинется на две картинки. И также с другой стрелкой. Если я дохожу до конца ленты, она либо продолжает листаться, только с первой картинки, либо быстро возвращается на первую картинку.

  • @anrYReds
    @anrYReds2 жыл бұрын

    по горизонтальному перемещению - делаю все так же - не получается вообще. И откуда у вас в левой панели над фреймами взялись надписи: scrolls / fixed. У меня они не появляются

  • @rainbowkiller1990
    @rainbowkiller19904 жыл бұрын

    В новой версии Figma , как я понял, в Interaction способ On tap заменили на While Howering

  • @alexeysmotin

    @alexeysmotin

    3 жыл бұрын

    Нет. Hovering - это наведение. Речь об этом идет тогда когда макет у вас для ПК, т.е. когда присутствует курсор. On Tap - нажатие. Речь идет о нажатии пальца, т.е. о макетах на смартфонах. Если вы заметите, то пункта "наведение" нет на телефонах, и наоборот "нажатия" нет на ПК макетах

  • @user-wr7ec5wq2n
    @user-wr7ec5wq2n4 жыл бұрын

    А можно из одного фрейма сделать две стрелочки? Мне надо чтобы направо и налево отходил фрейм.

  • @mirwayss
    @mirwayss3 жыл бұрын

    Если кто тут от Рустама Профит скулл то я с Вами друзья!) Привет

  • @Samed21
    @Samed214 жыл бұрын

    Привет, я сделал анимацию на своем ландинг но вот не знаю как поделиться))) Есть варианты только как фото)))

  • @user-fv3md7vi3x
    @user-fv3md7vi3x3 жыл бұрын

    можно ли с такой анимацией перевести на тильду?возможно ли это?

  • @loprenot
    @loprenot3 жыл бұрын

    на 16:43 это не лишний фрейм т.к после удаления фрейма у тебя теперь границы пропали у боковых экранчиков по бокам

  • @mslv_m
    @mslv_m2 жыл бұрын

    Как сделать так, чтобы при скролле страницы у хедера появлялась подложка?

  • @kseniyaalive3772
    @kseniyaalive37723 жыл бұрын

    А как убрать курсор при записи анимации?

  • @GeknForever
    @GeknForever4 жыл бұрын

    Внутри фрейма от фрейма к фрейму переходы сделать невозможно?

  • @user-tu1my2ef4b
    @user-tu1my2ef4b4 жыл бұрын

    К сожалению фразы "у нас есть уже ..." мне в некоторых местах ничего не объяснили. :( Или уж все бы объяснять или указать видео, в котором то, что "у нас уже есть" появляется. А так интересно и вот теперь придется все неясности где-то еще прояснять ...

  • @user-cp6wy4gh5x
    @user-cp6wy4gh5x4 жыл бұрын

    Я одно не пойму, фигма строит код этих анимаций который можно вставить в html или эти анимации переходы только в самой фигме?

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

    Это инструменты прототипирования, и рассчитаны они только на демонстрацию (читай презентацию заказчику или для референса команде разработки). Код в фигме конечно исполняется, но экспортировать его нельзя (по крайней мере пока что).

  • @user-cp6wy4gh5x

    @user-cp6wy4gh5x

    4 жыл бұрын

    @@disarto.digital Спасибо

  • @NONAME-hq3qo
    @NONAME-hq3qo3 жыл бұрын

    Почему на 14:40 у тебя есть функция Overflow а у меня нет?

  • @user-ct3tk7ut1b
    @user-ct3tk7ut1b4 жыл бұрын

    Не могу понять как сделать скрилинг в прототип!?

  • @meerimpopova1950
    @meerimpopova19503 жыл бұрын

    здравствуйте) а в чем разница между swap with и open overlay?

  • @disarto.digital

    @disarto.digital

    3 жыл бұрын

    Swap with заменяет экран целиком, а open overlay открывает фрейм поверх текущего.

  • @delawer1033
    @delawer10333 жыл бұрын

    Как-то можно экспортировать анимацию?

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

    Помогите пожалуйста. Почему то моя анимация прикрепляется не к объекту в другом фрейме, а к самому фрейму. Как это исправить?

  • @alimamedgasanov5591
    @alimamedgasanov55914 жыл бұрын

    19:07

  • @kamillaabduraxmanova465
    @kamillaabduraxmanova4653 жыл бұрын

    Здраствуйте как сохранить анимацию

  • @user-ri8qm1bb9p
    @user-ri8qm1bb9p4 жыл бұрын

    Скажите пожалуйста можно как то сохранить анимацию с прототипа, при экспорте нет такой вкладки gif...?

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

    К можалению, в Фигме сейчас нету возможности сохранения анимации :( Можно сделать это только через программы для записи с экрана.

  • @user-ri8qm1bb9p

    @user-ri8qm1bb9p

    4 жыл бұрын

    @@disarto.digital Спасибо за ответ.

  • @MelShu19

    @MelShu19

    3 жыл бұрын

    @@disarto.digital посоветуйте программу для записи экрана.Спасибо)

  • @allamukhamedzynova1960
    @allamukhamedzynova19604 жыл бұрын

    к файлу с примерами больше нет доступа кроме просмотра?

  • @disarto.digital

    @disarto.digital

    4 жыл бұрын

    К нему и не может быть другого доступа :) Просто скопируйте файл к себе, и можно делать с ним всё, что угодно.