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 UA-cam so far. I hope to see more content of yours ;)
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!
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
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. 🙂
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.
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
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!
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.
@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.
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.
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.
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.
@@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.
@@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.
@@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.
@@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)
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"?
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
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?
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?
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!
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
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!
This was one of the best Figma tutorials I have seen. Thank you!
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 UA-cam so far. I hope to see more content of yours ;)
Best tutorial for creating the connections I've come across - thank you so much!
This is the video that helped me to understand Figma! Thanks for creating more content and helping so many people!
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!
Thank you for your tutorials - I found these really good to follow... 'much appreciated'.
God bless you for this tutorial
Now I can confidently do my assignments
Thank you for this video!! Made learning Figma very understandable and I can finally start my assignment!!
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
Awesome tutorial! Never used Figma before, but I honestly feel like from your videos I could totally do it. Thanks for posting!
Most detailed tutorial I found, thanks !
Love to hear it! Thanks for watching, Shoni.
I can only says thanks to you for that deep and clean tutoriel. nice flow nice explanations. Thank you for all
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. 🙂
I am completely new to Figma and this is very resourceful and helpful. Thanks!
Glad you enjoyed it! Thanks for the comment.
¡One of the best tutorials I've found. make more please!
You explained everything so perfectly. Please continue making tutorials.
Man I love this tutorial awesome design btw! Super excited to see more videos of you doing Figma stuff!!!
your tutorials are amazing, thank you
Thank you so much. Very simple and impactful Lecture
You did it again. Thanks for another great tutorial!
Back at it again with the good energy comments. Thanks for all the support!
This was super helpful
Looking forward to more of your videos! Really loved it !
Thank you so much for this video! Easy to follow and understand!
When are we getting some more 1 hour tutorial, the best ever !!
Muchas Gracias again!!!! The best tutorial of UX Design, Thanks a lot.
Glad you found it helpful, Jairo!
Worth to watch, great.. many thanks man 😁
Wow! This is really good. Thanks a lot!
Thanks for watching and commenting!
Fantastic tutorial. As always. Thanks a lot.
One of the best videos on figma !
One of the best comments! Thanks for the support, Jason.
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.
Love to hear it! I'll add a video on portfolios to the list. Thanks for watching.
@@butteracademy Thanks so so much!!!! Much success to you on your journey
I just love ❣️ following your videos 📸 on figma 😅
Great Video!
Very very well done
great tutorial
thanks so much, i really enjoyed the tutorial
Sooo good thank you so much
Love this tutorial!! thanks
You are brilliant！！！！
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
awesome tutorial..thanks
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!
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.
very usefull, thanks!
Amazing
Thank you for the informative Vedios. Can you please keep us posted with new Vedios?
Much appreciated.
Thank you for your video. I would be very happy if you could make another video about the animations.
Check How To Use Figma To Create A Prototype; Step-By-Step Procedure here: justfigma.com/how-to-use-figma-to-create-a-prototype/
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
Hi Butter Academy!
Great tutorial! Can we get one on animations/smart animations? Much appreciated!
Thank you!
Great !!Thank you
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?
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.
Thank you
@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.
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.
Nice one
Waiting for new videos again ☺️☺️
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.
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.
@@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.
@@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.
@@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.
@@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)
Would the instructions be the same if for example I had to bring my other Prototypes I made in a different app like balsamiq?
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"?
Please, what software have you used to create this video?
I mean... The screen record simultaneously with voice over.
Thank you in advance!
Thanks👍
thanks!!
Trying to learn web design. Can anyone tell the difference between Wireframe and Prototype? Thanks
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
i want to start making soft and rapping i have an acer laptop. does soft soft co with good softs already?
You are good
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?
how do i generate that placeholder Paragraph text????
Hi! Can I certificate in Figma with you?
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?
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!
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
At least here it is.
No node appears for me.
Create more videos
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!
Thank you, this was very helpful
thank you!
Thank you!