Published on <a href="https://blog.prototypr.io/using-framer-to-prototype-a-simple-workflow-for-our-facility-issues-reporting-app-e4ba8c8d7363?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>6 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 refine my craft.
<h3>N° 6—I Actually Do This Stuff For Work Too</h3>
<blockquote><a href="https://framer.cloud/YhsiC">https://framer.cloud/YhsiC</a></blockquote>
Life has been pretty busy lately. I haven’t had as much time to create fun prototypes as I would like. Luckily, I’m always creating prototypes to illustrate an idea or showcase some desired functionality at work. This app is one I designed at the beginning of the year. The product owner called and told me that they recently discovered a use-case they hadn’t anticipated. So I made this prototype to get his feedback.
In other words, this is not a particularly sexy prototpye.
<h4>Design</h4>
I created the visual assets for this prototype in Sketch because it has access to our UI kit libraries. I put each screen in it’s own artboard and then exported them for use in Framer.
In the screen shot below, you can see that I’ve also organized everything in Framer onto individual artboards, even the status bar and the Android navigation bar. Then I targeted each artboard to manipulate it in the code. The only design elements I needed to add in Framer are my hotspots to drive the interaction.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*HiTvYoAcxUFzh8mVnJzyag.png">
<h4>Code</h4>
Have you ever started down one path in a prototype that turned out to be the wrong path, and then course-corrected by taking another, simpler approach? That’s what happened to me in this prototype.
Initially, I thought this was the perfect case for a FlowComponent. I have four sequential screens, a header, and a footer. But what I found was that the FlowComponent wasn’t turning out like I thought it should.
This prototype is staged in an Android environment, which has a different set of standard transitions than iOS. The showNext() method for FlowComponents uses the standard iOS push transition and it didn’t feel right in this prototype.
But, not wanting to give up on the FlowComponent, I started looking into the ability to customize screen transitions with the transition() method. I couldn’t get it to work though. I found documentation unhelpful and no examples online that I could pick apart and figure out. I will have to do a separate prototype dedicated to understanding the custom transition capabilities of FlowComponents, because I feel like there is a lot of power there.
In the end, I was able to achieve the Android-like look and feel for the transitions simply by using States. I used an array and a loop to speed things up a bit. Within the loop I positioned the views, added a pair of states, and set the initial state to “off” and the visibility to “false.”:
<pre>workflowScreens = [SelectArea, SelectFMGroup, HomeView]</pre>
<pre>for view in workflowScreens view.x = 0 view.y = 72 view.states.add off: y: 64 opacity: 0 on: y: 0 opacity: 1 view.stateSwitch("off") view.visible = false</pre>
The delay utility is someone I often rely on in my prototypes. For example, when choosing the roll of Director of Temporal Affairs, the following screen is interrupted by an explanatory overlay (Poptart) that tells the user they need to also select an Area and an FM (Facility Maintenance) Group. I added a delay to the overlay to smooth out this transition.
<pre>btn_dta.onTap -&gt; SelectArea.visible = true SelectArea.animate(“on”) mask.visible = true Utils.delay 0.3, -&gt; mask.animate opacity: 1 Poptart.animate(“on”)</pre>
<h4>Lesson Learned</h4>
Two things I learned from making this prototype:
<ol>
<li>It doesn’t matter how you get a prototype to work. When I started I was sure that using a FlowComponent was the way to go, but after struggling for longer than I should have, I went back to using a methodology I was familiar with.</li>
<li>I need to (want to) figure out how to create custom transitions for a FlowComponent.</li>
</ol>
<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.
DTA Role Selection for Facility Issues Reporting Android app <a href="https://framer.cloud/YhsiC">https://framer.cloud/YhsiC</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e4ba8c8d7363" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-prototype-a-simple-workflow-for-our-facility-issues-reporting-app-e4ba8c8d7363">Using Framer to Prototype a Simple Workflow for Our Facility Issues Reporting App</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 Prototype a Simple Workflow for Our Facility Issues Reporting App

6 of 100

Top Stories