Это видео недоступно.
Сожалеем об этом.
How to Record Figma Prototype | Mac & Windows
HTML-код
- Опубликовано: 13 авг 2024
- 🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Community
In this video, I will be showing a simple method to record your Figma prototype. This method works for both Mac & Windows users. Also, will be going through some tips & tricks on how to resize your recording so that you can upload it on your portfolio accordingly. This method works for any prototype that can be opened on the web for example you can record Anima or Sketch prototype also by opening it on the web.
#FigmaTutorials #RecordFigmaPrototype #RecordPrototype
Install Chrome Extension from here: bit.ly/ChromeRecorderExtension
🔴 🔴 🔴 Update: This new chrome extension is even better as it allows you to download directly in MP4 format: bit.ly/NewChromeRecorderExtension
If you want to record & later add device mockup check this video: • How to Put Prototype V...
Mic - Boya BYM1: amzn.to/2Wx6zhk
Other Computer Accessories: amzn.to/3q8vLaO
If DesignXstream Tutorials has helped you in any way & you want to contribute something back feel free to buy me a coffee! And again it is not mandatory just a free choice for you.
Link: www.buymeacoffee.com/DesignXs...
Thank you! 😊
Don't forget to Subscribe. Trust me it's absolutely FREE - goo.gl/c5vRzS 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Community
⏱️Timestamps:
0:00 Intro
0:30 Getting Started
1:20 Opening prototype on Browser
1:42 Install Chrome Extension
2:08 How to Record Web App
3:34 How to Record Mobile App
4:12 Resize Video Recording Frame
5:10 Converting .webm to .mp4 format
5:42 How to change the frame background-color
6:08 Mac users can easily do it with QuickTime Player
Relevant 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 tutorials.
Note: Some links here may be affiliate links. I will earn a small portion of those sales at no additional cost to you. Thank you for supporting DesignXstream. 😊
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Stay updated with our videos by following us at:
↪︎ LinkedIn - / techzclub
↪︎ Instagram - / techzclub
↪︎ Facebook - / techzclub
↪︎ Twitter - / techzclub
↪︎ Website - TechzClub.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔥 Update: Try this Chrome Extension for MP4 format: bit.ly/NewChromeRecorderExtension
Or try this free tool: screenrec.com/ [Recommended by Nikhil in comments]
OMG - This presentation was incredibly informative and helpful. So many options and recommendations in 7 minutes.
Hey Laura, I'm glad you found it informative! Cheers :)
I just spent an hr trying to figure out how to get the mobile framing. Very helpful thanks!!
Glad you found it helpful :)
the polite snowman is sooo cute!
⛄️⛄️⛄️ yeahhh!
This is helpful; I like the way you keep the tutorial to the point and short. Excellent job!
Thanks Anand! Glad you liked it :)
Thanks for the tip! I was trying so hard to discover it.
Hey Jhonatan, Glad you found it helpful :)
This is what I was looking for. Thank you for sharing your wisdom
Glad you found it useful. Cheers! ✌🏼
This was extremely helpful. thank you so much
Glad it was helpful! Cheers ✌️
Thank you! I loved your tutorial, very helpful and to-the-point, without any extra fluff at all 😀!
Glad you like it! Cheers ✌🏼😃
Very informative and helpful.thanx for sharing
Glad you like it! Cheers ✌️
Top work, no waffle, perfect, thank you
Glad you found it helpful! Cheers ✌🏼
Thank you sir
I've been looking for this on the internet for a while, but I haven't found a free solution, thanks for your help my brother.
Hey Ahmed, Thank you for the comment! Glad you found this helpful :)
explanations like these!!
thank you so much
Glad you liked it! Cheers ✌🏼
Thanks for the tip , greetings form cancun, mexico !!
Cheers ✌🏼
Aren't you the same guy who made an Intro to Spline video? Great stuff, I hope your channel grows. You deserve it 👍
Awesome that you recognised my voice 😄 Glad you enjoyed the video... Thanks bro! 🙏🏼
Nice video 👍 . I never used this method i will give a try . #thankz
.i just use my game bar to record screen (win+G) . And record the screen while prototyping on figma app. So no need to get to the chrome.
And adjust the screen resolution on any video editing tool. I just mentioned my method . Hope u like it also 😉
Glad you liked it!
I haven't used Windows for a while now so I was totally unaware that Windows got a Game bar to record! If that works then it's a great option. Thanks for sharing. I'll try to update this in the description 👍
@@DesignXstream 😍
Very Helpful, Thankyou
Glad you found it helpful! Cheers ✌️
Dude that's so awesome of you, thank you!
Cheers buddy! ✌🏼 :)
Super cool video. How do you remove the background color of the recordings?
Need a video editor for that. Alternatively you can use the last tool in this list: ruclips.net/video/Oe4DGYE-ooI/видео.html
Thank you for sharing your knowledge. I have learnt a lot from you.
That's awesome! Glad you found it helpful :)
on mac you can use use the screenshot tool, choose an area and start recording.
Yeah! I did mention that towards the end of the video 😀
This method is more helpful for Windows users 👍🏼
Thank you, really helpful🔥
Glad it helped! Cheers! ✌🏼
Thanks for recording this tutorial , please make a video on how to change background images or custom animation of prototype
Sure. Meanwhile this video could be helpful: ruclips.net/video/Vx8jyVTazew/видео.html
This was really detailed...thank you
Glad it was helpful! :)
Thanks for sharing, very helpful!
Glad it was helpful! Cheers ✌🏼
i love it, really very thanks, i´m very worried but all good now
Cheers! Glad you liked it! ✌🏼
Thankyou so muchh!!! clearly explained! very helpful :)
Glad you found it helpful! :)
It was really simple and helpful. thanks a lot
Glad you found it useful! ✌🏼:)
Thank you for this solution ... I have always looked for a way to do it.this is so interesting! Thank you once again
Hey Oluseyi, Glad that you found it helpful :)
How did you change the cursor shape (Circular), mine is still the same as it is in chrome browser (fingertip icon)?
Hey Swati, I'm not very sure. But it could be probably coz I'm using a macbook.
Muchas gracias, con este video me ayudaste!!
Me alegro de que lo hayas encontrado útil :)
Very helpful and explicit. Thank you.
Glad it was helpful! :)
Thank you so much for making this video!
Glad you found it helpful! :)
Very usefull!! Thank you!
Glad it was helpful! Cheers! ✌🏼
Thank You
Cheers ✌️
This video was amazing and really helpful. Please i want to ask if there's a way to upload this to behance?
If your recording is in mp4 format you can directly upload them to Behance!
@@DesignXstream thank you
Super helpful, thanks much!
Glad it was helpful! Cheers ✌🏼 :)
Thank you so much, this is very helpful!
Glad it was helpful! :)
what i've been looking for
Cheers! ✌🏼
Bro thank you so much for the info!
Hey bro, I'm glad you found this helpful! Cheers ✌🏼 :)
Thanks for sharing this very informative and time saving video! 🙂
Glad you found it helpful! Cheers ✌🏼
Thank you bro
Cheers! ✌🏼
Yahh, I can do it. Thank you so much bro!
I'm glad you liked it! Cheers! ✌🏼
Hi! thanks a lot for that! btw, do you know any way how to but these prototype videos on bechance case?
Convert these videos to .mp4 and you can upload them on behance. However, instead of video I would recommend you to embed the prototype in behance so users can click and play with the prototype.
Hello everyone. I am new to Figma. I want to ask a question. Can we copy elements in different tab and paste it into another different tab? THANK YOU.
Yes, it definitely works!
Great video bro. Is this extension support for mobile to record prototype?
Extension works in chrome desktop.
Cheers, dude! Another great video.
Glad you enjoyed it! 👍🏼
You are a life saver. Thank you so much! 😇
Cheers ✌🏼 :)
Thank you so much!
Cheers ✌🏼
this was helpful. thanks a lot.
Glad it was helpful! :)
Thank you so much for this video
Cheers ✌🏼 :)
Thank you for this video, this tutorial is very good and informative. I have one question about the background color, there is option to record the prototype with transparent background (no bg at all)?
You can cut out the background using online video editors!
Thanks for this. Please how do I upload the recorded video back to figma?
For uploading videos to Figma you need the pro plan. Then you can just drag and drop any video
@@DesignXstream thanks for the feedback.
Thank you great video
Cheers! Glad you enjoyed it :)
Thank you! Very helpful.
Glad it was helpful! :)
This was a big help. Thank you 🙏🙌
Glad you found it helpful :)
hey, i am a beginner designer and have been struggling to make a scrolling website mockup please let me know how do i do that?
Check the last tool in this video: ruclips.net/video/Oe4DGYE-ooI/видео.html
First record the website scrolling it and then add the video to the tool mentioned in the above video!
Very informative video.
Glad it was helpful! :)
very helpful thanks
You're welcome ✌🏼
There is another way. Just use greenscreen by changing the background with #00ff00 and go to video editior and click chroma key.
Yeah, I do that often. However, most of the people do not have video editors and want to avoid that extra work.
This is really helpful for me !! but output of the video looks slightly low quality pixel, Is that the maximum strength of high quality?
Did you try the other chrome extension mentioned in the description?
thank you sooooooooooooooooooo much this was really really helpful
You're welcome! :) Glad you found it helpful.
thanks for helping
Glad you found it helpful! Cheers ✌🏼
Thank you so much! Keep posting
Hey Dheer, Glad you found it helpful. Also, If you want to record the screen first & later add a device mockup of your choice then check this video: ruclips.net/video/Vx8jyVTazew/видео.html you might find it interesting! 👍🏼
Quicktime also has a screen record
Yes already mentioned in the video while talking about macOS 👍🏼
Hey ! Thanks a lot for this tutorial, it was really useful to me. I only have one doubt.
I downloaded file and the only extension available was .webm . How can I open this type of files?
Thanks for your time!
Hey Nicolas, I showed in the video how to convert webm to mp4 format for free. You can check that or you can also try this new chrome extension that directly gives you mp4 format. chrome.google.com/webstore/detail/screenity-screen-recorder/kbbdabhdfibnancpjfhlkhafgdilcnji?hl=en
@@DesignXstream Thanks again! I must have skipped that part of the video. You are great!
Awesome! Do check our instagram you might love it: instagram.com/designxstream/
Thanks for the tutorial! really helpfull
Glad you found it helpful :)
Thank you sooo much🙏☺️👌
for the web app recording, i am using quicktime player to record my figma desktop prototype but how do u record the touch points as well? (the grey circle curser moving around the screen)
Generally quicktime record your screen cursor/grey circle as well. Do you want to hide it?
Thank you so much this helped a lot
Hey Ferguson, Glad you found it helpful. Also, If you want to record the screen first & later add a device mockup of your choice then check this video: ruclips.net/video/Vx8jyVTazew/видео.html you might find it interesting! 👍🏼
Thank you :)
Cheers buddy ✌🏼
BOMB Video! Thank you!!! :)
Glad you found it useful :)
great video very helpful thanks
Hey Jonathan, Glad you found it helpful :)
how can I make the cursor to be circle ? Many thanks🙏
hey I suppose the cursor is a OS level thing. In Mac it a circle by default.
God bless you, you just save my day
Glad you found it helpful :) Cheers ✌🏼
Thanks for the video, very informative👌
Glad you found it helpful :) #stayTuned for more such videos.
👍
You know, you are really great, right to the point 👍😊
Glad you found it helpful! :)
I tried to do this but had trouble because the video wouldn't open in any other editing plataform :/
Hey Kaori, Try this extension it gives output directly in mp4 so this must work: chrome.google.com/webstore/detail/screenity-screen-recorder/kbbdabhdfibnancpjfhlkhafgdilcnji
This is great thank you so much!
Hey Ayman, Glad you found it helpful. Also, If you want to record the screen first & later add a device mockup with cool background and all of your choice then check this video: ruclips.net/video/Vx8jyVTazew/видео.html you might find it interesting! 👍🏼
Thanks a lot for your efforts, it really helps a lot. Btw i have one more alternative for recording, instead of using the extension where we have to resize the window n all, we can use a screen recorder 'ScreenRec' , on every recording it asks us to select an area we want to record which I think would be perfect. Also if you explore it's settings n all you can see option to record in HD as well as 4K. Btw, thanks ni leta mai❤️
Hey Nikhil, that's awesome. I knew a few tools for windows like OBS, camStudio, etc. But I felt they were little complicated. But this one you mentioned 'ScreenRec' seems like a minimal tool. This will be helpful for many I'll add this link to the description 👍🏼
@@DesignXstream means a lot ❤️❤️
Hey thanks for sharing. I tried it out but seems that it only works for Windows and not Mac OS.
@@abdullahash23 Hey for Mac OS you dont need any tools. It has in-built recording. Check 6:09 in this video!
Hello, thank you so much for this decent video! I am having trouble resizing the prototype browser. I see you can resize it to the size of the phone but I can't, figma forced to have a certain space around the prototype. Do you have any idea why that would happen? Thank you so much!
Hey Jennie, I've faced this kind of issue. However, if that is the case then you will have to use a video editor to crop out the excess space. For this you can use any free online video editors like: www.motionity.app/
The video when downloaded and pasted in figma in gif format pixelates way too much to be used, the extension is quite useful but the result isn't that great.
Hey Manasi this is good for videos! However for GIF I recommend to go for this extension called Capture to GIF: chrome.google.com/webstore/detail/capture-to-a-gif/eapecadlmfblmnfnojebefkbginhggeh
Hii can you make a video on how to upload a video that we recorded to behance 🙏
You can upload it directly on behance in mp4 format. If you want to add some device mockup then check this video: ruclips.net/video/Vx8jyVTazew/видео.html
Thanks for this
Cheers!
Thank You!
You're welcome! ✌🏼
thank u so much it is very useful ;)
Hey Ozgun, Glad you found it informative. Stay tuned for more videos :)
bro…where do you get those templates for a B2C E-Commerce websites such as amazon…etc….?
Which template are you referring to?
Thank you its very helpful :)
Hey Shivani, Glad you found it helpful :)
@@DesignXstream I have one quick question for you. It’s related to figma prototype. So I have a form field that I had designed for an app and to make it scrolable I had put the form field in a clipping mask so while prototyping since it’s a form field I want to show a clickable selected state too and I am unable to do that can u please help. I tried a lot!
@@shivanikalkeri2370 Sorry, I couldn't quite get your query. If possible dm on instagram @designxstream and share the screenshot it would be easier to understand.
@@DesignXstream sure I will do that. I live in Canada so I will do that first thing in the morning. Thanks a lot for offering to help. Truly appreciate it
Hello , please how do you get the embedded code for the mp4 video ?
Figma doesn't support embed code for video. You might have to record it and then put it on RUclips to get a embed code.
thank you my friend
Hey Saul, Glad you found it helpful :)
How do we make those UI kit images ? with the screens in their respective phone models laid out ?
Also is there a way to export the image of the screen in it's phone model i.e the prototype page of figma ? in png , so that it can be placed in presentations
There are a lot of templates for mockup presentation you can check on figma community search. If you would like to create your own 3d mobile mockup template then you can check my tutorial on spline 3d where I showed how to create 3d mobile mockups laid out.
how does your prototype screen not have a round cursor? How do i get a pointed cursor?
If you make the device type as 'None' in 'Show Prototype Settings' then you will have a pointer cursor. And if you choose any device then it will use the round cursor.
I am unable to resize it and when i recorded it surrounding things come in..do you have any suggestion
Record the whole screen and then use online free video editors to crop out the extra areas. You can use tools like media.io and lot more.
Thank you so much..
You're welcome! 👍🏼
I’m unable to resize my chrome tab as much as you did it. It won’t shrink beyond a certain point.
Just came across this free tool: screenrec.com/ this lets you capture selected area.
thankyou
Glad you liked it! Cheers ✌🏼
Terimakasih banyak
Cheers ✌🏼
thanks
Welcome! ✌🏼😊
That was really helpful in presenting my case study :) thanks
Glad it was helpful! :)