Getting started on Android UI design hub

In this session, we will explore the changing landscape of Android UI design together, collaborate on innovative solutions, and inspire one another to push the limits of what is possible. For example, the Android Mobile Figma Kit.

Transcript

1. THANK YOU! Let’s get started! Android Worldwide Getting started on Android UI design hub
2. About Hannah • GDE - Android • Engineering Manager Android Worldwide
3. The Agenda • Definitions • Guidelines • Implementation (The why) • Resources • QnA Android Worldwide
4. Android Design Hub A resource with expert advice to help Android developers create visually appealing and user-friendly interfaces for Android apps. Using Figma starter kits, UI samples and galleries. Android Worldwide
5. • Material Design Material is an open-source system that promotes user interface design ideals, facilitating collaboration between developers and designers, and enabling quick product production. Android Worldwide ❏ Foundation overview ❏ Environment ❏ Layout ✓ Navigation ❏ Color ❏ Typography ❏ Sound ❏ Iconography ❏ Shape ❏ Motion ❏ Interaction ❏ Communication ❏ Machine learning Material Material 2 Material 3
6. • Design Tools - Figma 1. WearOS Figma Kit 2. Android Mobile Figma Kit 3. TV Figma Kit Android Worldwide Figma is a collaborative design interface that enables both web and mobile developers build UI designs end to end and these designs can easily be exported as code e.g to Android Studio.
7. Figma Android Worldwide
8. Figma - Plugins Android Worldwide
9. Recommended Guidelines Android Worldwide • For mobile • For large screens
10. ★ Navigation - Navigation bar (Mobile) Android Worldwide M2 M3
11. Navigation - Nav Rail (Large screens) Android Worldwide
12. Android Worldwide Recap
13. Building UIs (Before) Android Worldwide Recap
14. Building UIs (NOW) Android Worldwide Recap
15. Building UIs (NOW) Android Worldwide Recap
16. Resources • https://medium.com/androiddevelopers/introducing-the-android-ui-design-hub-31d000186196 • https://android-developers.googleblog.com/2023/05/introducing-android-ui-design-hub.html • https://developer.android.com/jetpack/compose/tooling/relay/create-ui-package-in-figma • https://m3.material.io/components/navigation-drawer/overview Android Worldwide
17. Thank You! Android Worldwide E-mail : hello@hannaholukoye.com X : @hannah_omu