Creating Prototypes for iOS and Android With Framer: Basics

Creating Prototypes for iOS and Android With Framer: Basics


These days, you don’t need image editing software like Adobe Photoshop or Gimp to create user interface mock-ups for your mobile apps. An app that conforms to Google’s Material Design language is usually composed of only simple geometric shapes, solid colors, icons, and text. A user interface prototype for such an app can be created easily using just code.

In this two-part series, you are going to learn the basics of Framer, an open source Javascript framework that lets you programmatically create interactive and realistic prototypes with beautiful animations for iOS and Android apps.


To follow this tutorial, you will need:

  • the latest build of the Framer framework
  • Google Chrome or any other WebKit-based browser
  • Python 2.7 or higher
  • a text editor
  • a basic understanding of HTML, CSS, and Javascript

1. Initial Setup

Step 1: Create an HTML Page

Because a Framer prototype is nothing but an ordinary web page written in HTML, CSS, and Javascript, let’s start by creating a blank HTML page. I am going to call this page index.html.

To make use of Framer’s API on this page, you should add a script tag that points to the framer.js file you downloaded.

Step 2: Create an HTTP Server

As Framer makes use of protocol-relative URLs to load various resources, you can’t simply double-click the file you created to open it in a browser. Doing so will lead to network errors. Instead, you should access it through an HTTP server.

To quickly create an HTTP server that is capable of serving your web page, you can use Python’s SimpleHTTPServer module.

Open a terminal, navigate to the directory that contains the web page you created, and execute the following command.

This will start a server that runs on port 8000 by default. You can now open Google Chrome and view your web page by visiting http://localhost:8000/.

Step 3: Draw a Device

To make your prototype feel realistic on a desktop browser, you should display all its elements inside the frame of a mobile device. Framer lets you draw a variety of popular mobile devices, such iPhones, Nexus phones and tablets, iPads, Apple Watches, and more. For this tutorial, I will be using a pink iPhone 5c.

To draw a device, you should first create an instance of the DeviceComponent class and call its setupContext method. You can then change its deviceType to the device of your choosing. Add another script tag to the HTML page you created earlier and add the following code to it:

When you refresh your web page, you should see the following in your browser window:

Pink iPhone 5c

If you want, you can also render a hand holding the device by adding -hand at the end of the deviceType string. If the device looks too big or too small, you can use the setDeviceScale method to change its size.

This completes the initial setup. The result should looks like this:

iPhone with hand

2. Drawing Boxes, Text, and Images

Almost every element in your Framer prototype will be an instance of the Layer class. A Layer is very similar to an HTML div element and can be used to draw rectangles, images, and text.

To create a Layer you have to call its constructor and pass it a JSON object that defines various properties of the Layer. While creating a Layer, you usually specify its dimensions (width and height) and position (x and y). You can also use the centerX and centerY methods to center it horizontally and vertically. Here’s an example of how to create a Layer.

To display an image, you have to create a Layer whose image property points to the image file you want to display.

To display text (or HTML), you can use the html property. You can also add CSS styling to a Layer using its style property.

With the three Layer objects we created in this step, the prototype would look like this:

Three layers

3. Adding Events

You can attach event handlers to a Layer using the on method. The on method is much like Javascript’s addEventListener method. It takes the name of an event as its first parameter and a function as its second parameter.

Here’s how you add a click handler to the text layer we created in the previous step:

You will see more event handlers later in this tutorial.

4. Adding Animation

Framer stands out from its competition thanks to its advanced animation effects. With Framer, you can animate nearly every property of your Layer objects using the animate method. The animate method takes as input a JSON object that specifies the properties that should be animated.

The JSON object can also include various configuration details of the animation, such as its duration and behavior.

As an example, let me show you how to create an animation that turns whiteSquare into a circle by changing its borderRadius.

Here’s another example that shows how to animate the shadow of whiteSquare when it is clicked.

Note that only those properties whose values are numbers can be animated. As shadowColor is not a number, it should be set before calling animate.

5. Using States

If you are using Framer, it is likely that you are trying to create a highly interactive prototype with lots of animations. Calling the animate method multiple times on a Layer can get tedious. Instead, you can associate a list of states with a Layer and just switch between the states when needed.

Every Layer has a states property that is an instance of the LayerStates class. To add new states to a Layer, you call the add method on the states property. In the following code snippet, we add two new states to the pic object.

Adding a state doesn’t result in an immediate visual change. However, when a Layer switches from one state to another, you will be able to see the animation. To change the state of a Layer, you call the switch method on the states property of the Layer object. The following code snippet shows you how to change the state of pic when it is clicked.

To cycle through the states of a Layer, you can call the next method of its states object.

6. Changing Backgrounds

To add a background color or image to your prototype, you create a BackgroundLayer object. A BackgroundLayer is a Layer whose dimensions are equal to the dimensions of the device’s screen. Here’s how you add a grey BackgroundLayer:

Because the Framer prototype is just an ordinary HTML page, you can also use CSS to style it. For example, if you aren’t happy with the white color surrounding the device, you can change it by applying a new style to the web page’s body tag.

With these changes, the prototype will look like this when the animations are finished:

Final state

7. Handling Drag Operations

To make a Layer draggable, all you have to do is set its draggable.enabled property to true.

If a Layer is draggable, you are able to add event listeners to it that respond to various dragging related events, such as dragend and dragmove. For example, here’s a dragend event handler that returns pic to its original position:


In this tutorial, you learned the basics of creating interactive prototypes for mobile apps using Framer. As your Framer prototypes are static web pages, you can upload them to any HTTP server to share them with your friends and clients.

I’d also like to tell you that, if you are competent with Adobe Photoshop, you don’t have to create the user interface elements of your prototypes programmatically. You can design the layout in Photoshop and convert the layer groups in your PSD into Framer’s Layer objects. You also have the option to purchase and use Framer Studio, an IDE built specifically for working with Framer projects.

To learn more about the Framer framework, you can refer to Framer’s documentation. In the second part of this series, I will dive deeper into navigation, scrolling, and animation.

Source: Tuts Plus

About the Author


  1. … [Trackback]

    […] Read More here: […]

  2. … [Trackback]

    […] Find More Informations here: […]

  3. … [Trackback]

    […] Read More here: […]

  4. … [Trackback]

    […] Read More here: […]

  5. … [Trackback]

    […] Informations on that Topic: […]

  6. … [Trackback]

    […] Read More Infos here: […]

  7. … [Trackback]

    […] Read More: […]

  8. … [Trackback]

    […] There you will find 30610 more Infos: […]

  9. … [Trackback]

    […] Read More: […]

  10. … [Trackback]

    […] Read More here: […]

  11. … [Trackback]

    […] Read More Infos here: […]

  12. … [Trackback]

    […] Find More Informations here: […]

  13. … [Trackback]

    […] There you will find 40229 more Infos: […]