Published on <a href="https://blog.prototypr.io/using-framer-to-prototype-paper-by-53s-color-palette-paging-transition-1cfc3af34fe9?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>19 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*xQ9XDiioE0Pefdp2M4o-ow.gif">
<h3>N° 19 — Color Palette Paging Transition in Paper by 53</h3>
<blockquote><a href="https://framer.cloud/jlcTY">https://framer.cloud/jlcTY</a></blockquote>
<h4>Design</h4>
I’ve been a big fan of Paper by 53 since it’s beginning. I purchased their upgrades to unlock all of its functionality. I bought (and loved) their Bluetooth-enabled Pencil, and loved the simplicity and ease of connecting it to the app. I was such a big fan of their undo gesture (two fingers circling counter-clockwise) that I have tried using it multiple times in real life while drawing on a whiteboard. Although I’m now rocking my Apple Pencil and I’ve grown to love Procreate and Adobe Draw, I still use Paper for note taking and quick UI sketches.
I recently noticed Paper subtle and effective transition when paging between my color palettes. It seemed like a perfect candidate for my prototyping practice. And the best part is that I didn’t need to recreate the entire interface in Framer.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZQzgLpYGpdXxPjxR39uxmg.png">My prototype design consists of a screenshot of the UI in the main frame and four additional frames for each color palette.
Since I knew I would be using a Page Component, I created a new frame for each page I would need. Except for the last page, which only has a button to add a new palette, each page includes the seven colored circles that make up the color palette. I used frames with completely rounded corners for each color because I knew I would need to modify them in code.
<h4>Code</h4>
There were three main challenges in this exercise:
<ol>
<li>Moving the palettes as a group.</li>
<li>Individually scaling down the colors when they exited to the left.</li>
<li>Individually scaling up the colors when the entered on the right.</li>
</ol>
First, I was able to get the palettes moving as a group by simply creating a Page Component and adding each page in order:
<pre>colorsPageComponent = new PageComponent x: palette1.x y: palette1.y width: palette1.width height: palette1.height scrollVertical: false backgroundColor: "#333333" colorsPageComponent.addPage(palette1, "right") colorsPageComponent.addPage(palette2, "right") colorsPageComponent.addPage(palette3, "right") colorsPageComponent.addPage(palette4, "right") colorsPageComponent.addPage(addPalette, "right")</pre>
I was able to use the positioning of palette1 because it’s frame was already placed on top of the UI image where it needed to be. And I added the backgroundColor of #333333 to make sure the color palette from my screen shot didn’t peak through on overdrag.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*7w_3csKzXF8M84UMfYhJEQ.gif">I got my palettes paging, but they are just cutting off at the end of the container.
The next challenge was to get each color to scale down to zero as its palette moved out of view to the left. This seemed like a job for utils.modulate. As I got into it, I quickly realized how helpful it would be to have some variables for the values I was using. Here’s was I set up:
<pre>scaleDownStart = 16 scaleDownFinish = 64 spacing = 42</pre>
The scaleDownStart and the scaleDownFinish were numbers that I found through trial and error. The spacing value is the width of a color plus the space between each color (32+10). And now, here’s the block of code I used to get the colors in the first palette to scale down on exit to the left:
<pre>scaleDownPalette1 = -&gt; color1.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart, scaleDownFinish], [1, 0], true) color2.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart+spacing, scaleDownFinish+spacing], [1, 0], true) color3.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart+spacing*2, scaleDownFinish+spacing*2], [1, 0], true) color4.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart+spacing*3, scaleDownFinish+spacing*3], [1, 0], true) color5.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart+spacing*4, scaleDownFinish+spacing*4], [1, 0], true) color6.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart+spacing*5, scaleDownFinish+spacing*5], [1, 0], true) color7.scale = Utils.modulate(colorsPageComponent.scrollX, [scaleDownStart+spacing*6, scaleDownFinish+spacing*6], [1, 0], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*ZF6g2SMtdHsO3ja6WyyVug.gif">Because of utils.modulate, the colors in the first palette scale down on exit and scale back up when they return.
The scale of each color ranges (or modulates) between 1 and 0, depending on the page component’s scrollX value. I also turned it into a function called “scaleDownPalette1” to make life a little easier in the next step.
My next job was to create a similar transition for the palettes than enter from the right side. It was basically the same, but I needed to reverse the modulation to go between 0 and 1, and I needed to add another variable for the total length of the palette.
<pre>scaleUpStart = 64 scaleUpFinish = scaleUpStart+48 paletteWidth = palette1.width</pre>
<pre>scaleDownPalette2 = -&gt; color8.scale = Utils.modulate(colorsPageComponent.scrollX, [paletteWidth+scaleDownStart, paletteWidth+scaleDownFinish], [1, 0], true) color9.scale = Utils.modulate(colorsPageComponent.scrollX, [paletteWidth+scaleDownStart+spacing, paletteWidth+scaleDownFinish+spacing], [1, 0], true) color10.scale = Utils.modulate(colorsPageComponent.scrollX, [paletteWidth+scaleDownStart+spacing*2, paletteWidth+scaleDownFinish+spacing*2], [1, 0], true) ...</pre>
Here’s an image of my Framer code, which might be easier to understand:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OdzJGr2TgyTtshhdrvIoAw.png">Scaling down the second palette when it moves off to the left is the same as palette one, but the scrollX also needs to account for the width of palette1.<img alt="" src="https://cdn-images-1.medium.com/max/640/1*dQlc4B04MHGsIS-2ueLguA.gif">✅Current palette scaling down to the left. ✅Next palette scaling up from the right. 🚫Current palette scaling down to the right? I’m going to need some conditionals.
With those patterns in place, I had most of the puzzle figured out. The last remaining piece was to add some conditional logic so that a palette would scale down regardless of whether it moved to the left or right.
I’m sure there are many different ways to do this, but this was how I approached the problem:
<pre>colorsPageComponent.onTouchMove -&gt; if colorsPageComponent.currentPage == palette1 colorsPageComponent.on Events.Move, -&gt; scaleDownPalette1() scaleUpPalette2() else if colorsPageComponent.currentPage == palette2 colorsPageComponent.on Events.Move, -&gt; if colorsPageComponent.direction == "left" scaleDownPalette1() scaleUpPalette2() else scaleDownPalette2() scaleUpPalette3() else if colorsPageComponent.currentPage == palette3 colorsPageComponent.on Events.Move, -&gt; if colorsPageComponent.direction == "left" scaleDownPalette2() scaleUpPalette3() else scaleDownPalette3() scaleUpPalette4() else if colorsPageComponent.currentPage == palette4 colorsPageComponent.on Events.Move, -&gt; if colorsPageComponent.direction == "left" scaleDownPalette3() scaleUpPalette4() else scaleDownPalette4() else if colorsPageComponent.currentPage == addPalette colorsPageComponent.on Events.Move, -&gt; scaleDownPalette4()</pre>
Basically, the prototype is listening for the TouchMove event. As that happens, it checks to see which palette is currently in view in the page component. And the last check is the direction the page component is moving. So based on whether it’s moving left or not, the appropriate palettes are able to scale. It looks more complicated than it sounds.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*xoHjTvunHrmCN8l-Sq0iig.gif">
<h4>Lesson Learned</h4>
I’m pretty sure there are opportunities in my code to offload the redundancy to a function, or a variable, or something. I’m learning how to do some of that, but in the end, for my purposes, I am happy to write everything out the long way once I figure out what needs to happen.
Also, I need to find more opportunities to focus on a particular interaction rather than redesigning an entire interface.
<h4>See for Yourself</h4>
Feel free to download the prototype and poke around in the code a bit (the link is repeated below). And remember, prototyping isn’t about writing clean, elegant code. It’s about doing enough to communicate the intended experience.
Color Palette Paging Transition in Paper by 53 <a href="https://framer.cloud/jlcTY">https://framer.cloud/jlcTY</a>
Thanks for following me and my journey to 100 prototypes. I hope you enjoy my little experiments with Framer. If you have any ideas of something you’d like to see me prototype, or any questions about something you’re trying to prototype, reach out to me on Twitter @toddjreynolds.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1cfc3af34fe9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-prototype-paper-by-53s-color-palette-paging-transition-1cfc3af34fe9">Using Framer to Prototype Paper by 53’s Color Palette Paging Transition</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 Paper by 53’s Color Palette Paging Transition

19 of 100

Top Stories