Prototyping interactions with 3D models
2021
Concept app
Context
In 2021, 3D was becoming increasingly popular and accessible, especially with the growing adoption of augmented reality in mobile apps—ranging from entertainment (like Pokémon Go and Snapchat) to utility tools (like iOS Measure, Google Lens, and IKEA Place).
As a designer, I wanted to explore how to design interactions and experiences using 3D objects.
Challenge
Although I had some previous experience with Unity during a university internship, I hadn’t worked with 3D in several years, and the field had evolved considerably.
While Unity was still a solid option, I wanted to explore less technical alternatives. At the time, however, design tools for 3D interactions were still limited and often required some coding skills.
My approach
I looked for tools that could limit the need for coding and found an insightful Medium article about using Framer with the Sketchfab API for easy 3D interactivity.
Inspired by this, I explored both platforms and started working on a 3D concept app.
Outcome
After a few days of getting familiar with Framer and Sketchfab, I designed a concept app to view skateboarding tricks in 3D.
This app illustrates how 3D can be used to help people learn physical skills by watching a movement from different angles and controlling playback speed with gestures for zoom and rotation.
This experiment showed that I was capable of prototyping 3D interactions. It also helped me land a position at Holotch, a Japanese startup working with 3D in virtual and augmented reality.
Video recording of the 3D concept app made with Framer (2x speed)
Takeaway
While some coding is still required, Framer and Sketchfab pair well for quickly prototyping 3D interactions.
The Sketchfab API simplifies working with 3D by giving access to existing models and built-in controls for rotation and zoom. Framer complements it with a smooth way to build UI overlays and connect interactions around the 3D content.
