Prototype a CRM Mobile Application with Framer X

Learn how to create a prototype of a mobile app using Framer X.

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.

Introduction

• Prototype a mobile CRM with Framer X
• What you should know

1. Overall UX/UI Design

• Inspiration research
• Color and style research
• Font research
• Assets available for use in Framer X

2. Main Views Creation

• Create initial views
• Add link for linking screen
• Add scroll for people list
• Challenge: Create the company list
• Solution: Create the company list

3. CRM Interactions

• Leveraging components
• Creating inputs in your add person form
• Finalize the form
• Add the detail view

4. Animations

• Animating with overrides

Conclusion

• Next steps