Prototyping with Code - Using Framer Studio

"Success Comes Through Rapidly Fixing our Mistakes Rather than Getting Things Right the First Time"

- Tim Harford

A prototype simulates part of the behavior of your future app. An advanced and scalable way of describing the behavior of digital products is through code. There are different tools and libraries that try to reduce the time required to produce a prototype with a programming language. In this book, we will make use of Framer.js, a library based on JavaScript, and Framer Studio, a visual prototype development tool based on Framer.js and CoffeeScript.

This prototyping approach can be maintained and developed over time if it is planned properly. Also, thanks to Framer.js, our prototypes will be as realistic as required because we can use high-fidelity designs with advanced gestures and animations. It will allow us to...

Framer.js

Framer.js is an open source framework based on JavaScript for the production of quick prototypes. It allows you to create both basic and more advanced prototypes with detailed interactions (https://github.com/koenbok/Framer).

Framer.js captures the basic building blocks you need to build a prototype in code. You can define and control layers, changes of state, and animations. Framer.js also allows you to import Photoshop and Sketch files using Framer Generator, an application distributed with the framework. This reduces the time you need to create the initial layers of your prototype and the time required to put them together in the right place.

You can start creating your prototypes directly with Framer.js using a general purpose code editor such as Atom or Brackets. However, Framer Studio is a commercial product that has been created with the specific purpose of creating...

Framer Studio

Framer Studio allows you to optimize your prototyping workflow, thanks to a desktop interface that shows the visual result of your code as you write it. In addition, it helps you keep your code simple, thanks to CoffeeScript, a programming language with a syntax for quick writing, which compiles behind the scenes into JavaScript.

In Framer Studio, the user interface is composed of several parts:

• The menu with main actions and some auto-code options to help you build your prototype
• The code editor where you will program your prototype
• The preview area where you will see the design in sync with your code
• Contextual panel with the layer inspector or properties related to a selected item

Screenshot of Framer Studio with a very simple project

Additionally, Framer Studio will allow you to import your designs from Adobe Photoshop and Bohemian Sketch with an easy-to-use...

Understanding CoffeeScript

CoffeeScript is a programming language that compiles into JavaScript. JavaScript is a widely used and powerful language most notably used as the scripting language for the web. CoffeeScript provides a simplified syntax for JavaScript, making the resulting code simpler to write and understand.

With CoffeeScript, you will be able to write simple code describing your prototype, and it will be automatically transformed into JavaScript, so your prototype will work in browsers such as Firefox or Chrome, making your prototypes compatible with multiple platforms, simplifying the process of testing them with real users, and presenting your design ideas to your team and stakeholders.

Here's an example of a simple function in CoffeeScript that multiplies a given number by two. Do not worry if you do not understand the code perfectly as we will explain CoffeeScript...

Let's start coding with CoffeeScript

Although this is not a programming book, we will take a quick tour of some basic CoffeeScript syntax principles; however, you will need some programming knowledge to follow this chapter. If you have never programmed, it is recommended to complete the content of this chapter with a programming tutorial in CoffeeScript.

With the prototypes included in this book, you will be able to start using this prototyping solution and see whether it will be useful for your projects and workflow. You can expand your knowledge with the official documentation where all this content can be found in much greater detail, at http://coffeescript.org/.

Variables and operators

Some of the most basic elements...

Understanding Framer.js

We are going to explain the main elements and concepts that you will need to start prototyping with Framer.

For further information, or as a reference guide, we recommend you to read the documentation offered by Framer Studio at https://framer.com/docs/.

Framer comes with a set of predefined elements that will help you create your prototypes. Framer.js provides several basic building blocks to build the structure of your prototype and help you control the events and actions you need to describe its behavior. Following the order of the official documentation those elements are the Layers that will be the base of our prototype, the Animations that allow us to move and change properties of our layers, the Events that will help us to make our prototype interactive, and the States that help us to create different states of our layers and change among them. We...

Creating prototypes with Sketch and Framer Studio

In this section, we will show some examples using designs created with Sketch and import them with Framer Studio. Although we can create the layers of our prototypes in code, using design software such as Photoshop or Sketch makes the process much more fluid. You can import the result in Framer as layers that we will use to create the prototype by adding interactivity to them.

In this section, we will include several prototypes and, although each one of them will be independent of the others, it is advisable to read them in the order presented, since some basic concepts will be explained in the first prototype in which they appear, and they will be treated with less detail in the subsequent prototypes.

Welcome Tour Prototype

...

Being Pragmatic

Programming a prototype is simple when done slowly. It is common to follow a trial and error strategy while learning a new programming language.

CoffeeScript is designed to be easy to read and program, so it is advisable to look for examples on the internet as you are learning. They will be easy to understand and will teach you new ways to codify your prototypes.

Remember that a prototype should be a fast method of learning as much as possible with minimal effort, and it is better not to go into too complex developments. When developing any functionality in a very detailed way does not contribute anything to your study, opt for developing a functionality that is as simple as possible.

Sometimes, it is better to think of different low-fidelity prototypes that allow you to clarify whether one solution is better than another, looking for clearly differentiated elements...

Summary

In this chapter, we learned the basic principles for building prototypes with CoffeeScript and Framer. We also created some sample prototypes, including many basic elements of Framer Studio.

Framer Studio has become a popular professional prototyping program, so learning how to use it will become a valuable skill. Creating prototypes with Framer Studio will also help you validate solutions with users and present ideas to your teammates.

In the next chapter, we will explain what user testing is and how it can help us improve our application. We will also learn how to organize testing sessions with real users.