Тёмный

Figma Tutorial - Prototyping in Figma 

Butter Academy
Подписаться 12 тыс.
Просмотров 202 тыс.
50% 1

Опубликовано:

 

29 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 95   
@theafroveggie
@theafroveggie 2 года назад
This was one of the best Figma tutorials I have seen. Thank you!
@LucasPage
@LucasPage 3 года назад
Great tutorial! Not sure why you stopped the videos or never created the course in your website but you should definitely continue! I found your tutorials the most helpful to learn figma in RU-vid so far. I hope to see more content of yours ;)
@loomonda18
@loomonda18 Год назад
Best tutorial for creating the connections I've come across - thank you so much!
@victoria-exito
@victoria-exito Год назад
This is the video that helped me to understand Figma! Thanks for creating more content and helping so many people!
@FrankJArado
@FrankJArado 2 года назад
I have no words to thank you for having found your platform here. Excellent demonstration of taking your education to others. Very professionally detailed and marked in an impeccable rhythm. Thank you; and you have respectfully got my subscription!
@joyaroha6683
@joyaroha6683 11 месяцев назад
Thank you for your tutorials - I found these really good to follow... 'much appreciated'.
@CasekitDotCo
@CasekitDotCo Год назад
Best hour I’ve ever spent! Thank you!!! I love how there are so many things you ran into which led to helping me figure out how to solve certain problems like the headers and changing them or making something a component
@mouldy_stuffings3446
@mouldy_stuffings3446 6 месяцев назад
Thank you for this video!! Made learning Figma very understandable and I can finally start my assignment!!
@leandrekoffi
@leandrekoffi 2 года назад
I can only says thanks to you for that deep and clean tutoriel. nice flow nice explanations. Thank you for all
@cmeds25
@cmeds25 3 года назад
Awesome tutorial! Never used Figma before, but I honestly feel like from your videos I could totally do it. Thanks for posting!
@ajalajessica3601
@ajalajessica3601 Год назад
God bless you for this tutorial Now I can confidently do my assignments
@shanzakhan
@shanzakhan 3 года назад
You explained everything so perfectly. Please continue making tutorials.
@philipagwu3966
@philipagwu3966 2 года назад
Thank you for taking time in explaining - your illustration is well articulated. Awesome stuff! If I could buy you lunch, I would be delighted. I look forward to more of your tutorials. Thanks for sharing this. 🙂
@hasinmahjabeen7252
@hasinmahjabeen7252 Год назад
I am completely new to Figma and this is very resourceful and helpful. Thanks!
@butteracademy
@butteracademy Год назад
Glad you enjoyed it! Thanks for the comment.
@shonifari5783
@shonifari5783 3 года назад
Most detailed tutorial I found, thanks !
@butteracademy
@butteracademy 3 года назад
Love to hear it! Thanks for watching, Shoni.
@EmoreRukevwe-mq3yn
@EmoreRukevwe-mq3yn 11 месяцев назад
I just love ❣️ following your videos 📸 on figma 😅
@jumpshotfreak623
@jumpshotfreak623 3 года назад
When are we getting some more 1 hour tutorial, the best ever !!
@obidelight
@obidelight Год назад
Thank you so much. Very simple and impactful Lecture
@SofiaSanchez-er2st
@SofiaSanchez-er2st 2 года назад
¡One of the best tutorials I've found. make more please!
@Idonije_E
@Idonije_E 3 года назад
your tutorials are amazing, thank you
@Hutututu
@Hutututu 3 года назад
Man I love this tutorial awesome design btw! Super excited to see more videos of you doing Figma stuff!!!
@livio8
@livio8 2 года назад
Thank you so much for this video! Easy to follow and understand!
@nataliewray7743
@nataliewray7743 3 года назад
You did it again. Thanks for another great tutorial!
@butteracademy
@butteracademy 3 года назад
Back at it again with the good energy comments. Thanks for all the support!
@ameneko091
@ameneko091 3 года назад
Looking forward to more of your videos! Really loved it !
@NeratSamuel
@NeratSamuel Год назад
This was super helpful
@catleencapalar4074
@catleencapalar4074 Год назад
Wow! This is really good. Thanks a lot!
@butteracademy
@butteracademy Год назад
Thanks for watching and commenting!
@viveksinghGusain
@viveksinghGusain 2 года назад
Worth to watch, great.. many thanks man 😁
@f_cox85
@f_cox85 4 года назад
Muchas Gracias again!!!! The best tutorial of UX Design, Thanks a lot.
@butteracademy
@butteracademy 4 года назад
Glad you found it helpful, Jairo!
@MOHAMEDHASSAN-fk9jv
@MOHAMEDHASSAN-fk9jv 3 года назад
Fantastic tutorial. As always. Thanks a lot.
@elcasa6587
@elcasa6587 4 года назад
Absolutely love watching and learning from your videos! Can you show how to establish or make this into a portfolio piece to share with employers (Like maybe Behance or other web hosting providers)? Thanks again so much! I'm sharing your site with all my classmates.
@butteracademy
@butteracademy 4 года назад
Love to hear it! I'll add a video on portfolios to the list. Thanks for watching.
@elcasa6587
@elcasa6587 4 года назад
@@butteracademy Thanks so so much!!!! Much success to you on your journey
@Soromidayo
@Soromidayo 2 года назад
Thank you, this was very helpful
@sophiasun1603
@sophiasun1603 Год назад
Best tutorial ever!!! Please post more videos or may be a master class on Skillshare please. I totally agree with @LucasPage - most helpful tutorial ever.
@jason_liam
@jason_liam 3 года назад
One of the best videos on figma !
@butteracademy
@butteracademy 3 года назад
One of the best comments! Thanks for the support, Jason.
@aboudyel-far3020
@aboudyel-far3020 2 года назад
Thank you for the informative Vedios. Can you please keep us posted with new Vedios? Much appreciated.
@abhishekgupta0108
@abhishekgupta0108 2 года назад
Great Video!
@SlimeDesign_
@SlimeDesign_ Год назад
great tutorial
@newtonoluoch8103
@newtonoluoch8103 2 года назад
Very very well done
@iamabdus
@iamabdus 2 года назад
Check How To Use Figma To Create A Prototype; Step-By-Step Procedure here: justfigma.com/how-to-use-figma-to-create-a-prototype/
@Karla-yf5qb
@Karla-yf5qb 3 года назад
Thank you for your video. I would be very happy if you could make another video about the animations.
@fitrinovianti_h
@fitrinovianti_h 9 месяцев назад
very usefull, thanks!
@joselynhernandez819
@joselynhernandez819 2 года назад
style I downloaded the demo to soft soft yesterday, and I'm going to learn from you to make my own stuff, and I wanted to leave tNice tutorials
@ingridrosas924
@ingridrosas924 3 года назад
Love this tutorial!! thanks
@nancyadaeze1901
@nancyadaeze1901 3 года назад
Amazing
@AokiZhang
@AokiZhang Год назад
You are brilliant!!!!
@GauthamKrishnan99
@GauthamKrishnan99 3 года назад
Thank you!
@rolandherbemont4503
@rolandherbemont4503 3 года назад
Sooo good thank you so much
@bananasandmayo
@bananasandmayo 2 года назад
Ok question. What if there are more than 2 breadcrumbs and I need to link out to another page (Ex: Women/Sneakers/Running) If the box has been shortened so that "Women" can link out correctly can I still link "Sneakers" or "Running"?
@financial_doctor
@financial_doctor 2 года назад
Waiting for new videos again ☺️☺️
@mindyourgaps2978
@mindyourgaps2978 3 года назад
Totally new to Figma. Excited about the prospect of creating new stuff. Have a question that might sound dumb to you pros. Can you let me know where I can find a keyboard to add to the bottom of my mobile phone (in a new mobile app I am trying to draw). There must be a realistic looking keyboard somewhere.....Thank you!
@muskansolanki8353
@muskansolanki8353 3 года назад
awesome tutorial..thanks
@julesm9081
@julesm9081 3 года назад
This is an amazing video thank you I want to use Figma to create portfolio pieces to try and get a job in ux I was made redundant last august- is Figma free ? Thank you Jules
@ShaziasDelicacyandVlogs
@ShaziasDelicacyandVlogs 2 года назад
Great !!Thank you
@UsamaMahmud-o1y
@UsamaMahmud-o1y 5 месяцев назад
Nice one
@arunachalammurugesan4004
@arunachalammurugesan4004 3 года назад
after creating the firat connection from the home page, i cannot make the second connection..When i click another button, the node is not showing up..please help..thank u
@devolta
@devolta Год назад
Thank you
@Ankitkumar-bn2bs
@Ankitkumar-bn2bs 3 года назад
When i protype my content is quite enlarged and the components inside it are floating here and there. When i set the settings to resize to fit it just stretches my content down. Any solutions to this?
@tontonbaccay7985
@tontonbaccay7985 Год назад
Trying to learn web design. Can anyone tell the difference between Wireframe and Prototype? Thanks
@ivanc8874
@ivanc8874 3 года назад
Would the instructions be the same if for example I had to bring my other Prototypes I made in a different app like balsamiq?
@actf9480
@actf9480 2 года назад
Please, what software have you used to create this video? I mean... The screen record simultaneously with voice over. Thank you in advance!
@KelvinChiuFilms
@KelvinChiuFilms 3 года назад
Fantastic video. In terms of sharing the prototype, can I use the 'embedded code' and have it run live on my portfolio website? How does that work?
@butteracademy
@butteracademy 3 года назад
Thanks, Kelvin! You got it. When you share your prototype in Figma you can select the "Get embed code" option, and paste that code into your HTML.
@elenarodriguez5123
@elenarodriguez5123 2 года назад
i want to start making soft and rapping i have an acer laptop. does soft soft co with good softs already?
@msmaar2686
@msmaar2686 3 года назад
Hi Butter Academy! Great tutorial! Can we get one on animations/smart animations? Much appreciated!
@sarispazio
@sarispazio 3 года назад
@ButterAcademy Thanks for the video! I saw that for the men's section you doubled the woman's one and transformed it into the man. But what should I do for each individual product when I have many different products? Do I have to create new sections for each single product? Or is there the possibility to create a basic one and use it by changing only its content inside? How many sections do I need to do for example if I have 25 products that are all different? Do I have to make 25 frames for each single product? That would be crazy! Please let me know. I can't find the answer on the internet.
@parrapaTh3Rappa
@parrapaTh3Rappa 2 года назад
I know it's been a while and I'm not exactly sure what you're trying to achieve. But if those 25 product pages have a similar design structure, then you would just make one frame showing the (product page) and leave it at that. You could link all of the products on the page to that same frame, but one is generally enough, as it's just a prototype showing what clicking one of the products would do; it's assumed that the space will be filled with different information for different products.
@raymasraymas
@raymasraymas 2 года назад
Anyone had problems with images not showing when you play the prototype? Some of my images appear just fine and some don’t appear at all when I play prototype
@Underhills
@Underhills 3 года назад
Having to work on so many frames to link different states is not very practical. In XD there's this thing called component states, it's pretty neat. You just switch states on the same component instead of having to have one state per frame and the other on the other etc. It's gonna be a helluva lot of frames that way.
@stratoskatsipidis9395
@stratoskatsipidis9395 3 года назад
Hi i'm also using XD the only thing that i don't like with it is the text tool, figma text tool you have so many options like you can adjust the height of the bounding box in any mode point text in auto height, and you can center - top - bottom alighn. In XD the line height is locked to a defualt value you enter a value and nothing changes.
@Underhills
@Underhills 3 года назад
@@stratoskatsipidis9395 I hate the Figma text implementation. There's no way to get the container to wrap around the text, it creates this weird empty space either over or under the text, I have to drag the text container but it doesn't work cause when I have dragged the bottom part towards the text the topmost part of the text container grows. There's always this top and bottom space between the text and the bounding box edge making it impossible to generate correct markup in code specs tools such as Avocode, Zeplin etc cause the margins outside the text will be totally wrong. It's also very hard to see distance between the actual text and other UI elements in my design when the bounding box doesn't wrap tight around the text. Align top, middle, bottom doesn't change that. Also there's no text color in text style, what's up with that? You can't edit the text color globally for styles.
@stratoskatsipidis9395
@stratoskatsipidis9395 3 года назад
@@Underhills Thanks for your reply and your also right with what you saying, so how you handle measuring the distance between the text box and other elements ? i have this problem and i don't know how to solve it!!! example i have a header single line point text at 16px XD generates a line height of 19px box around the header, and the text inside the box is not equal distance top bottom !! also you can't change the height of the box to get a round number, or trim it down to the exact size of the text as a developer would do !! or in framer x text tool that you can crop it.Please tell me a way to get the distance right between text and elements. Thanks in advance i'm new to this, I greatly appreciate your help.
@Underhills
@Underhills 3 года назад
@@stratoskatsipidis9395 I was talking about the awful way Figma handles text, not XD. I have very little issue with the latter but all the issues in the world in Figma that I'm forced to use right now.
@stratoskatsipidis9395
@stratoskatsipidis9395 3 года назад
@@Underhills i know you where talking about figma.But If you have sometime let me know how about you handle text in XD. (example i have a header single line point text at 16px XD generates a line height of 19px box around the header, and the text inside the box is not equal distance top bottom !! also you can't change the height of the box to get a round number, or trim it down to the exact size of the text as a developer would do !! or in framer x text tool that you can crop it)
@patiuiux5749
@patiuiux5749 3 года назад
thanks!!
@richagurav
@richagurav 3 года назад
Thanks👍
@elcasa6587
@elcasa6587 4 года назад
In Prototyping, can I cannot image to image, rather than image to page? I have images on one frame that change on frame 2. As of now, whatever I select on frame 1 isn't being redirected to the desired image change on 2. If that makes sense?
@butteracademy
@butteracademy 4 года назад
I know what you're saying! What you can do is create a separate frame where all that changes is the image. Then when you create your connection, you can check the "Preserve scroll position" option in the Interaction Details popup. Let me know if this works!
@digitaltechware8658
@digitaltechware8658 3 года назад
You are good
@avatr7109
@avatr7109 3 года назад
how do i generate that placeholder Paragraph text????
@victoria-exito
@victoria-exito 2 года назад
Hi! Can I certificate in Figma with you?
@tientcheufansi8181
@tientcheufansi8181 2 года назад
At least here it is.
@tubesurfer007
@tubesurfer007 2 года назад
No node appears for me.
@Factsmachine92
@Factsmachine92 2 года назад
Create more videos
@Underhills
@Underhills 3 года назад
Hopeless that I'm not allowed to just select any random frame and then hit the prototype icon. I'm unable to open any frame I want, it starts to open other frames instead, and you obviously have to add a single starting indicator point to the only frame your able to open. Doesn't make sense to be forced to add that thing all the time as focus is switching between multiple frames in my project. Should just be like in XD, you just select any frame you wanna see in prototype mode and the watch any interaction play out for that frame. But having to move that starting indicator around all the time? C'mon ,what's up with that? Figma feels so quirky. I just wanna see whatever frame I select in prototype sessions. And what's up with the text containers in Figma? There's no way to get the container to wrap around the text, it creates this weird empty space either over or under the text, I have to drag the text container but it doesn't work cause when I have dragged the bottom part towards the text the topmost part of the text container grows. This makes the code specs turn out top and bottom margins from text to everything else all wrong. Jisses that's annoying!
@raphaelidowu1484
@raphaelidowu1484 3 года назад
thanks so much, i really enjoyed the tutorial
@AlanHofman
@AlanHofman 4 года назад
Thank you!
@Alina_Sauer
@Alina_Sauer 3 года назад
thank you!
Далее
Figma UX tutorial for beginners - Prototype
11:42
Просмотров 193 тыс.
Free Figma Tutorial: Designing Wireframes with Figma
1:00:39
Design and Prototype a Delivery App for iOS in Figma
39:34
Animated Navigation Bar in Figma - Prototyping Tutorial
11:45
Figma vs Adobe XD: What's the Difference?
5:05
Просмотров 10 тыс.
7 Portfolio Websites That Will Make You Jealous
10:07
Просмотров 856 тыс.