UI Design a Maps app in Figma - Full course
126.8K views · 2022-05-02
UI Design
Design a Maps app from scratch in dark mode and using the Glassmorphism style in the Figma design tool
📂 Figma file
➡https://www.figma.com/community/file/1101416509039548997/Map-app
🎞 Video timestamps
0:00 - Intro
0:53 - Resources
4:46 - Top Navigation
8:01 - Navigation system
12:01 - Map design
20:47 - Bottom sheet
25:54 - Date Picker
29:12 - Mileage Chart
39:54 - Tabbar
49:33 - Outro
Resources
📱 SF Symbols: https://developer.apple.com/sf-symbols
📱iOS 15 UI Kit for Figma: https://www.figma.com/community/file/984106517828363349/iOS-15-UI-Kit-for-Figma
🤳 Phone Mockups: http://angle.sh
🍔 icons:
https://www.figma.com/community/plugin/744098704933821409/Iconscout---Icons%2C-Illustrations-%26-3D-Assets
🍔Direction icons : https://www.figma.com/file/hmaunHU2aX0SsEeo2vtYUm/Directional-Symbols-(Community)?node-id=1%3A411
🗺Mapsicle Plugin:
https://www.figma.com/community/plugin/736458162635847353/Mapsicle
🪄 Join this channel to watch the entire course on YouTube
➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join
📺 Watch the complete UI Design Quick Apps in Figma course
➡ https://www.youtube.com/playlist?list=PLDaHCLWmCcQLKv4qWsHm7aiuvIhvT3rn1
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/quick-apps-figma
Learn UI Design
🖌 UI Design quick apps in Figma: https://designcode.io/quick-apps-figma
🖌 UI Design for developers: https://designcode.io/ui-design
🌈 Design system in Figma: https://designcode.io/figma
🎨 Figma Handbook: https://designcode.io/figma-handbook
📱 iOS Design Handbook: https://designcode.io/ios-design-hand...
Learn SwiftUI
📱 Build an app for iOS 15: https://designcode.io/swiftui-ios15
📱 Build quick apps with SwiftUI: https://designcode.io/quick-apps-swiftui
🛠 SwiftUI Handbook: https://designcode.io/swiftui-handbook
Follow Me
🐦 Twitter: https://twitter.com/SouranyPhomhome
📸 Instagram: https://www.instagram.com/sou.design
📂 Figma file
➡https://www.figma.com/community/file/1101416509039548997/Map-app
🎞 Video timestamps
0:00 - Intro
0:53 - Resources
4:46 - Top Navigation
8:01 - Navigation system
12:01 - Map design
20:47 - Bottom sheet
25:54 - Date Picker
29:12 - Mileage Chart
39:54 - Tabbar
49:33 - Outro
Resources
📱 SF Symbols: https://developer.apple.com/sf-symbols
📱iOS 15 UI Kit for Figma: https://www.figma.com/community/file/984106517828363349/iOS-15-UI-Kit-for-Figma
🤳 Phone Mockups: http://angle.sh
🍔 icons:
https://www.figma.com/community/plugin/744098704933821409/Iconscout---Icons%2C-Illustrations-%26-3D-Assets
🍔Direction icons : https://www.figma.com/file/hmaunHU2aX0SsEeo2vtYUm/Directional-Symbols-(Community)?node-id=1%3A411
🗺Mapsicle Plugin:
https://www.figma.com/community/plugin/736458162635847353/Mapsicle
🪄 Join this channel to watch the entire course on YouTube
➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join
📺 Watch the complete UI Design Quick Apps in Figma course
➡ https://www.youtube.com/playlist?list=PLDaHCLWmCcQLKv4qWsHm7aiuvIhvT3rn1
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/quick-apps-figma
Learn UI Design
🖌 UI Design quick apps in Figma: https://designcode.io/quick-apps-figma
🖌 UI Design for developers: https://designcode.io/ui-design
🌈 Design system in Figma: https://designcode.io/figma
🎨 Figma Handbook: https://designcode.io/figma-handbook
📱 iOS Design Handbook: https://designcode.io/ios-design-hand...
Learn SwiftUI
📱 Build an app for iOS 15: https://designcode.io/swiftui-ios15
📱 Build quick apps with SwiftUI: https://designcode.io/quick-apps-swiftui
🛠 SwiftUI Handbook: https://designcode.io/swiftui-handbook
Follow Me
🐦 Twitter: https://twitter.com/SouranyPhomhome
📸 Instagram: https://www.instagram.com/sou.design