Framer for UX Design

Course details

Framer is a macOS application for creating JavaScript-based prototypes quickly and easily. This course provides UX and interaction designers with the skills they need to get up and running with Framer for UX design. Instructor Emmanuel Henri shows how to use the visual design tools as well as a little bit of CoffeeScript code to build engaging prototypes. He also shows how to import assets from programs like Sketch, add animation, and insert interactions. At the end of the course, you'll have new skills and a basic watchOS project you can use as a jumping off point for your own UX prototypes with Framer.

Learning objectives
Importing designs from Sketch
Inserting and styling screens
Adding animation
Programming with variables and objects
Programming with functions and code snippets
Adding interactions
Adding animation
Finalizing a Framer prototype

Concepts

0. Introduction

01 - Welcome
02 - Course prerequisites
03 - Using the exercise files

1. A Refresher on Great UX

04 - UX courses and inspiration
05 - Our project UX

2. The Framer UI

06 - Overview of the interface
07 - The design section
08 - The code section
09 - Importing from Sketch
10 - The story behind the prototype

3. The Non-Coding Framer Tools

11 - Second screen with the Design tool
12 - Third and fourth screen with the Design tool
13 - Insert animation with Auto-Code

4. Programming Basics and Usage with Framer

14 - General syntax quick start
15 - Variables and objects
16 - Functions and code snippets

5. Finalizing Our Screen Assets

17 - Create assets for Hunora screens
18 - Create assets for Clestik screens
19 - Challenge - Create final screens of the story
20 - Solution - Create final screens of the story

6. Add Interactions to Our Prototype

21 - Introduction to interactions
22 - Introduction to a scrolling component
23 - Functions for animations and a challenge
24 - Solution to challenge

7. Add Final Interactions to the Prototype

25 - Complex interactions - Initialized states
26 - Complex interactions - Steer right
27 - Challenge - Complete interactions
28 - Solution - Complete interactions

Conclusion

29 - Next steps