Rapid Prototyping

A process using Sketch + Framer Studio


Note: This post is a high-level view of my workflow in developing interactions using Sketch + Framer Studio. It is not a tutorial on using the software. There are great resources for that, I suggest looking at the documentation and joining the FramerJs and Sketch facebook groups. Also, the team at Tack Mobile wrote a fantastic post on the elements of a Framer project here.

As an interaction designer, its important for me to present my design solutions as the simplest answer for the customers of our product- but simplicity is hard.

Typically I like to take a use-case and work through some ideas by sketching. Rapid ideation, working off the previous ideas in a storyboard like manner. There comes a point where you realize a microinteraction could be the answer in helping your users but you need a higher level of fidelity to work through it.

In his book, Microinteractions — Designing with Details, Dan Saffer defines microinteractions as “contained product moments that revolve around a single use case—they have one main task.” These moments of delightcan be incredible additions to your design, they can make tasks memorable and enjoyable for people using them.

Typically microinteractions leverage the use of animation, adding character to what otherwise would be a static element. For my own work I have found the use of animation in transition of actions to help guide our customers through what otherwise would seem like a complex task.

With a LeanUX approach, I had a bit of struggle communicating my ideas to my developer teammates. I have tried many different solutions but many required a lot of effort and didn’t really fit into my workflow.

My own struggle was really working through my idea of coming to a simple solution, getting feedback and iterating—Sketch combined with Framer Studio has been a fantastic solution.

Tools for My Process

Macintosh

Sketch

Sketch Mirror

Framer Studio

Local Server using python SimpleHTTPServer

Dropbox

Sketch

I start by building my assets in Sketch, selecting a preconfigured Art Board that has the dimensions of the device I am designing for. I connect my iOS device to Sketch via Sketch Mirror- it’s incredibly handy to see the assets on the devices screen as you are building them out.

At this point I am usually referring to some paper sketches to get an idea of the number of assets.

My method is building out the framework and then generating it in Framer.

Note: Be mindful of how you group your assets into folders, naming conventions carry into Framer Studio so you can target what you want to interact with.

Framer Studio

First off, FramerJS has a great community- you can find them in the facebook group here.

Recently, Framer Studio — an IDE for FramerJS, has a nice package of features already baked in. I’ve been very impressed with it because at Framer’s humble beginnings these features had to be hacked together (thank you to all the talented people in the Framer community who previously built features that I could use.)

Let’s say you have all your beautiful assets and you’ve added some nice animations. The next step is to test on your device. I typically wait to put my prototype in a Dropbox public folder if I am just doing some preliminary testing. From Terminal on your mac you can create a local host through Python’s SimpleHTTPServer.

Python’s SimpleHTTPServer

First, you’ll need to open Terminal. You can make your project directory a web directory by navigating to it through the console. For me, I create my projects in a sub directory on my Desktop so in Terminal I just type in “python -m SimpleHTTPServer” (no parens) by default this will use port 8000, to specify a different port refer to Python For Beginners - How to Use SimpleHTTPServer in the comment section. Go to your system settings and Network to find your computers IP.

Now, connected to the same network you can access your computer by going to your mobile devices browser and typing in your IP and add a colon plus the port (default again is 8000) ex: 192.168.1.1:8000

Navigate to your projects directory and there you go!

DropBox

Dropbox Public Folders are a great way to share your designs with others. I couldn’t tell you how much of an impact it has on people seeing and interacting with your design.

I simply drop my Framer project in the Public folders directory in Dropbox, navigate to index.html and right-click > Copy Public Link and email it to my team/stakeholders.

In a nutshell, there is the flow of how I develop interactions using Sketch + Framer Studio.

I’d love for you to share with me some of your design workflows and how it helps you and your team communicate.