Sprinkling WordPress With Some Framer Magic

The People

It all started last year with beta testing the WordPress iOS app. Making software better for millions of people is a hard task. As someone who doesn’t write code, bug hunting was the way to go. The experience proved to be thrilling. I’m making a small dent in the universe.

Part of the reason was Aaron Douglas. An iOS engineer at Automattic who replied to every bug report. He didn’t have to but he did. In 2018 the trend continued. Bug reports were sent out. Emails of appreciation kept coming in. This time from Lorenzo Mattei. Another nice person.

The experience was rewarding but i couldn’t settle for it. I felt i can be of better help. Instead of looking for an answer, the answer found me.

Taking Photos

As an amateur iPhone photographer i share my photos on Instagram (@titanas) but before i do i edit them. Auto fixes. Manual color and brightness corrections. Sharpening. Saturation. You know the drill.

There is a good reason for that. Photos capture moments but beautiful photos tell a story. They trigger feelings. They make memories come alive. They inspire and aspire. They set the mood. Influence the mind.

To my surprise the WordPress iOS app didn’t offer any photo editing tools. I dug into the app trying to find a hidden menu. Did i miss a button? Maybe i had to double tap? Maybe tap and hold or 3D Touch? Nothing happened. Okay. It was time to open Framer and build something.

Flying to Belgrade

I set the water temperature at 94C. Put the beans in the grinder and made the V60 filter wet. Eyeing the scale i started pouring water in slow circular motions. Two minutes in I moved the V60 on the side and placed the cup on the table.

The smell of the Kenyan coffee filled the room. What a delight. I took a few screenshots and fire up Framer in Design mode. Two days later my working prototype idea was ready to show off. I downloaded the prototype in the Framer app and packed my laptop. I had to get ready for WordCamp Europe 2018.

On the flight to Belgrade a thought crossed my mind. A thought that didn’t leave me until i met Cate Huston and Davide Casali.

The amphitheater labeled Milky Way was full. People rushed to take a last minute sit in the center of the WordPress galaxy. Matt Mullenweg was on stage ready to deliver his keynote. Behind him a giant screen lit the room.

The keynote was rolling. A new slide appeared. Major Updates. Customization. WP-CLI. REST API. Mobile Apps. My eyes locked in the bottom right corner. 1.3 million posts and 3.7 millions photos and videos in past month. That’s a lot of photos i thought!

The room was full but I managed to find a place to sit. Cate was delivering her talk on The State of WordPress Mobile. Someone tapped me on the shoulder. I turned and saw my friend George. I nodded but my mind was full of millions thoughts. 3.7 millions to be exact. That and the Framer prototype i had in my pocket.

Cate finished her talk with a big round of applause. She walked off the stage and took a sit next to Davide Casali, Automattic’s product experience director. I had met Davide earlier in the day. I took a deep breath, told George i would be back in a bit and headed towards them. I sighed and took a mental note. I would either make myself look like a fool or help WordPress become a tiny bit better.

I briefly introduced myself and congratulated Cate. I was nervous. A non developer in a room mostly full of devs. A stranger talking to Automattic’s mobile lead about changes to the WordPress iOS app. My heart was pounding. All i had was an idea and a Framer prototype.

My demo was brief. I swiped through screens, tapped buttons, moved a slider. Changed brightness. Made the photo black and white with a tap. Undo the changes. Cate liked it. Davide liked it. Cate said they were thinking about photo editing for a long time. Holly molly! It worked. Framer did the trick.

I found myself lost in the same thought as i was on board to Belgrade. Maybe millions of photos can get better. Maybe millions of people can tell a better story. Maybe as a non developer i can contribute something.

Code is Poetry

Elisa Budelli replied on Slack. She liked the prototype and suggested to do a pull request on Github. I was nervous again. I don’t write code. Crap. I can’t help. Damn. Stupid me. This was all a dream.

It took me a bit to put myself together and reply. I typed that i’m not a developer in a dozen different ways. Each time i deleted everything i wrote. How can i say that i don’t write code to a person who works for a company with the motto Code is Poetry? How do i escape rejection and move my idea forward with only a Framer prototype?

There was only one way. Be honest and hope for the best. I replied to Elisa that i don’t write code but i manage my way around design and Framer. I hit enter and waited.

Framer Magic

A giant wave of euphoria swallowed me. I blinked a few times trying to moist my dry contact lenses. Then i read the message again.

It was okay that i don’t write code. Elisa said they wanted more community inspired designs an ideas. All i had to do was raise an issue on Github. And i did.

People joined the conversation enthusiastically about the first prototype. It was magical. They asked questions. I answered with new Framer prototypes. Improvements. Changes. Additions like this new crazy A.I idea I coined as “Magic Fix”. It kept happening until all was good and solid to move to the next phase.

No Fuzziness

Will the final product look and work like the one i designed if it ever makes it to the app? I don’t know and to be honest it’s irrelevant. Will Magic Fix ever happen in WordPress? My hopes are not high. Did i create something revolutionary? Absolutely not.

All i did was sharing ideas using Framer. I spoke a language everyone understood. It happened fast and it came across with no fuzziness.

Static pixels are beautiful but interaction with beautiful pixels is magical. And like beautiful photos, interactive designs and prototypes tell a story a thousand times better.

framer js page components tutorial how-to

Framer JS Page Components Tutorial & How-To For Beginners

When Steve Jobs announced the iPhone in 2007 he wowed the crowd demoing scrolling. A simple gesture that felt magical back then. There is actually lots of physics and code behind scrolling and not so much magic. Today we take scrolling and swiping effects for granted. Like swiping left or right between screens to view more information. Continue reading…

Framer JS Basics, Tutorial And Examples For Beginners

Framer JS Basics, Tutorial And Examples For Beginners

I’m not a developer. I’m a maker. I don’t code. I built stuff. I love making things happen and learn through the process.

I decided that learning how to code will help me get smarter [1] and express my creative side. After 3 fairly popular apps [2] Framer JS seemed the perfect fit.

The first time i learned about Framer JS was through this video. Continue reading…