UI Design - Mobile Design - Figma

Hi, guys, today’s video will be a practical UI Design Tutorial done in Figma. We will design Mobile screen of the app from scratch and we won’t use any advanced functions like auto layout. The reason behind this is that I want to present different approaches to designing in Figma and from a beginners perspective using advanced functions at the beginning may be challenging.

My comments (chapters):
00:34 Design idea
00:59 Color selection
01:32 Color contrast ratio
02:39 Device frame
03:05 iOS Status Bar Figma Community
03:43 Layout grid and 8pt grid
06:35 Icon sources
07:31 Bounding boxes
10:35 Rounded corners
20:19 Photo sources
21:12 Filling element with photos
22:22 Color shades generation
29:49 New device frame
34:03 Style adjustments
34:20 Device mockup & finished presentation

Websites mentioned in the video:
https://maketintsandshades.com/ - Colour shades generation
https://webaim.org/resources/contrastchecker/ - Colour contrast checker
https://coolors.co/ - Colour themes generator
https://www.flaticon.com/ - Icons source
https://elements.envato.com/ - Other resources like photos

Article about 8pt grid, mentioned in the video:
https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179

Watch my UX Design Tutorial for Beginners:
https://youtube.com/playlist?list=PLtZjSN7j6ANyw2Lg9fdKko2cF9gGMhhDr

Link to the Dribbble shot:
https://dribbble.com/shots/16568710-Mobile-Handyman-App-Concept?new_shot_upload=true&utm_source=Clipboard_Shot&utm_campaign=Kerev&utm_content=Mobile%20Handyman%20App%20Concept&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=Kerev&utm_content=Mobile%20Handyman%20App%20Concept&utm_medium=Social_Share

#UIDesign #Figma #ProductDesign #UI #FigmaTutorial #FigmaDesignTutorial #DesignProcess