How to Create Beautiful Mobile User Interfaces with Figma
Hi, guys, today I present to you a practical Figma Tutorial for total beginners. I will share some helpful UI design tips and we will design mobile screen of the app from scratch. 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/ - Color shades generation
https://webaim.org/resources/contrast... - Color contrast checker
https://coolors.co/ - Color themes generator
https://www.flaticon.com/ - Icons source
https://elements.envato.com/ - Other resources like photos
Article about 8pt grid, mentioned in the video:
/ the-comprehensive-8pt-grid-guide
Watch my UX Design Tutorial for Beginners:
• UX Design Tutorials
#uidesign #figma #productdesign#ui #figmatutorial #designprocess
Watch video How to Create Beautiful Mobile User Interfaces with Figma online without registration, duration hours minute second in high quality. This video was added by user Kerev Design 01 October 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 955 once and liked it 47 people.