Prototyping AR User Experiences with Framer

52mIntermediate2018-05-18

Authors

Emmanuel Henri

Executive with 20+ years of experience in programming and design

Course details

The possibilities for augmented reality (AR) are nearly endless. Developers and designers can leverage this technology to create lively experiences that educate and entertain users. In this course, join instructor Emmanuel Henri as he steps through the conception and creation of an AR-based app prototype using Framer. He begins the course by providing a brief overview of AR and demonstrating how to set up a project in Framer. He then shows how to build AR elements in Framer, explaining how to use modules, add 3D elements into a scene, insert UI elements, and add a few interactions. To wrap up, he shares how to insert a video background to simulate a full AR experience.

Learning objectives
Understanding the concepts behind AR experiences
Starting a new project in Framer
Using modules
Modules setup for Sketchfab
Adding a 3D element into a scene
Adding interactions for UI
Installing the Framer app and testing a full application

Skills covered

FramerJSFramerUser Interface PrototypingUser ExperienceProject

Concepts

0. Introduction

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

1. Setup and Introduction

04 - Project introduction
05 - Understanding AR
06 - AR environment implications
07 - 3D assets used
08 - Setting up a project in Framer

2. Building the AR Elements

09 - Sketchfab setup
10 - Modules introduction
11 - Modules setup for Sketchfab
12 - Add a 3D element into a scene
13 - Insert UI elements
14 - Add interactions for UI

3. Testing and Final Touches

15 - Insert a video background
16 - Install the Framer app and test

Conclusion

17 - Next steps