Published on | Prototyping: From UX to Front End — Medium Marie Schweiz

In the beginning I had to figure out a few screws and notches to make this work. Android and Material aren’t the same. Android is just the environment, Material is a design language Google offers. It is up to you how your app can look like. Material offers a decent userexperience I recommend as a starting point.

Set the stage

You probably want to choose a device (shiney new pixel) you hold in your hands as artboard size. However I can recommend working with basic hdpi measurments and a large profile. Profiles are used on android to distinguish between different screens sizes while dp are used to figure out how dense it is. This is a good moment to ask your developers which profile / default device they want to start with.

Recommendation: use 360×640, Nexus 5, large profile
Enables you to use Googles sticker sheets and measurements.

Artboards allow framer to calculate auto layouts properly. You can use bigger or smaller devices (also resize) but its not entirely accurate.

With a size of 360×640 you can use measurements from Googles UI sticker template sheet.

Note on icons: Framer has almost all material icons available per default. If you like to add icons you can colorize: Pete Schaffner is able to help.

Craft a simple list view

Transition between screens is a crucial part of understanding for a mental model and Framers flow component can be pretty useful. Per default it is limited to 5 transitions ( animate from top, right, bottom, left and center). Thats okay for highlevel prototyping, for detailed work its important to keep androids architecture in mind and how to customize a flowcomponent.

Add a Header & Footer

Simple things first, starting with a header, keep autolayouts in mind and how material is played with. It might be wise to seperate the statusbar from Androids App bar and add only the statusbar as header. Optional add softbuttons (if you own a nexus 5 or similiar devices).

Download header and footer flow component setup

Customize a flow component

Android is asking sometimes for quicker transitions between two screens. Here is a list of common transitions on android:

From bottom up (similiar to framers default bottom transition)
attach to top (similiar to bottom up but faster)
Layer from left (a flow component default for hamburger menus 💩)
Zoom from origin (target element is rearranged and receiving context from a new artboard)

Custom transition for a flow component, Attach to top

Elements moving

For developers its good to know which android easing curve you use. Material offers slightly quicker and more agressive easing curves than Framers defaults. By using a set of variables you can make it easier for a developer to follow your design lead.

# deceleration curve (also referred to as “ease out”) 
LinearOutSlowInInterpolator = “cubic-bezier(0.0, 0.0, 0.2, 1)”

# acceleration curve (also referred to as “ease in”)
FastOutLinearInInterpolator = “cubic-bezier(0.4, 0.0, 1, 1)”

# sharp curve (also referred to as “ease in out”)
sharpcurve = “cubic-bezier(0.4, 0.0, 0.6, 1)”

Just refer in your animation or where ever you can by:

ThisyourLayer.animate
   x:0
   options:
      time: 0.20
      curve: FastOutLinearInInterpolator

Developers might just read your app.coffee file and when they understand your code they have a better time implementing your thoughts.

Make it ripple

Googles understanding of ripples are sparks. Your touch provides energy and material is responding if it is able to do so.

“Simple Ripple” module activated for a list

A ripple is basically a round shaped layer, created, animated and destroyed. The element you activate it for, should clip it. Use a ripple on objects you like to be interactive and appear responsive to touch.

ripple = new Layer
    width: 5
    height: 5
    borderRadius: ripple.width / 2
    backgroundColor: "rgba(0,0,0,0.20)"

ripple.animate
    scale: 3
    options: 
        time: 0.15

Utils.delay 0.15, ->
    ripple.destroy()

Or use a simple ripple module:

# Activate simple ripple module for a target layer

yourlayer.on(Events.TouchStart, ripple)

Scroll behavior

Framer has per default a bouncing scroll component. Android doesn’t behave this way and you are able to deactivate it by disabling “overdrag”.

# momentum, the list keeps scrolling depending how much you pushed
scroll.content.draggable.momentum = true

# Overdrag, pull despite its constraints
scroll.content.draggable.overdrag = false

# bounce, how soft it is bouncing back to its original position
scroll.content.draggable.bounce = false

Scroll beavior without a bounce effect — Note: Overdrag shadow is missing here

Elevation for patterns and elements

Material offer shadows based on elevation. A number from 0 to 24. For Example an App Bar has elevation 4. Dragging a card can be animated as elevation 8 and so on.

Simple Elevation , function registered onTouch

You could use layer properties for elevation:

Appbar.animate
   shadowSpread: 0
   shadowColor: "rgba(0,0,0,0.24)"
   shadowY: 8
   shadowBlur: 8
   options:
      time: 0.20
      curve: FastOutLinearInInterpolator

or an elevation module for Framer:

#function(layer, elevation, time, curve)

elevation(layer,8, 0.20, “FastOutLinearInInterpolator”)

Device Sensors & Apis

Smartphones, android and iOS have a lot of sensors, more than you might think. With Framer Studio we are able to access them through our origin in javascript. Every WebApi can be accessed. A few are specific to smartphones:

Device Orientation Api — module here
Media Capture Api (Cameraview) — android example here
Vibration Api
Battery Status API
Speech recognition Api — Introduction here (not specific to smartphones)

Note on older material kit’s and modules for Framer

When you google for material modules you might come across amazing modules. With framers design view a lot of code isn’t up to date anymore. Most importantly, framers coordinate system was changed and old modules add more complexity than you might need. I appreciate all of them but using them would give me more deprecated code than I can handle. Framers Design mode was introduced in mid 2017.

Enjoy building android designs with framer studio!

Designing for Android with Framer Studio was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing for Android with Framer Studio

Cool stuff, every week

More Articles