Improve Your UI Skills with this Figma Exercise | Real-Time Design With Me

[@Madi_Miso]

Love it! Watching an experienced designer work and talk through their thoughts is super helpful. In particular I appreciate the small comments on sizes of margins and touchable spaces- I often feel like I’m just guessing what those sizes should be around!

[@faris026]

Hi Maddy! Thanks for the video. This is really helpful for new designers that sometimes feels confused how to practice our design sense. Your simple explanation for each design change really helped me to understand ui design more.

[@AtheerAl-majrashi]

I am new to UI and this exercise is helpful! thank you so much Maddy

[@mukulmehra6142]

It is Illuminating and edifying and needed a worksheet and principles of Universal Ui design.

[@djashawe88923]

Hi Maddy, I just subscribed to your channel and liked your video. It was incredibly helpful to watch you design in action while getting insight into why you made the changes the way you did. I would certainly like to see more of those concrete examples. For many beginners, deciding on the size of UI elements can be tricky, so it'd be cool if you can explain what's your go to size for the icons, search bar, navigation, tab bar, input field, font sizes etc. Also, it'd be really helpful to watch you design not from scratch but rather using one of the well known design systems like Material Design or the Apple Human Interface Guidelines (HIG), so we can learn how to utilize them for two different devices, iPhone and Android devices. Keep up the good work!

[@juls2334]

Great video! Thanks Maddie! Yes, a Figma worksheet would be awesome! 🎉🎉💗💗

[@TheDesignCorner]

This is so fun & amazing to practice our UI skills. I'm surely gonna try this, Thanks so much Maddy for such awesome videos!!

[@maddybeardUX]

Yay I’m so glad you like this!! 😉

[@TheDesignCorner]

@@maddybeardUX How do I find such screen to practice on? 😬

[@maddybeardUX]

@@TheDesignCorner You can practice on this one if you follow the link in the description box! But if you're looking for something different, you could either browse Dribbble or Behance with a critical eye and look for something you want to improve. OR, pay attention to the apps that you use on a daily basis that you find frustrating or just ugly! haha that is a great place to start too. I'm working on my next video where I'll be doing a similar process with the Poshmark app so stay tuned for that :)

[@TheDesignCorner]

@@maddybeardUX that's a good idea! & yes always looking forward to your videos😋 they're such a bomb!

[@viviannereynoso3591]

This was super helpful and wonderful to watch, I’d love to have some worksheets for practice

[@stephl4277]

Thank you for this amazing video!! I'm starting to practice my UI design skills more and I feel like my brain goes back and forth from UI to UX mode and it's difficult to isolate the two ways of thinking. I like your idea of re-designing something because it helps your brain just focus on the UI elements!

[@manonroy7548]

I'm a graphic designer of 25 years and am now making the jump into UI. I would love a practice sheet. I took my certification last year and need some practice.

[@rodrigoaquije2534]

thanks for the great video. maybe an excercise using components and atomic design next time?

[@vanessadesign93]

Omg yes! Do more, I loved it and will try to do this weekly

[@anabaldinger6477]

Love the idea of a Figma worksheet!

[@masayorimoto6499]

I really enjoyed this video and I would love to see more like it.

[@maddybeardUX]

Yay! Thank you! More to come!

[@arafat.uiandux]

Awesome! It was very helpful. Loved it. Thanks for sharing. Please make more like this. And please make the figma work sheet you were talking about. Thanks again ❤❤❤

[@maddybeardUX]

Hey I actually did make that workbook! :) check it out here if you want maddybeard.ck.page/products/figma-workbook-10-design-challenges

[@TetianaShevchuk-y5l]

Thank you very much. This is a super useful video, love it!

[@richatj7138]

I really liked the entire video !

[@madhawapriyashantha3722]

very useful.thanks. plz do more..

[@SpabRog]

Learned a lot, this great insight. Wish you all the best 😎😎

[@airen-f2r]

hey, Amazing video! I have a question though. I was redesigning a screenshot of an app too. I'm confused about the icons used in the specific websites. For example, you also used the exact same icons as the screenshot, where do you find the exact same icons as a website. Like the cart icon, camera icon etc. Do you take a screenshot of it and convert it into an SVG? Also, How do you recognise the font in the screenshot?

[@petryyy333]

Please make more of these

[@apoorvamhalsekar409]

Hey Maddy, I love it when you delve into videos like this and a super big yes to more of these videos and worksheet. We can perform the exercise simultaneously. I was wondering though how did you make a screenshot of a random screen into an already designed and movable elements version ? ( My bad for framing the question badly but how did you convert an image into an interactive type?)

[@maddybeardUX]

Yay I'm so glad you liked this!! I literally recreated it in Figma “by hand” so it took a while! I wish there was an easy way to do it but im not aware of one :/

[@apoorvamhalsekar409]

@@maddybeardUX way to go 😍 I'm definitely trying it out. Also, i'll be starting 50 days UI design challenge tommorw to build up my skills. Wish me luck✨☺

[@maddybeardUX]

@@apoorvamhalsekar409 Oh so fun!!! Good luck!!!

[@PoorvaShukla-g2o]

cool exercise!

[@Abcd12562]

Thanks for the great video, would really appreciate if you could make a similar video on improving UX skills too please :)

[@prekshajain483]

Please make more videos like this

[@tristenlawrence1450]

Question (maybe a dumb one): but to start did you just recreate from a screenshot? Or did you just visually recreate in Figma from what you saw? In that case where did you get the icons with the stroke or did you make those?

[@maddybeardUX]

I recreated it manually! Yeah one of my favorite free icon sources is iconoir.com :)

[@ShredzZ_SteamDeck_Gameplays]

Hi, what do you think about using Sketch if I want to be freelancer? Is this tool good or everybody now using Figma?

[@alinamagical]

Figma

[@maddybeardUX]

I haven’t used sketch in years! I prefer Figma and I believe that’s what most people are used to these days :)

[@danny8493-u1m]

Thanks!

[@azamjiriyayisharahi7125]

love it tanks

[@Zahra-Opaia-0]

awesom

[@petermichael3490]

💯💯💯!!

[@uxdan]

You look like Enid from Wednesday.👧

[@ikerbfp]

Hi Maddy! I love all your videos!! 🤩. I'm from Spain but if i can go Unit Esteits i will go for you.