How to Create Animated Prototypes (GIFS) for your UX Presentation!

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ต.ค. 2024

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

  • @janellebourda8252
    @janellebourda8252 ปีที่แล้ว +9

    You really are a life saver to us that are just beginning our UX careers! Thank you so much 🙏🏼

  • @losbones
    @losbones ปีที่แล้ว +9

    adding a thick stroke and round corners of the GIF will give a good representation of a mobile device without needing to use external assets.

  • @farhanahaque5249
    @farhanahaque5249 10 หลายเดือนก่อน +2

    the amount of trouble I had gone through in the past to make a GIF !! thank you so much for the video! saved me so much trouble!🙌🏻🙌🏻

  • @remekster
    @remekster ปีที่แล้ว +9

    I swear i manifested this video 😂 im literally just figuring out how to do this right now and when i saw the video title and it was you i thought finally, a video i need with a reliable source lol. A lot of other UX videos on here under explain most things and in a way that is difficult to digest. Your videos have helped me throughout my bootcamp, and all my case studies had your process in mind. You levelled up my work 🙏🏽

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

      So glad to hear!!! Hope it’s helpful. What else would you like to see?

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

      @@sharonyeunkim I really liked your design challenge video maybe more problem solving like that would be good

  • @ux.beatriz
    @ux.beatriz 8 หลายเดือนก่อน +1

    Awesome tutorial, Sharon! I will be trying this out ✨

  • @yitangcui1165
    @yitangcui1165 8 หลายเดือนก่อน +2

    Appreciate every time your share.

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

    Wow, thank you so much!
    I used to record the screen with Quicktime, then look for a mov to gif converter and is very time consuming.
    You rock!

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

    Thank you! Way much better than screenshotting in Mac and converting to GIF.

  • @danny76363
    @danny76363 8 หลายเดือนก่อน +1

    Thank you so much Sharon. Life saver!

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

    This is a very useful information , literally enjoyed the who process , just couldn't leave till the video finished 😅❣️🔥

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

    omgosh i needed this this week 😩😅 i just used screen record and had to crop it and it didnt look as nice, but this method is so much better.

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

      Hope it works out!! You got it!

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

    Thanks for sharing Sharon, It's really helpful❤❤

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

      Thank you for watching Ahmed!! Appreciate you :)

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

    Thank you! This is the most straightforward tutorial I've seen on this!

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

    you always help me.😍 you are the best. thank you.❤

  • @amimarinho
    @amimarinho 11 หลายเดือนก่อน

    Thank you for sharing this awesome tutorial

    • @sharonyeunkim
      @sharonyeunkim  11 หลายเดือนก่อน

      You’re welcome 😆

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

    This is so helpful, thank you! Can't wait to start using this for my case studies 😊

  • @aneesha5685
    @aneesha5685 3 หลายเดือนก่อน

    Thank you! This was really helpful! 😊

  • @akroneria
    @akroneria 7 หลายเดือนก่อน +3

    What about those who do not us apple products what would be the alternative for windows?

  • @je3613
    @je3613 7 หลายเดือนก่อน

    Thank you so much! It's so helpful

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

    Thanks for sharing. Iwas looking for one like this

  • @PlamenaMileva-mh8ef
    @PlamenaMileva-mh8ef 9 หลายเดือนก่อน

    Thank you for sharing!

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

    Thank you for sharing! I always had trouble dealing with problems on the screen record and transforming it into a gif, but this software seems to be very easy to use❤❤

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

    Thank you very much for sharing this.

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

    So I tried this but the quality is pretty poor. My card element dropshadows look like gray borders in the giphy video.

  • @bossboss4508
    @bossboss4508 5 หลายเดือนก่อน

    this is what i seeking for a whole day, thanks a lot for making a good tutorial like this❤❤ hit subscribe button

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

    Thank you so much! Life saver

  • @preshthabijlani4366
    @preshthabijlani4366 7 หลายเดือนก่อน

    your video is awesome and i was able to follow it all the way through until the final step where you put the gif in google slides and have to add a phone case as an overlay - thats not working out well for me. can you put a video on how to put a phone case either through figma while recording the prototype or later on?

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

    hi sharon thanks for sharing, is there any alternative ways for windows users?

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

      If anybody knows any alternatives, please tag me

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

    do you think you'd be able to make a video helping with design-related behavioral questions in ux interviews? i've noticed that the portfolio review portion of my interviews isn't too hard but I really struggle with preparing good stories to tell and fitting them in the STAR method as well. thank you!!

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

      Thanks for the suggestion!!!

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

      The way I’ve tackled behavioural questions is to take every key one based on a google search of ux interview questions and standard behavioural questions. Literally write out 4 bullet points for each letter in STAR, and practice infront of a mirror or on your webcam.

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

    Thank You!

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

    I just love you

  • @swapnajitsaha5196
    @swapnajitsaha5196 4 วันที่ผ่านมา

    What if the the corners of the frame is rounded? The Black BG will be there! So how will i remove that?

    • @sharonyeunkim
      @sharonyeunkim  3 วันที่ผ่านมา

      Have to change the background color in Figma to white when ur in prototype mode!! That way no need to remove the corners it’ll blend in if u transfer the gif to ur white background slidedeck

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

    Is it available for windows

  • @KittenParadise
    @KittenParadise 11 หลายเดือนก่อน

    Is this the best format to include a prototype animation in the website portfolio to show how the app works? Thank you

  • @beast20996
    @beast20996 6 หลายเดือนก่อน

    tnx a lot,. what do recommend for windows uder?

  • @westfield90
    @westfield90 7 หลายเดือนก่อน

    Thank you

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

    Does the software work for a Windows laptop ?

  • @77AlexS
    @77AlexS 4 หลายเดือนก่อน

    I tried it out and it made a GIF (yay!) but the quality is actually really poor no matter how much I change the frame rate or general quality. Could it be because my prototype itself is too heavy...? Anyone else experience this issue?

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

    Great! Usually I screen record and gif it in premiere pro, but the files are soo largee. How big are your gigs on average? Like short ones

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

      Hey! For the one I used here it is 1.5MB. I believe using Premiere will definitely use more space so if your gifs are too big- try the giphycapture app!

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

      @@sharonyeunkim yeah that's good. Mine are always minimum 50mb no matter how small the video is. Thanks for the app!

  • @logand.5332
    @logand.5332 ปีที่แล้ว

    I wonder if you can add high-quality gifs to figma presentations

  • @AnneSong-d8u
    @AnneSong-d8u ปีที่แล้ว

    Thanks ❤

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

    Hi thank you for the video Sharon! I wonder, can I do the same with Web app prototype and put the MP4 file on my portfolio? Could you give any tips on that? Would it be good to record a User Testing session and put the video in my case study? Please any tips would be so helpful, thank you!

  • @anureddy6361
    @anureddy6361 10 หลายเดือนก่อน

    How to download the slide in gif format? I don't see that option

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

    Thanks 🎉does it work for website too??

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

    Does screen recording work on mobile phones too?

  • @Rafael-dj-c
    @Rafael-dj-c ปีที่แล้ว

    Thanks. Do you know where I can get device mockups?

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

      I would go onto Figma community and type in whatever phone you’re prototyping in and add “case mock-up” at the end! Might have to play around with the wording a bit but I’m usually able to find something of the sort. If not that the googling a high resolution image of a phone case and photoshop it into a PNG then import that case into Google slides.

  • @Carolinesherina
    @Carolinesherina 3 หลายเดือนก่อน

    does it work in windows?

  • @asmr.Beehere
    @asmr.Beehere ปีที่แล้ว +2

    the quality isn't good sorry

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

    What about windows users.. This is far useless.