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

☆ Download the Figma file from this video: bit.ly/3Yv5STk
Try Figma: bit.ly/figma-free
A lot of people ask me how to get better at UI design, and my answer is always the same: PRACTICE! So in this video I’m going to do an exercise I’d recommend to anyone looking to improve their UI design skills. We'll grab a screen, pop it in Figma, and walk through how we could make it better.
ProtoPie: www.protopie.i...
ProtoPie School: learn.protopie...
Use code MADDY at checkout for 30% off your Pro Plan
More 'Design With Me' Videos: bit.ly/41UdHEU
◤ My Online Courses
》Intro to UI/UX: bit.ly/3Udrr8B
》Create your design Case Study: bit.ly/3gLlhio
》6 Tactics for Organization in Figma: skl.sh/3s2dwXx
》6 Tips for Components in Figma: skl.sh/3OfOluM
◤ Shop My Favorites
》fonts: bit.ly/3ugAafz
》screen recording: loom.grsm.io/l...
》mockups: bit.ly/3OcOmhI
》desk accessories: bit.ly/3iCIwJ0
》filming & gear: amzn.to/3wLLF0k
◤ Follow Me
》instagram: @itsmaddybeard
》email list: maddybeard.ck.page
》behance: behance.net/maddybeard
☆ For Business Inquiries: email [e-mail]

[@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.

[@juls2334]

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

[@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!

[@AtheerAl-majrashi]

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

[@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!!

[@MaddyBeard]

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

[@TheDesignCorner]

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

[@MaddyBeard]

@@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]

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

[@rodrigoaquije2534]

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

[@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.

[@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!

[@lanaeartz]

This is amazing. I definitely think UI and UX practice videos would be very helpful. Great video

[@madhawapriyashantha3722]

very useful.thanks. plz do more..

[@viviannereynoso3591]

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

[@masayorimoto6499]

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

[@MaddyBeard]

Yay! Thank you! More to come!

[@vanessadesign93]

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

[@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 ❤❤❤

[@MaddyBeard]

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

[@anabaldinger6477]

Love the idea of a Figma worksheet!

[@PoorvaShukla-g2o]

cool exercise!

[@user-nt4ec3kn5b]

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

[@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?

[@Abcd12562]

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

[@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?)

[@MaddyBeard]

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]

@@MaddyBeard 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✨☺

[@MaddyBeard]

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

[@petryyy333]

Please make more of these

[@richatj7138]

I really liked the entire video !

[@prekshajain483]

Please make more videos like this

[@azamjiriyayisharahi7125]

love it tanks

[@danieltsega8493]

Thanks!

[@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?

[@MaddyBeard]

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

[@ShredzZ]

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

[@MaddyBeard]

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

[@petermichael3490]

💯💯💯!!

[@Zahra-Opaia-0]

awesom

[@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.