Making a video of your Figma/Adobe XD prototype and converting to Gif

Salome Katunzi
4 min readAug 21, 2021

--

If you’re like me and you’ve been wondering how to share your Figma or Adobe Xd prototypes without learning a new prototyping tools then this article is for you. You can make this cool gif with no additional software.

Animated FAB

I was working on some button interactions a few days ago and really wanted to share it with my Twitter followers . I finished my design, the prototype looks great, and now I was ready to share it. After a lot of Google searches and downloading random free products that didn't live up to their landing pages I got a solution.

Just a heads up, I’m on a windows 10 pc!!

Windows has a built in Game Bar feature that was designed to record games you play directly on your PC but you can also use it to capture video of any screen activity. Screen activity that you record is automatically saved as an MP4 video file.

Here is what you’re gonna do

First you need to enable screen recording. Open Settings > Gaming > Xbox Game Bar and turn on the switch for Enable Xbox Game Bar.

Record video

When you’re done with your design click the present icon to view the prototype and the interactions. Press the Windows key + G at the same time to open the Game Bar dialog.

Check the “Yes, this is a game” checkbox to load the Game Bar . This is the procedure whether you are screen recording a game or another kind of app for the first time.

The Game bar will appear with a lot of options. Click on the capture button and a new toolbar will appear. Then click on record (or Win + Alt + R) to begin capturing video.

Windows Game Bar

Stop the recording by clicking on the red stop button on the recording bar in the application window’s upper right corner. (If the Game Bar vanishes, hit Win + G again to reactivate it.)

Your video will be automatically saved in the Video > Captures folder on your PC.

Convert to Gif

Visit the website ezgif.com which is a site used to make and edit gifs. Click on the video to gif option on the screen or the top navbar. Upload your chosen video and click upload video then click the convert video button.

Online Gif maker tools

The gif created will appear below.

Created gif

Crop out unnecessary spaces

Your gif probably contains parts of the screen you don't wanna show. Below the newly created gif you’ll seea bar of tools to edit your gif. Select the crop option to crop out any unneeded part.

gif toolbar
Crop gif

Select the frame you wish to see, or use the provided aspect ratios to specify the size you want to see. When you are done click the “crop image” button and you’re newly cropped gif will appear below. You can also crop out videos first before converting them to gif.

Change video speed

Select the speed button on the gif toolbar to change speeds. A new screen will appear with that information.

Change video speed

Select the speed percentage you would like and click change speed. Your newly edited gif will be available below.

Click on the save button to download and save your gif ready to use.

PS: The are many more tools to explore with Gifs but this is mostly what I use, let me know what other tools you’ve used to edit your gifs.

Thank you for reading till the end! 😃 Feel free to reach out to me on Twitter for any questions, collaborations or just to say Hi!

Don’t forget to follow me here on Medium as well for more design-related content.

--

--

Salome Katunzi
Salome Katunzi

Written by Salome Katunzi

UI/UX Designer | Visual Designer. Sharing with the world what I know and learn in the world of design. Connect with me at www.salomekatunzi.com

No responses yet