Published on <a href="https://blog.prototypr.io/user-framer-to-recreate-the-focused-inbox-toggle-in-outlook-for-android-e7b4043f51d1?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>3 of 100</h4>
My goal is to create 100 prototypes of interactions from some of my favorite apps. I know my way around Framer a little bit, but there is always room for improvement. Using Framer to recreate existing apps should be an effective way to practice and hone my craft.
<img alt="" src="https://cdn-images-1.medium.com/max/516/1*r6JNQuzg4RZpYveahWSI-Q.gif">
<h3>N° 3—Focused Inbox Toggle in Outlook for Android</h3>
<blockquote><a href="https://framer.cloud/PBusI">https://framer.cloud/PBusI</a></blockquote>
<h4>Design</h4>
This interaction is the one the got me interested in figuring out how to prototype interactions in my favorite apps. It was the subtle change in the switch’s width and the smooth label change from white to blue that caught my eye. I have to admit, I’m a UI geek and I once I noticed this beautiful toggle switch, I played with it for much longer than I want to admit.
The design setup for this prototype was easy. I would still rather create mockups in Sketch, but doing so in Framer isn’t too bad (actually I enjoy desiging in Framer—it just can’t quite do everything I need). The built-in icons in Framer Design are helpful, and I was able to use the menu, search, and settings icons out-of-the-box. But I had to create the lightning bolt icon next to Filters and the four bottom navigation icons in Sketch, and then import them to Framer. I also made the Android navigation bar icons in Sketch so that they matched what I see on my Google Pixel.*
Everything is contained in a single artboard (which reminds me—I really wish I could collapse parent layers in the sidebar; leaving everything expanded makes it look much more complicated that it really is).
The clever part of the design is how I set up the magic label transition. I have a knob for dragging, and in that knob there are a pair of labels, but because the knob layer is clipping its contents, you don’t see both labels at the same time. There are also labels in the switch track with remain stationary. So all the magic happens with four labels and a pair of rounded rectangles (knob and switchTrack).
I didn’t need to target much to be able to affect in with the code because the only interaction is in the toggle. Besides the toggle, the only other layer I needed to target was the “Other” email list, so that I could show and hide it depending on the state of the toggle.
<h4>Code</h4>
It’s really satisfying to make something cool in Framer with a minimal amount of code. This one, once I figured out all of the math, was pretty simple. Almost elegant. Almost.
First I enabled dragging on the knob layer and set up its properties so it could be dragged within the switch track. I also removed the overdrag and bounce because those micro-behaviors weren’t there in Outlook for Android.
<pre>knob.draggable.enabled = true knob.draggable.vertical = false knob.draggable.constraints = width: switchTrack.width x: knob.x knob.draggable.overdrag = false knob.draggable.bounce = false</pre>
My next task was to make the magic happen. From what I could tell, I needed two things to happen while the knob was being dragged:
<ol>
<li>The knob’s width needed to adjust depending on the direction it is being dragged. Dragging right, the width decreases. Dragging left, the width increases.</li>
<li>The labels within the knob needed to move at the same rate as the knob to create the illusion of not moving at all.</li>
</ol>
To make these things happen, first I set up a pair of variables for the width of the knob when it is set to Focused or Other.
<pre>knobWidthFocused = 85 knobWidthOther = 64</pre>
Next, I used the very handy (and often confusing) Utils.modulate() to key the change in the knob width and the x-position of the labels off of the knob’s x-position:
<pre>knob.on Events.Move, -&gt; knob.width = Utils.modulate(knob.x, [16, 104], [knobWidthFocused, knobWidthOther]) switchLabel.x = Utils.modulate(knob.x, [16, 104], [16, -72])</pre>
Magic. Here’s my best attempt at explaining how this works:
While the knob is moving, it is paying attention to its x-position. While that x-position is somewhere between 16 and 104, it smoothly ‘tweens’ the knob’s width between the two variables I set up previously (knobWidthFocused and knobWidthOther). At the same time, the switchLabel (which contains both the Focused and Other labels) is moving to the left between its starting x-position of 16 and -72. And, since the knob is clipping its sub-layers, it appears that the toggle is moving, but the labels are stationary.
If that doesn’t make sense, it’s not you. It’s me. Stick with it and experiment. Eventually you’ll understand it enough to use it in some powerful ways in your own prototypes.
The finishing touches I included were to make the knob snap to the right or left, and to add tap functionality because it seemed like the right thing to do.
<pre>knob.onDragEnd -&gt; if knob.x &gt; 56 knob.animate x: 104 width: knobWidthOther switchLabel.animate x: -72 otherEmailsList.visible = true else knob.animate x: 16 width: knobWidthFocused switchLabel.animate x: 16 otherEmailsList.visible = false</pre>
<pre>btnOther.onTap -&gt; knob.animate x: 104 width: knobWidthOther switchLabel.animate x: -72 otherEmailsList.visible = true</pre>
<pre>btnFocused.onTap -&gt; knob.animate x: 16 width: knobWidthFocused switchLabel.animate x: 16 otherEmailsList.visible = false</pre>
<h4>Lesson Learned</h4>
Math is good and Framer Design is helpful. Figuring out the values I needed to use in my Utils.modulate() functions was the most challenging thing about this prototype. It was also the entire point of this prototype, so I suppose that’s to be expected. The Design section of Framer was helpful to figure out the starting and ending width of the knob, as well as how far right to move the x-position of the switch labels.
<h4>Go Check Out This Prototype</h4>
Feel free to download my prototype and poke around in the code a bit (the link is repeated below). Just remember, prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
Focused Inbox Toggle in Outlook for Android <a href="https://framer.cloud/PBusI">https://framer.cloud/PBusI</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e7b4043f51d1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/user-framer-to-recreate-the-focused-inbox-toggle-in-outlook-for-android-e7b4043f51d1">Using Framer to Recreate the Focused Inbox Toggle in Outlook for Android</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.

Using Framer to Recreate the Focused Inbox Toggle in Outlook for Android

3 of 100

Top Stories