Published on <a href="https://blog.prototypr.io/using-framer-to-showcase-motion-design-in-taxact-express-for-ios-9f0f99a90972?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>7 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.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*QpDQ6kdbpKeY2MUjv9xU0A.gif">
<h3>Lucky N° 7—Welcome to TaxAct Express</h3>
<blockquote><a href="https://framer.cloud/vhpZP">https://framer.cloud/vhpZP</a></blockquote>
It’s been a while, and it felt really good to get back into Framer. My family and I moved from Lehi, Utah to DeSoto, Texas the day after Thanksgiving. Now that things are settling down, I can keep working on my goal. To kick things back off, I’m sharing a quick prototype I did for my new employer: TaxAct.
<h4>Design</h4>
I created mockups for this prototype in Sketch because I wasn’t initially planning on doing a prototype. The idea was straightforward enough: Four views in a page component, each with an image and some text; swipe to move between views. But, when I saw the initial implementation, it wasn’t what I was hoping for. Creating prototypes to showcase motion design and micro-interactions can help designers communicate their intent to their development teams. That’s what I’ve done here.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uplYhKZGiePllOOhL5AAug.png">
As you can see, this is pretty simple. Initially I imported just the images and the TaxAct logo, but I was having some trouble using Open Sans as my font when previewing the prototype on-device. So I returned to my .sketch document and exported the text as well. Doing so wasn’t a problem since I didn’t need any of the text to be dynamic.
One thing I noticed while designing is how much I like and appreciate the auto-hierarchy feature in Framer Design. It was so nice to just drag the text assets onto their respective images and know that Framer had just created a group for me. That’s not always what I want to happen, but the more I use Framer Design, the more I realize that it’s usually what I want to have happen.
If you look closely at the image above, you might be able to tell that the status bar and the pagination dots are both sitting outside of the main artboard. That’s actually an attempt to get around the auto-hierarchy. It’s easy enough to position those elements in code later.
<h4>Code</h4>
Just like the design, there’s not too much going on behind the scenes in code. I have my ‘splash’ target, which is the blue box with the logo inside of it. I thought it would be a nice touch if the logo faded up into position when the prototype loads. To do that, I just set some initial properties on the ‘logo’ for it’s y-position and opacity. Then, used ‘Utils.delay’ to make it happen 0.5 seconds after page load.
<pre>logo.y = 358 logo.opacity = 0</pre>
<pre>...</pre>
<pre>Utils.delay 0.5, -&gt; logo.animate y: 336 opacity: 1</pre>
I created my Page Component and positioned it behind the ‘splash’ element, then set another delay for the splash screen to fade out to reveal the app’s tour and welcome views.
<pre>tour = new PageComponent height: Screen.height width: Screen.width scrollVertical: false parent: mainView</pre>
<pre>tour.placeBehind(splash)</pre>
<pre># Creating an array of my page component items pages = [page1, page2, page3, page4]</pre>
<pre># Using the array and a for-loop to add items to the page component for page in pages page.parent = tour.content</pre>
<pre>...</pre>
<pre># Setting up the actions to take 1.7 seconds after loading Utils.delay 1.7, -&gt; splash.animate opacity: 0 options: time: 1 paginationControl.animate("on")</pre>
I also added the functionality for the pagination dots so that they would change states from active to inactive, depending on which page the user stops on.
<pre>tour.onScrollEnd -&gt; if tour.currentPage == page1 dot1.animate(“active”) dot2.animate(“inactive”) ... # And so on, for each page</pre>
I could have stopped there and the product owner would have been impressed, but I like to try going the extra mile. I thought it would be cool if the text and images moved in and out at slightly different rates.
<pre># Variables for values to be used below mid = Screen.midX coming = mid + 104 going = mid — 104</pre>
<pre># Using modulate utility to move the text tour.on Events.Move, -&gt; if tour.currentPage == page1 text1.midX = Utils.modulate(tour.scrollX, [0,414], [mid,going]) text2.midX = Utils.modulate(tour.scrollX, [0,414], [coming,mid]) else if tour.currentPage == page2 text1.midX = Utils.modulate(tour.scrollX, [414,0], [going,mid]) text2.midX = Utils.modulate(tour.scrollX, [414,0], [mid,coming]) text2.midX = Utils.modulate(tour.scrollX, [414,414*2], [mid,going]) text3.midX = Utils.modulate(tour.scrollX, [414,414*2], [coming,mid]) else if tour.currentPage == page3 text2.midX = Utils.modulate(tour.scrollX, [414*2,414], [going,mid]) text3.midX = Utils.modulate(tour.scrollX, [414*2,414*3], [mid,going]) text4.midX = Utils.modulate(tour.scrollX, [414*2,414*3], [coming,mid]) else if tour.currentPage == page4 text4.midX = Utils.modulate(tour.scrollX, [414*3,414*2], [mid,coming]) text3.midX = Utils.modulate(tour.scrollX, [414*3,414*2], [going,mid])</pre>
<h4>Lesson Learned</h4>
I’ve become devoted to Framer. I started out trying to use another tool I had easy access to with my new employer’s setup, but was quickly underwhelmed by it’s capabilities and frustrated by the steps I needed to take to make things work the way I wanted.
Also, I’m always impressed with the power of Utils.modulate(). It’s a tricky one to understand, and I always need to refer back to the documentation or to a previous prototype, but it always produces great results.
<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). But don’t judge me—prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
TaxAct Express for iOS — Welcome and Tour <a href="https://framer.cloud/vhpZP">https://framer.cloud/vhpZP</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9f0f99a90972" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-showcase-motion-design-in-taxact-express-for-ios-9f0f99a90972">Using Framer to Showcase Motion Design in TaxAct Express for iOS</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 Showcase Motion Design in TaxAct Express for iOS

7 of 100

Top Stories