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.io/plans?ref=maddy
ProtoPie School: learn.protopie.io/
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/lntxpc7rp0t8
》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!

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

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

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

[@vanessaleitao5186]

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

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

[@viviannereynoso3591]

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

[@anabaldinger6477]

Love the idea of a Figma worksheet!

[@SpabRog]

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

[@rodrigoaquije2534]

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

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

[@user-nt4ec3kn5b]

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

[@madhawapriyashantha3722]

very useful.thanks. plz do more..

[@petratataj5024]

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

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

[@prekshajain483]

Please make more videos like this

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

[@danieltsega8493]

Thanks!

[@richatj7138]

I really liked the entire video !

[@masayorimoto6499]

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

[@MaddyBeard]

Yay! Thank you! More to come!

[@Abcd12562]

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

[@Zahra-Opaia-0]

awesom

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

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

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