Making a video of your Figma/Adobe XD prototype and converting to Gif
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.
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.
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.
The gif created will appear below.
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.
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.
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.
