Published on | Prototyping: From UX to Front End — Medium Todd Reynolds

20 of 100

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.

N° 20 — Swiping Left in LinkedIn Messaging

https://framer.cloud/gxkeO

Design

If you saw my write-up on my 19th prototype, I had a question about a more efficient way to do the same thing over and over again.

I’m pretty sure there are opportunities in my code to offload the redundancy to a function, or a variable, or something.

It turns out that the “somethings” I was looking for were classes.

I had recently been replying to messages in LinkedIn and noticed the nice, little pop on the mute and archive icons when you swipe a message to the left. I started my design for prototyping that interaction and got to this point:

From here I could have just copied and pasted that msgRow frame eight times, hooked up one of the rows with the desired functionality and been done. But I remembered having read (more like skimmed) an article a while back about duplicating objects with arrays. I found these two articles that helped tremendously:

I decided that this prototype would be an excellent chance to do a little exploration into Classes. With that in mind, I only designed the navigation bar, the search bar, the toolbar, the floating action button, and the single message item (and the buttons for mute and archive that sit behind it). After that, it was time to allow the code to do the work.

Code

From those articles above, this is the most helpful statement for me beginning to understand what a class is:

It’s almost like a mini-prototype within your prototype!

The lightbulb totally flipped on for me when I read that. When I looked through his code examples, it became even more clear. There was just a little bit of setup at the beginning of the class that I was unfamiliar with.

class MessageItem extends Layer
   constructor: (options={}) ->
      options.height = msgRow.height
      options.width = msgRow.width
      options.backgroundColor = “null”
      options.x = -144

      super options

This line in particular was a head-scratcher:

constructor: (options={}) ->

But, if I’m completely honest, I don’t care what it means. At this point, it’s enough for me to know that it’s necessary. I’ll probably need to refer back to this prototype multiple times to refresh my memory of classes, but that’s okay too. The line super options is there to let the class know that everything else in the Layer object is still available. Why the Layer object? That’s in the first line above. My custom class, “MessageItem,” is extending the Layer object. In other words it’s creating an object that is based on the Layer object. The options listed there are the customizations that should happen with each instance of the class.

For example, if you wanted to create a custom class that made squares with rounded corners and a drop shadow, your class might look something like this:

class MyShadowBox extends Layer
   constructor: (options{}) ->
      options.height = 200
      options.width = 200
      options.backgroundColor = "#ffffff"
      options.borderRadius = 10
      options.shadowY = 5
      options.shadowBlur = 10
      options.shadowColor = "rgba(0, 0, 0, 0.2)"

      super options

Then, to create an instance of your box, you would just call it like you would a new Layer or TextLayer.

box = new MyShadowBox

Once all of your default actions are set up, that’s when it can start to become a self-contained prototype. In the Class I made for this prototype I created sub-layers, set up text layers, added states, initiated animations, and added interactive events—basically baked all of the functionality I wanted on each row right into the MessageItem class. Here’s an example of a couple of sub-layers I added:

bg = new Layer
   parent: @
   size: msgItem.size
   x: msgItem.x
   backgroundColor: msgItem.backgroundColor

sender = new TextLayer
   parent: bg
   x: name_1.x
   y: name_1.y
   fontSize: name_1.fontSize
   fontFamily: name_1.fontFamily
   fontWeight: name_1.fontWeight
   color: name_1.color
   text: options.sender
   backgroundColor: null

Notice that many of my properties, like the size of my bg layer, are referencing other objects. Remember the single instance of a message item I created in the designs? Referencing those objects really simplified the task of setting up all of the pieces of my MessageItem class.

My bg layer above has no option name. Each instance will be exactly the same. But notice the text property in the sender layer. The assigned value is “options.sender.” That means that when I create an object, I can set that value to something specific. Think of it like an override in a Sketch symbol.

myNewMessageItem = new MessageItem
   sender: "Jon Anderson"

Once I had the basic structures all set up, I wanted to test it out and see if it worked. Spoiler: it totally worked. First, I made arrays for all of the unique information that would be in each message item: images, names, first names, and time stamps.

senderImages = ["images/image-1.png", "images/image-2.png", "images/image-3.png", "images/image-4.png", "images/image-5.png", "images/image-6.png", "images/image-7.png", "images/image-8.png"]

times = ["12:24 pm", "9:12 am", "Tue", "Tue", "Fri", "Apr 15", "Apr 14", "Apr 10"]

senders = ["Briana Peterson", "Tim Tanner", "Conner Maxfield", "Julia Robinson", "Mauricio Hernandez", "Lorenzo Kane", "Jackson Todd", "Steven Hannahan"]

firstNames =  ["Briana", "Tim", "Conner", "Julia", "Mauricio", "Lorenzo", "Jackson", "Steven"]

Then I used a for loop to create the rows I needed for the interface.

for i in [0..7]
   row = new MessageItem
      sender: senders[i]
      msg: “You: Hi “ + firstNames[i] + “, thank you for reaching out, but I’m not interested.”
      timeStamp: times[i]
      pic: senderImages[i]
      y: 144+rowHeight*i
      parent: appView

Each of the properties there are available because I set them up in the class definition (sender, msg, timeStamp, and pic). And with the arrays and this loop, each row looks unique because they all received different inputs. So the first time the loop runs, it takes the first item from the senders array and uses its value, the first item in the times array, and so on. Then it loops back and creates another instance using the second items in the array.

Hi <insert recruiter name here>, thank you for reaching out, but I’m not interested.

The string I used in the msg property was something new to me too.

msg: “You: Hi “ + firstNames[i] + “, thank you for reaching out, but I’m not interested.”

That string syntax allowed me to plug in the senders’ first names so that each message preview was unique. I found out how to do it by reviewing Framer’s excellent programming guide:

Design, code and collaborate.

While I was learning all about Classes, I came across this module called Symbols by Lukas Guschlbauer. I will definitely be looking into this more soon.

Easily create reusable components in Framer, without the hassle of actually writing a class.

der-lukas/framer-Symbols

But, for now, I’m glad I’ve actually gone through the hassel of learning how to write a class.

Lastly, if you’re wondering about the interaction and the popping animation of the icons when they’re revealed, the code for that is also inside the class. It really is a prototype within a prototype. So cool.

Lesson Learned

Creating this prototype gave me a chance to learn how to write classes, how to include a variable within a string, and how to use loops and arrays to duplicate similar objects.

See for Yourself

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.

Swiping Left in LinkedIn Messaging
https://framer.cloud/gxkeO

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.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Using Classes in Framer to Recreate Interaction in LinkedIn App for iOS was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Classes in Framer to Recreate Interaction in LinkedIn App for iOS

Cool stuff, every week

More Articles