Published on <a href="https://blog.prototypr.io/designing-for-android-with-framer-studio-17e97d4692c9?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Marie Schweiz 
In the beginning I had to figure out a few screws and notches to make this work. Android and <a href="http://material.io">Material</a> 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.
<h4>Set the stage</h4>
You probably want to choose a device (shiney new pixel) you hold in your hands as artboard size. However I can recommend working with <a href="https://developer.android.com/guide/practices/screens_support.html">basic hdpi measurments and a large profile</a>. 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 <a href="https://material.io/devices/">which profile / default device</a> they want to start with.
Recommendation: use 360&#215;640, Nexus 5, large profile Enables you to use Googles <a href="https://material.io/guidelines/resources/sticker-sheets-icons.html">sticker sheets</a> and measurements.
Artboards allow framer to calculate <a href="https://framer.com/getstarted/guides/design/#properties">auto layouts properly</a>. You can use bigger or smaller devices (also resize) but its not entirely accurate.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xWttAvNhBM2pzyIDQ7D2Fg.png">With a size of 360&#215;640 you can use measurements from <a href="https://material.io/guidelines/resources/sticker-sheets-icons.html">Googles UI sticker template sheet</a>.
Note on icons: Framer has almost all <a href="http://material.io/icons/">material icons</a> available per default. If you like to add icons you can colorize: <a href="https://github.com/peteschaffner/framer-icon">Pete Schaffner is able to help</a>.
<h3>Craft a simple list view</h3>
Transition between screens is a crucial part of understanding for a mental model and Framers <a href="https://framer.com/docs/#flow.flowcomponent">flow component</a> 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 <a href="https://medium.com/the-school-of-do/framer-cheat-sheet-flow-components-f7ca94632227">how to customize a flowcomponent</a>.
<h4>Add a Header &amp; Footer</h4>
Simple things first, starting with a <a href="https://framer.com/docs/#flow.header">header</a>, keep autolayouts in mind and how material is played with. It might be wise to seperate the statusbar from Androids <a href="https://material.io/components/android/catalog/app-bar-layout/">App bar</a> and add only the statusbar as header. Optional add softbuttons (if you own a nexus 5 or similiar devices).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vo6n0YrtEuu_xOYB3votmw.png"><a href="https://framer.cloud/mpxKK">Download</a> header and footer flow component setup
<h4>Customize a flow component</h4>
Android is asking sometimes for quicker transitions between two screens. Here is a list of common transitions on android:
<ul>
<li><a href="https://framer.cloud/ESiea">From bottom up</a> (similiar to framers default bottom transition)</li>
<li><a href="https://framer.cloud/jlYWP/">attach to top</a> (similiar to bottom up but faster)</li>
<li><a href="https://framer.cloud/Slvtv">Layer from left</a> (a flow component default for hamburger menus 💩)</li>
<li>Zoom from origin (target element is rearranged and receiving context from a new artboard)</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vMMa75X5PwtizzMc5KA9ag.gif"><a href="https://framer.cloud/jlYWP/">Custom transition</a> for a flow component, Attach to top
<h3>Elements moving</h3>
For developers its good to know which android easing curve you use. <a href="https://material.io/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations">Material offers</a> 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.
<pre># deceleration curve (also referred to as “ease out”) LinearOutSlowInInterpolator = “cubic-bezier(0.0, 0.0, 0.2, 1)”</pre>
<pre># acceleration curve (also referred to as “ease in”) FastOutLinearInInterpolator = “cubic-bezier(0.4, 0.0, 1, 1)”</pre>
<pre># sharp curve (also referred to as “ease in out”) sharpcurve = “cubic-bezier(0.4, 0.0, 0.6, 1)”</pre>
Just refer in your animation or where ever you can by:
<pre>ThisyourLayer.animate x:0 options: time: 0.20 curve: FastOutLinearInInterpolator</pre>
Developers might just read your app.coffee file and when they understand your code they have a better time implementing your thoughts.
<h4>Make it ripple</h4>
Googles understanding of ripples are sparks. Your touch provides energy and material is responding if it is able to do so.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DUsjZW4svYpZLVx8FbrSgQ.gif"><a href="https://framer.cloud/oRmvI">“Simple Ripple” module </a>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.
<pre>ripple = new Layer width: 5 height: 5 borderRadius: ripple.width / 2 backgroundColor: "rgba(0,0,0,0.20)"</pre>
<pre>ripple.animate scale: 3 options: time: 0.15 </pre>
<pre>Utils.delay 0.15, -&gt; ripple.destroy()</pre>
Or use a <a href="https://github.com/MarieSchweiz/Simple-Ripple">simple ripple</a> module:
<pre># Activate simple ripple module for a target layer</pre>
<pre>yourlayer.on(Events.TouchStart, ripple)</pre>
<h3>Scroll behavior</h3>
Framer has per default a bouncing scroll component. Android doesn’t behave this way and you are able to deactivate it by disabling “<a href="https://framer.com/docs/#layer.draggable.overdrag">overdrag</a>”.
<pre># momentum, the list keeps scrolling depending how much you pushed scroll.content.draggable.momentum = true</pre>
<pre># Overdrag, pull despite its constraints scroll.content.draggable.overdrag = false</pre>
<pre># bounce, how soft it is bouncing back to its original position scroll.content.draggable.bounce = false</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*497xr-QjK94s5VEqNbis3A.gif"><a href="https://framer.cloud/ybRiN">Scroll beavior </a>without a bounce effect — Note: Overdrag shadow is missing here
<h3>Elevation for patterns and elements</h3>
Material offer <a href="https://material.io/guidelines/material-design/elevation-shadows.html">shadows based on elevation</a>. 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.
<img alt="" src="https://cdn-images-1.medium.com/max/292/1*EVuYkMf1D8wIhCZFARJLrA.gif"><a href="https://framer.cloud/SxABD">Simple Elevation</a> , function registered onTouch
You could use layer properties for elevation:
<pre>Appbar.animate shadowSpread: 0 shadowColor: "rgba(0,0,0,0.24)" shadowY: 8 shadowBlur: 8 options: time: 0.20 curve: FastOutLinearInInterpolator</pre>
or an <a href="https://github.com/MarieSchweiz/Simple-Elevation">elevation module</a> for Framer:
<pre>#function(layer, elevation, time, curve)</pre>
<pre>elevation(layer,8, 0.20, “FastOutLinearInInterpolator”)</pre>
<h3>Device Sensors &amp; Apis</h3>
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:
<ul>
<li><a href="https://caniuse.com/#feat=deviceorientation">Device Orientation</a> Api — module <a href="https://github.com/joshmtucker/OrientationEvents">here</a></li>
<li><a href="https://caniuse.com/#feat=html-media-capture">Media Capture</a> Api (Cameraview) — android example <a href="https://github.com/ktcy/CameraLayer">here</a></li>
<li><a href="https://caniuse.com/#feat=vibration">Vibration</a> Api</li>
<li><a href="https://caniuse.com/#search=Battery%20Status%20API">Battery Status API</a></li>
<li><a href="https://caniuse.com/#feat=speech-recognition">Speech recognition</a> Api — Introduction <a href="https://blog.framer.com/prototyping-speech-recognition-in-framer-js-9cbbbd01757">here</a> (not specific to smartphones)</li>
</ul>
<h3>Note on older material kit’s and modules for Framer</h3>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/801/1*xiwr79rYpb8TIEefD05yZg.png">
Enjoy building android designs with framer studio!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=17e97d4692c9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/designing-for-android-with-framer-studio-17e97d4692c9">Designing for Android with Framer Studio</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing for Android with Framer Studio

Top Stories