Prototype a CRM Mobile Application with Framer X

1h 3mAdvanced2019-09-26

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

Developers and designers know that UI mockups have limits. Eventually an interactive prototype is needed to be able to more fully convey the interactions involved in a user’s experience. In this course, Emmanuel Henri shows how to create a prototype of a mobile app using Framer. He starts by showing how to set up a project, gather exported graphics, and import graphics into Framer X. Then he covers how to create each view, link the views, add interactive components, create form inputs, and even animate interactions. Finally, he demonstrates how to complete the prototype so you can deliver it to clients or stakeholders for review.

Learning objectives
Researching other apps for inspiration
Getting assets available for use in Framer X
Creating simple views in an app
Linking screens in an app
Adding scroll functionality to an app
Creating list views in an app
Using app components
Creating form inputs
Adding an alternative data view
Animating with overrides

Skills covered

Framer XFramerUser Interface PrototypingCross-Platform DevelopmentMobile DevelopmentUser ExperienceProject

Concepts

0. Introduction

01 - Prototype a mobile CRM with Framer X
02 - What you should know

1. Overall UX UI Design

03 - Inspiration research
04 - Color and style research
05 - Font research
06 - Assets available for use in Framer X

2. Main Views Creation

07 - Create initial views
08 - Add link for linking screen
09 - Add scroll for people list
10 - Challenge - Create the company list
11 - Solution - Create the company list

3. CRM Interactions

12 - Leveraging components
13 - Creating inputs in your add person form
14 - Finalize the form
15 - Add the detail view

4. Animations

16 - Animating with overrides

Conclusion

17 - Next steps