Getting started Prototyping with Sketch & Framer Studio

Mentally Friendly
Aug 2, 2016 · 5 min read

By Ed Corcoran (Digital Product Designer)

Check out this prototype at http://share.framerjs.com/3kxxkq8bgk9i/

What is a prototype?

By definition — A prototype is an early sample, model, or release of a product built to test a concept, process, or an example to learn from.

A prototype for a digital product can be made using various different mediums — sketches on paper, clickable static designs or even more advanced prototypes made with HTML, CSS and JS.

No matter what medium you use, a prototype is meant to be an easy way of determining the feasibility of an idea or a new design without going through all of the normal production steps — which can be time consuming and in a lot of cases, unnecessary.


The Tools

Just as there are different mediums for creating prototypes there are different tools too. The two I have been using regularly of late are—

Sketch, a standard in most UI designers repertoire, it is a vector based design app created specifically for designing interfaces, websites, and icons.

and Framer Studio, a prototyping app built with javascript that allows you to write animations and interactions using coffeescript, a shorthand version of javascript.


Prerequisites?

Sketch should be fairly familiar to anyone who has used any sort of editing software on a Mac and easy to pick up for those who haven’t. If you need somewhere to start, check out their video tutorials and resources available on their website.

Framer Studio has a bit more of a steeper learning curve. It is not integral to have a complete knowledge of javascript or coffeescript but it is good to have some experience with coding concepts like objects, if statements, loops, and functions. If you need a quick intro there are some great docs on their website.


Designing in Sketch for Framer Studio

These are a few tips to consider when preparing your sketch designs to be imported into framer studio.

Naming Artboards and Layers, it’s best to avoid using spaces and even dashes because it will cause problems with syntax in your coffee script — It’s best to stick to camelCase or names_with_underscores.

Nesting your layers in groups — when framer imports a sketch file it only allows you to target groups, so make sure you have each layer you want to animate or interact with in its own group.

Dividing your designs into “Pages” or “Scenes” — if you have several screens that have common elements, for example an onboarding process, I found the easiest way to prepare your sketch file is to merge all your artboards before you import them. If you do this then you can show and hide the layers you need in framer and their default positions will already be set.

The last quick tip is to remember that Framer only allows you to target groups, it can’t change colours of text or shape layers from Sketch, so you need to keep that in mind when planning your prototypes animations and transitions.


Creating your protoypes in Framer Studio

Logical & Lateral Thinking are your friends when planning out your interactions and animations. These tips might not mean much right now but if you keep them in mind it will save you time in the future, I promise.

Use Variables — if you use any value multiple times throughout your code you should make it a variable so if it needs to be changed you only have to do it once.

Loops for repeated elements — for the same reason you would use variables creating arrays of similar elements that have the same properties applied to them saves you time and headaches when changing values further down the track.

Make functions and event listeners — If you split the different steps or stages of your prototype into functions you can trigger them multiple times, or even in reverse order.

Add your own properties to your elements to check for things, adding extra properties to layers and objects can help you add logic to your prototypes.

The last tip is always leave comments on your code, you may know exactly what your code means while you’re working on it but a few days, weeks or months down the track you may not.


Benefits for Development

Making prototypes definitely does help bridge the gap between your flat designs and the final product, you spend less time explaining how you imagine your designs coming to life in your mind, which means less interruptions to workflow, and an increase in productivity!

And although the coffeescript you write for your prototypes don’t necessarily translate to production code, there are values and timings that can be used by a developer to reduce development time.


A Final Thought

Remember whilst it’s always great to up skill and try out new tools, even learn a new coding language — you should never let that stop you from creating a simpler prototype in the meantime. Any test in any fidelity is better than no test at all.

73

73 claps
Mentally Friendly

Written by

Designing for wellbeing outcomes across products, teams and policy.