How to Record Figma Prototype | Mac & Windows

welcome back everyone so on today's video i'm going to show you how you can record your figma prototype so i've received a couple of requests on how to do this so here it goes if you know adobe xd already has an inbuilt tool or a feature that helps you record your prototype so that's great but on figma there is nothing as such to directly do it so i've got a method that works both for mac and windows and i'll also be sharing some tips and tricks that'll help you record more effectively so make sure that you keep watching till the end of this video and without any further ado let's get started [Music] so here i'm on my figma desktop app and i have downloaded two free ui kits from the ui store one is a meditation app and one is a user onboarding for a financial application so i'll be using these two for the demo purpose firstly kudos to these designers who put up such awesome designs for us to use for free and i wanted to show you two variants and that is the reason i have a mobile version and also a web app so i'll get started with this web app and then i'll show you how to record the mobile version too and in this process i'll also be sharing some tips and tricks how to record it more effectively so once you have done your prototyping of the web app head towards the play button or a present option here and that should help you share your prototype so here i have a share prototype button just click on that and say copy link and now head towards your chrome browser paste the link and load your prototype so once your prototype is loaded just go ahead and give a check if everything is working fine so in my case everything works fine and now head towards the chrome extension link that i mentioned in the description below so chrome has a lot of extensions to record your screen for free i have tested a couple of them and i found this one was useful but there are a lot of them you can go ahead and explore them but if you don't want to waste time this one worked fine for me so you can just install this one so once it's installed you should be able to see your extension here else it should be in this option of more and just go ahead and pin it if you want to pin it on this bar here and once that is done just go ahead to the extension and click it and that should open up a new tab for you so click on the capture screen button here and that should throw you a dialog box which has three tabs just click on chrome tab and just select the tab that has the prototype loaded in my case it is page one user onboarding i click on that and i say share and now basically your recording of the prototype has started just interact with your prototype and once you have done just click on the stop that you see here and head towards the tab that you opened up before and here you can see your video of the prototype is running and once you have satisfied with it just go to this three dots here and say download and that's it your recording of your figma prototype is done and this one if you notice it is in a webm format but we usually prefer mp4 format so i'll also show you how to get the mp4 format once i've showed you the mobile recording also and one more thing if you notice it has black borders all around it and if you don't have an editing software to remove this i'll also show you a trick how to get rid of this so i'll close this and i'll head towards the mobile prototype how to record it so here i have the meditation app i'll do the same thing go to present option here click on share prototype copy the link and i'll head towards the chrome browser and then load up the prototype so if you have a look here this is just the mockups and you can interact with it but i have received a lot of requests where people wanted even the mobile frame to be a part of the video so in that case you will have to include that but if you want just the mockups you can go ahead with this but let me just put up that also so if i go to the file and i say prototype you should see this option which is device just click on this drop down here and choose whatever you want so i'll be choosing iphone 11 here and that should load up here and also on your chrome browser link so here you go so now everything looks good i can head towards the record option but that would record the whole thing here along with the black part you see here the background so to get rid of that you need to resize your browser so i'll resize it to the part where i feel it's good to record so if i resize it until here with this much border it looks good so this one looks good so i head towards the extension here and i click on it and i again say capture screen you get the dialog box click on chrome tab and in this case it is meditation app so i click on that and i say share and now you can start interacting with your prototype and once you have done that click on stop and head towards the tab and there you go you have your recording everything looks cool so i head towards this option here and i say download and you have downloaded the file and as i mentioned below this is in webm format all what you got to do is head towards google and say webm to mp4 converter you have a lot of free converters you can try out any of them but what i prefer is this one called as zamzar this is a pretty cool service which have a lot of conversions for free so just drop in your webm format here and say convert now and that's it they will convert it in a couple of minutes and you can download the mp4 format and before we end this video a couple of more tips here so if you can see this has a black background and if you don't want a black one you can always head towards figma and change that to your requirement so if i go to prototype mode here you'll be able to see the background option here so i can change this to white and you also have an option to change the phone's color so that can be white or black so you can play around with that so i make this black and if i head towards the browser here you can see you have a black background and you can record this part and if you're a mac user you don't need all these chrome extensions to record your screen or your prototype you have an app called as quicktime player which is already pre-installed on your mac so just open that one and go to file say new screen recording and you'll be able to see these extra options on the bottom so just choose this one which says record selected portion and then you'll be able to see a frame like this so just drag that frame to whichever portion of the area that you want to record so let's say this part just say record and basically your screen has started to record you can interact with your screen and once you're done just click this option here which says stop record and there you go you have your complete recording so that's it for this video guys i hope it was informative and helpful for you and as always if you like the video please give us a thumbs up subscribe to the channel and don't forget to click the bell icon thanks for watching

Channel: Design Xstream

Views: 49,623

Rating: 4.8991594 out of 5

Keywords: how to record figma prototype, how to record screen in figma, how to record in figma, how to record my figma prototype, easy method to record figma prototype, quick way to record prototype, best way to record figma prototype, which is easy way to record figma preview, how can i record my figma prototype, recording figma animation, how to record figma animation for portfolio, how to record figma, record figma presentation view, figma record prototype, figma prototype record

Id: W8qRG6I26C0

Length: 7min 4sec (424 seconds)

Published: Thu Sep 17 2020

Reddit Comments

[u/rameshbabu007]

had been looking for this for quite a while. but is there a way to remove background color completely ?