Prototyping and animation in Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ต.ค. 2019
  • 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....

ความคิดเห็น • 135

  • @andybud3885
    @andybud3885 3 ปีที่แล้ว +40

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว +5

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

  • @just_funk8923
    @just_funk8923 4 ปีที่แล้ว +32

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

  • @david_webdesigner
    @david_webdesigner 4 ปีที่แล้ว +70

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

  • @yuriy_om
    @yuriy_om 3 ปีที่แล้ว +6

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

  • @YuliiaKovalevska
    @YuliiaKovalevska 2 ปีที่แล้ว +4

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

  • @mashamykhailovskaya2037
    @mashamykhailovskaya2037 ปีที่แล้ว +1

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

  • @marytv2579
    @marytv2579 4 ปีที่แล้ว +1

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

  • @user-galimov
    @user-galimov 4 ปีที่แล้ว +15

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

  • @ALEKSEIENKO
    @ALEKSEIENKO 4 ปีที่แล้ว +3

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

  • @kuatbodikov5678
    @kuatbodikov5678 3 ปีที่แล้ว

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

  • @MrAndy811
    @MrAndy811 4 ปีที่แล้ว +4

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

    • @disarto.digital
      @disarto.digital  4 ปีที่แล้ว

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

  • @Valeriamarus
    @Valeriamarus 3 ปีที่แล้ว

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

  • @Maresto1000
    @Maresto1000 4 ปีที่แล้ว +1

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

  • @tianakosheleva6433
    @tianakosheleva6433 4 ปีที่แล้ว +1

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

  • @user-us8bh8ey6h
    @user-us8bh8ey6h 3 ปีที่แล้ว +2

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

  • @user-bg5yn6bu5q
    @user-bg5yn6bu5q 4 ปีที่แล้ว +2

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

  • @annapit742
    @annapit742 3 ปีที่แล้ว +2

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

  • @MGAnimationstuts
    @MGAnimationstuts 2 ปีที่แล้ว

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

  • @annamueller2545
    @annamueller2545 2 ปีที่แล้ว

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

  • @user-eg1zi5jc2m
    @user-eg1zi5jc2m 3 ปีที่แล้ว +1

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

  • @alsoualsou9
    @alsoualsou9 3 ปีที่แล้ว +2

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

  • @dariakruto
    @dariakruto ปีที่แล้ว +2

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

    • @disarto.digital
      @disarto.digital  ปีที่แล้ว +1

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

  • @happy_natalya
    @happy_natalya 3 ปีที่แล้ว

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

  • @natalishemshina1448
    @natalishemshina1448 2 ปีที่แล้ว

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

  • @vashamater
    @vashamater 3 ปีที่แล้ว +1

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

  • @bon2bon41
    @bon2bon41 4 ปีที่แล้ว +1

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

  • @user-qk9wk8xx4h
    @user-qk9wk8xx4h 3 ปีที่แล้ว +2

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

  • @sergeymedkov8425
    @sergeymedkov8425 3 ปีที่แล้ว

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

  • @tulnikov
    @tulnikov 3 ปีที่แล้ว +1

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

  • @smolindesign
    @smolindesign 3 ปีที่แล้ว +1

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

  • @user-wi2pw1xk8i
    @user-wi2pw1xk8i 3 ปีที่แล้ว +1

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

  • @user-qf6rh4gv7v
    @user-qf6rh4gv7v 2 ปีที่แล้ว

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

  • @twiggyart587
    @twiggyart587 4 ปีที่แล้ว +1

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

  • @frumosuxenia2811
    @frumosuxenia2811 4 ปีที่แล้ว +1

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

  • @designer_lisa
    @designer_lisa 3 ปีที่แล้ว +1

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

  • @TheKapanskiy
    @TheKapanskiy ปีที่แล้ว

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

  • @leshaalexeeva
    @leshaalexeeva 3 ปีที่แล้ว

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

  • @alexanderchesnokov916
    @alexanderchesnokov916 3 ปีที่แล้ว +1

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

  • @user-re5gy7mr1b
    @user-re5gy7mr1b 3 ปีที่แล้ว

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

  • @zelenoglazaja
    @zelenoglazaja 4 ปีที่แล้ว +6

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

  • @SvetlanaAnatolivna
    @SvetlanaAnatolivna 9 หลายเดือนก่อน

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

  • @dmitryvladi
    @dmitryvladi 2 ปีที่แล้ว

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

  • @user-ch4gq3mo2c
    @user-ch4gq3mo2c ปีที่แล้ว

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

  • @tmtn3335
    @tmtn3335 4 ปีที่แล้ว +1

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

  • @user-wx9dg7im3u
    @user-wx9dg7im3u 4 ปีที่แล้ว +1

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

  • @user-gj9uj5sm7c
    @user-gj9uj5sm7c ปีที่แล้ว

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

  • @user-zr8fp6ud2z
    @user-zr8fp6ud2z 4 ปีที่แล้ว +1

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

  • @user-vg1jw2we9o
    @user-vg1jw2we9o 3 ปีที่แล้ว +1

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

  • @aidynbelassarov2149
    @aidynbelassarov2149 3 ปีที่แล้ว +1

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

  • @hitpau
    @hitpau 4 ปีที่แล้ว +2

    Спасибо!

  • @tatyanaemelyanova9953
    @tatyanaemelyanova9953 3 ปีที่แล้ว

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

  • @dimalepel
    @dimalepel 3 ปีที่แล้ว +1

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

  • @grgol6084
    @grgol6084 3 ปีที่แล้ว +5

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

  • @nikeponomarev9403
    @nikeponomarev9403 3 ปีที่แล้ว +2

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

  • @aanastaishaa
    @aanastaishaa ปีที่แล้ว

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

  • @alexp6210
    @alexp6210 2 ปีที่แล้ว

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

  • @Your_panama
    @Your_panama 3 ปีที่แล้ว +1

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

  • @olehborys1462
    @olehborys1462 3 ปีที่แล้ว

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

  • @leonid_anat
    @leonid_anat ปีที่แล้ว

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

  • @fessan8918
    @fessan8918 4 ปีที่แล้ว +1

    спасибо!

  • @jeanmichel3897
    @jeanmichel3897 2 ปีที่แล้ว

    Спасибо 👍

  • @andriifartushnyi3029
    @andriifartushnyi3029 4 ปีที่แล้ว +1

    Спасибо

  • @user-cp3ue3ym2c
    @user-cp3ue3ym2c 2 ปีที่แล้ว

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

  • @user-pf5pc3yh5j
    @user-pf5pc3yh5j 3 ปีที่แล้ว +1

    плюсище

  • @alexbagirov2583
    @alexbagirov2583 4 ปีที่แล้ว +1

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

  • @lk6618
    @lk6618 2 ปีที่แล้ว

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

  • @romanterechko8553
    @romanterechko8553 4 ปีที่แล้ว +1

    молодец

  • @tylerflowamaizing5362
    @tylerflowamaizing5362 4 ปีที่แล้ว +1

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

  • @xxxacxatxxx
    @xxxacxatxxx 4 ปีที่แล้ว +1

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

  • @tapok1991
    @tapok1991 3 ปีที่แล้ว +1

    Класссссс

  • @Elizaveta_nitsenko
    @Elizaveta_nitsenko 4 ปีที่แล้ว

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

  • @Fedorov1975
    @Fedorov1975 3 ปีที่แล้ว

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

  • @liteleak4049
    @liteleak4049 4 ปีที่แล้ว +1

    Спасиб

  • @helen1469
    @helen1469 3 ปีที่แล้ว

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

  • @user-sj5pe7rs7c
    @user-sj5pe7rs7c 3 ปีที่แล้ว

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

  • @rv4112
    @rv4112 4 ปีที่แล้ว

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

  • @flesh3041
    @flesh3041 ปีที่แล้ว

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

  • @mirwayss
    @mirwayss 3 ปีที่แล้ว

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

  • @mr.dabilin8803
    @mr.dabilin8803 4 ปีที่แล้ว

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

  • @naval2635
    @naval2635 4 ปีที่แล้ว

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

  • @rainbowkiller1990
    @rainbowkiller1990 4 ปีที่แล้ว

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

    • @alexeysmotin
      @alexeysmotin 3 ปีที่แล้ว

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

  • @anrYReds
    @anrYReds 2 ปีที่แล้ว

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

  • @user-wr7ec5wq2n
    @user-wr7ec5wq2n 4 ปีที่แล้ว

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

  • @SemonBoon-w6y
    @SemonBoon-w6y 4 วันที่ผ่านมา

    Вы платные курсы предлагаете?

  • @Samed21
    @Samed21 4 ปีที่แล้ว

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

  • @user-fv3md7vi3x
    @user-fv3md7vi3x 4 ปีที่แล้ว

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

  • @loprenot
    @loprenot 3 ปีที่แล้ว

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

  • @mslv_m
    @mslv_m 3 ปีที่แล้ว

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

  • @user-cp6wy4gh5x
    @user-cp6wy4gh5x 4 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  4 ปีที่แล้ว +2

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

    • @user-cp6wy4gh5x
      @user-cp6wy4gh5x 4 ปีที่แล้ว

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

  • @kseniyaalive3772
    @kseniyaalive3772 3 ปีที่แล้ว

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

  • @user-tu1my2ef4b
    @user-tu1my2ef4b 4 ปีที่แล้ว

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

  • @GeknForever
    @GeknForever 4 ปีที่แล้ว

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

  • @user-ri8qm1bb9p
    @user-ri8qm1bb9p 4 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  4 ปีที่แล้ว +1

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

    • @user-ri8qm1bb9p
      @user-ri8qm1bb9p 4 ปีที่แล้ว

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

    • @MelShu19
      @MelShu19 3 ปีที่แล้ว

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

  • @user-ds9il5of2u
    @user-ds9il5of2u 2 ปีที่แล้ว

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

  • @meerimpopova1950
    @meerimpopova1950 3 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  3 ปีที่แล้ว

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

  • @alimamedgasanov5591
    @alimamedgasanov5591 4 ปีที่แล้ว

    19:07

  • @user-ct3tk7ut1b
    @user-ct3tk7ut1b 4 ปีที่แล้ว

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

  • @NONAME-hq3qo
    @NONAME-hq3qo 3 ปีที่แล้ว

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

  • @diana_thehuman
    @diana_thehuman 3 ปีที่แล้ว

    Спасибо, полезное видео. Но нигде не могу найти как сделать так, чтобы лайк окрашивался красный при нажатии? Неужели для каждого лайка нужно создавать отдельный экран, чтобы это работало? Может кто знает?🙏

    • @vadimbeluha
      @vadimbeluha 3 ปีที่แล้ว

      только так

  • @allamukhamedzynova1960
    @allamukhamedzynova1960 4 ปีที่แล้ว

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

    • @disarto.digital
      @disarto.digital  4 ปีที่แล้ว +1

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