Framer for UX Design

Learn how to use Framer in your UX design process. This course shows how to build UX prototypes complete with interactions and animation.

Introduction

• Welcome
• Course prerequisites
• Using the exercise files

1. A Refresher on Great UX

• UX courses and inspiration
• Our project UX

2. The Framer UI

• Overview of the interface
• The design section
• The code section
• Importing from Sketch
• The story behind the prototype

3. The Non-Coding Framer Tools

• Second screen with the Design tool
• Third and fourth screen with the Design tool
• Insert animation with Auto-Code

4. Programming Basics and Usage with Framer

• General syntax quick start
• Variables and objects
• Functions and code snippets

5. Finalizing Our Screen Assets

• Create assets for Hunora screens
• Create assets for Clestik screens
• Challenge: Create final screens of the story
• Solution: Create final screens of the story

6. Add Interactions to Our Prototype

• Introduction to interactions
• Introduction to a scrolling component
• Functions for animations and a challenge
• Solution to challenge

7. Add Final Interactions to the Prototype

• Complex interactions: Initialized states
• Complex interactions: Steer right
• Challenge: Complete interactions
• Solution: Complete interactions

Conclusion

• Next steps