Learning Framer 01: AlphaBits

Over Christmas break, I began learning Framer to build up my prototyping skills. From day one, I must admit, I was hooked. The ability to realistically simulate interaction ideas in a concrete and compelling way is liberating. Already, I can feel my confidence growing. 

Learning Framer has also allowed me to strengthen my beginner-level coding skills. Once I got through the basics, I began to dive into the juicer stuff. I revisited old friends like Fraulein For-loop and Constable Conditional, and I met new acquaintances such as Event Listener, Esquire and Señor Random(). With these tools in tow, I realized I could make things beyond interactive animations.

The first of these projects is a digital toy called, AlphaBoxes. I created it for my 18-month-old goddaughter, Olive. Currently, her two favorite things to do are reciting her ABCs and swiping on her mom’s iPhone. This is a productive way for her to do both. 

A video of the prototype in action. 

Once I had the prototype in working order, I sent it to my aunt, Olive’s grandmother. Together, they tried out the toy and recited their letters. Even Olive’s cousins, all under the age of 4 at the time, joined in. Knowing it was engaging to my favorite kids was exciting, and it inspires me to create more playful experiences for them to enjoy. 

Click here to view and download the prototype

A quick sketch to capture thoughts on how the prototype should function.  

---

CODE NOTE: 
For this prototype, I learned how to create and parse a JSON file. I’ve become familiar with JSON through my professional work, but this is the first time I’ve practically applied it to code. Seeing its power first-hand has augmented my appreciation for the folks on my team who wrangle JSON on a daily basis. I’m also excited to apply it to another project in an even more compelling way.