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

4 of 100: One designer’s journey to master prototyping in Framer

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. If you’d like to follow along with my tutorial, just download Framer’s free 14 day trial.

N° 4—Switching Journals in Day One

https://framer.cloud/mcfQv

Design

Day One has been one of my favorite apps for years. After using it for a few weeks, I bought the desktop app too. It’s a powerful tool for recording (and later, remembering) people, places, events, or whatever you want. One great feature is the ability to have multiple journals. I have three. The first is simply the ongoing, day-to-day record of my life. The other two are digital conversions of traditional journals that I wrote when I was younger. Switching between journals in the app displays a nice modal menu, and choosing a journal ‘themes’ the app according to that journal’s assigned color.

I am finding that Framer’s design capabilities almost give me everything I need to recreate the screens I for these prototypes. But, without boolean operations and a pen tool, I still need to jump over to Sketch to create custom icons. Everything else I can easily do in Framer.

I’m getting to the point that I’d almost rather design in Framer because it greatly simplifies the prototyping phase when I switch over to code.

For this particular prototype, I only needed two artboards: One for the main view and one for the modal menu that displays the journal options. Everything else with regards to the design is pretty basic.

Code

The main interaction in this prototype is really simple, and very easy thanks to Framer’s Flow Component.

# Flow Setup
flow = new FlowComponent
flow.showNext(MainView)

# Flow Interaction
btnJournalSelector.onTap ->
     flow.showOverlayBottom(MenuView)

That’s it. The Flow Component takes care of the animation and the dark overlay behind the menu (Tip: Don’t forget to set the opacity of the menu’s artboard to 0 to make it look like a modal). It literally took me less than a minute to prototype that primary interaction: tap the button -> show the menu.

But, there were a lot of other details I had to code to get this to where I wanted it to be. Namely, when the user switches to another journal, there are a number of visual changes that need to take place. For example, picking another journal makes it the selected journal. So, the next time that menu is displayed, its list item needs to reflect that. The background needs to be a solid color; the main label needs to be white; the entry count, the picture count, and the image icon also need to be white. To do all of that in code for each individual journal would have been tedious. Luckily, I learned about arrays and for loops a while ago.

Arrays and For Loops— I used nearly a dozen arrays in this prototype. An array is just a list of things. My arrays were lists of objects. And once I have a list, or a group, of objects, I can affect them with a For Loop. I explained a for loop to my wife like this: Imagine we have an array (list) of our three kids. With a for loop I can do something like this:

myKids = [savannah, jackie, grace]

for kid in myKids
    kid.hairCombed = true
    kid.dressed = true
    kid.happy = true

In the above example, “kid” is just the name I gave to the variable to be used in the for loop. A for loop executes the actions to each item in the array. When it finishes with one item, it moves on to the next. Doing this the long way would be more like this:

savannah.hairCombed = true
savannah.dressed = true
savannah.happy = true
jackie.hairCombed = true
jackie.dressed = true
jackie.happy = true
grace.hairCombed = true
grace.dressed = true
grace.happy = true

The arrays and for loops I have in this prototype allowed me to set up states and to switch those states without being too redundant. Here’s an example of the code that runs when the user selects the “My Mission” journal:

btnMyMission.onTap ->
     flow.showPrevious()
     activeJournalLabel.text = "My Mission"
     setJournalSelectorWidth()
     resetJournalMenu()
     backSplash.backgroundColor = green
for btn in closeButtons
          btn.color = green
for item in myMission 
          item.stateSwitch("active")

And that “resetJournalMenu()” function? It has four for loops of its own:

resetJournalMenu = ->
     for journal in journalButtons
          journal.stateSwitch(“inactive”)
     for item in meta
          item.stateSwitch(“default”)
     for label in journalLabels
          label.stateSwitch(“default”)
     for list in lists
          list.stateSwitch(“inactive”)

For loops and arrays have been somewhat of a game-changer for me, making it easier and faster to prototype with Framer. You can learn more about Loops and Arrays from Framer’s Programming Guide.

Lesson Learned

In previous prototypes, after creating an icon in Sketch I could export the .svg and drag it into Framer where I would choose a color for that icon. But this time, it wasn’t working for some reason. I discovered that the exported .svg icon created in Sketch could only be recolored in Framer if the original color was #000000. Below is an example. On the left, the icon was exported with its fill as #000000, then a blue color was chosen after dragging it into Framer. The icon on the right was exported with a fill of #FFFFFF. When it was dragged into Framer, it appeared in the inspector panel that its Fill wasn’t enabled. So I checked the Fill box, and selected the same blue color, but the result wasn’t what I was looking for.

The moral of the story is that if you’re exporting custom .svg icons from Sketch and using them in Framer, make sure their default fill color is #000000.

Go Check Out This Prototype

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.

Journal Switching in Day One
https://framer.cloud/mcfQv

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

Using Framer to Prototype Day One’s Journal Switching was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Framer to Prototype Day One’s Journal Switching

Cool stuff, every week

More Articles