Published on | Prototyping: From UX to Front End — Medium Jiesi Huang

There are a plethora of UX software tools out there — from ones that help you to rapidly prototype in low-fidelity, to ones that allow you to build screens exactly how you want them to look, right down to the details of every pixel. However, somewhere between the process of bringing a design from its initial sketch to its final look, there is a need to conduct user tests using low- to mid- fidelity prototypes.

Shortcut links for the websites of the UX tools mentioned in this article:

Principle

Craft by InVision

Framer

The need for accurate interactions in full-flow prototypes

There is value in rapidly prototyping specific screens of an app in order to test particular interactions. There are also times when we want to test the full flow of the app. From the tests that I have conducted, I have realized that it is best to ensure that most of the interactions in the prototype are accurately simulated. Using static screens to build an interactive prototype is quick and simple, but it may be difficult to build the flow that we need. This is especially true if the app needs to remember specific steps that the user has taken. If the prototype does not show the correct statuses according to the testers’ actions, it could be confusing. It would be hard to determine if the problem was caused by the limitations of the prototype, or if the actual design could be improved.

Challenge: Building a full prototype

I’ve recently had the challenge of prototyping the full flow for an app that involves users interacting with a dummy ‘other person’ in a prototype. Among other pages, it includes a chat, and a screen which allows transactions to take place between the tester and the dummy user. I had to produce the interactive prototype in a week, using screens that I’ve already designed in Sketch. Prior to this, I’ve only been using InVision to build interactive prototypes, and only its most basic functions — creating hotspots and fixing headers and footers. I could use the same workflow and create duplicates of screens for the different steps of the chat and transaction, but just thinking about the tedium of creating screens for all the possible options motivated me to explore other tools for my needs.

Disclaimer: I am reviewing these tools as a new user, so there may be functions that I don’t know about, or that I didn’t use in the intended way. If there is any inaccuracy in this article, please let me know! It’s always good to learn about them.

Principle — Good for rapid prototyping of interactions within one or two screens

The first software I tried was Principle. I have heard much about this software, and I have seen some animations made with it, which are really quite impressive.

On their website, Principle states that you could build an extensive multiple pages prototype. They also have a 14-day trial ($129 for a year’s license), and they only count the days that you actually open the app. Sounds good. So I downloaded it to try.

Timeline: Interactions between screens

Principle supports import of Sketch files, preserving the layers, which was really nice. The interface itself looks like Sketch, and it was easy for me to pick up. To add an interaction, you just needed to select an element on the artboard and link it to any other artboard. There are many trigger events to choose from, such as tap, long press, drag, scroll etc. The animation properties can be changed from the timeline.

Drivers: Animations within a screen

There is also this panel called the “Driver”. When a layer has been enabled to be scrolled/dragged horizontally or vertically, you can add animations to the layers within the screen, things like changing the opacity, scale, position angle, fill, stroke etc. You specify keyframes at certain times (e.g. opacity 0 at time 0, and opacity 100 at time 20), and Principle would interpolate the values in between to get a nice smooth animation. You can stack animations for any layer, e.g. changing both the scale and the colour. People have compared Principle to After Effects. In terms of animation, personally, I think it’s a very limited version of what After Effects can do, but for quick prototyping, the options offered are good enough.

Pros

Principle is really easy to use. I didn’t need much effort to read tutorials to be able to use it. It has really good Sketch integration too. The mirroring between Principle and an iOS device works really well, so you can test out the animations on an actual device, quick and easy.

Cons

Each interaction that you create makes a new artboard. So if a page has 10 interactions, you will have 11 artboards. It can quickly add up and become crazy messy. This is how my project looks after adding less than 20% of the interactions I needed for the first page.

Furthermore, if you make changes to your design and re-import the sketch file, it only updates the very first artboard and not the rest created due to the interactions. That is just… not good.

I quickly realized that using Principle to prototype the full flow is just not viable.

However, for quick prototyping of one or two screens, or to design specific animations one at a time, Principle is a very good and fast tool.

Craft by InVision — Works well and fast for static screens and prototypes with little intra-page interactions

Craft is a plugin for Sketch that allows you to add interactions within Sketch itself, and then sync it to an InVision account. In my opinion, InVision is still the fastest way to create a clickable prototype, and Craft makes things even faster. (Craft is a free plugin for Sketch, InVision is free if you have only one prototype, $15/month for 3 prototypes)

Prototype mode and linking between pages

Craft allows you to enter “prototype mode” in Sketch and specify interactions for any Sketch layer. Just press C when a layer is selected to connect it to another page, or to another location on the same page. There are options for different trigger events and different animations (e.g. push right, slide left, flow etc)

Overlay function

I also tried out the Overlay function (also available when using InVision on the browser), which allows for design elements to be placed on top of a screen, keeping the screen below as it is. That is definitely useful and requires less screens to be built, especially for things like hamburger menus — instead of creating a screen with the menu visible for each page, you just need to put the overlay when the hamburger button is pressed.

Pros

Full integration with Sketch. You can make changes to the designs of the Sketch files with practically no worry. Rapidly switch between designing the screens and adding hotspots.

Cons

You select a layer to add an interaction to it, so if you’re using symbols, there is no way to break it up unless you detach the element from the symbol. A workaround that I’ve seen suggested online is to create a transparent rectangle over the area you want the hotspot to be, and add the interaction to the rectangle. That feels like a hacky solution to me though. InVision on the browser handles this much better since you draw the rectangle for each hot spot.

If you have many interactions within a screen and you want to allow users to be able to click through all the possibilities though, it is probably not a good idea to use Craft/InVision. I tried it for a page with radio buttons and checkmarks, and this is what it looks like after less than half of the desired interactions have been built:

I honestly gave up doing the second half because of how messy it was and how easy it was to make a mistake.

I think I’ll stick to using Craft/InVision just for showing how one screen flows to the next, and not for interactions within a screen. It is my preferred software of choice for really quick demonstrations to my team. (Clickable prototype within literal minutes!) I have to give a shoutout to the friendly InVision staff though, who contacted me of their own accord when they saw that my email was a school email, and when I told them that my expected graduation was June 2018, they let me have the education license (unlimited prototypes!) free until Dec 2018, so as to “give you enough time to graduate and then show off your work to hopefully get a great job”. Thank you so much to the InVision team! 🙂

Framer — Flexible prototype building using code, but with a steep learning curve, and design files need preparation

Framer’s tagline is Design, Code and Collaborate, a phrase that I can apply to my own work style, so I identified with it almost immediately. Framer uses Coffeescript, a variation of Javascript that compiles into the latter. From reviews online, it seems to be that designers either love Framer or find it too hard to pick up. I thought, I’m familiar with programming, so why not try it out? (Pricing: $15/month or $144/year, there is a free trial for 15 consecutive days.)

Steep learning curve..

I have to admit that on my first try, I gave up in half a day. It seemed to me that it didn’t integrate so well with Sketch, as even though it imported Sketch folders as layers, Framer didn’t support the Auto-code feature for Sketch layers imported right off the bat. The Auto-code feature basically allowed you to right-click and select animation options, and code would be generated for you based on the selection. It reminded me of my early days learning about animation in Flash. It was a bummer for me when I realized that I couldn’t just right-click on a Sketch layer and use Auto-code.

Additionally, I couldn’t figure out how to advance between screens. I had read somewhere that screens were placed side-by-side in Framer, and I had the impression that if I wanted to switch screens, I needed to move the x positions of everything so that the correct screen fitted on the canvas. It felt cumbersome to me, and I thought that maybe Framer was never meant to be used to prototype many pages. The samples of Framer projects that I saw online were also of micro-interactions. I thought that trying to figure things out and develop the complete prototype would not be possible within a week.

..but super powerful when you just spend a little bit of time and effort to read up on tutorials

I eventually came back to it and gave it another chance. (I told myself: Come on, you programmer! How can you give up on this when even people with no coding background can pick it up?) This time, I decided to take things one step at a time, and to start with one screen. I had to make scroll components, and to make layers in order to put my buttons on top. Voila! I found out that you could use Auto-code on the layers that have been coded. Then I learnt about Page Components, in which you can wrap around everything in a page, and about using Flow Components to advance from one page to the next. As with any other programming language, the more I tried, the more I found I could do, and more efficient ways of doing things. (I’ll probably write another article later about the elements of Framer.)

The conclusion is that Framer suited my needs quite nicely, and I managed to complete my full prototype using it! There are some limitations though, which I will discuss below.

Pros

I find it much neater to write in code. (Maybe that’s just the programmer in me speaking.) But seriously, because I can give my own variable names and put comments in my code, everything is neatly written in words. I was glad to not need to see the very messy arrows that were present in both Principle and Framer.

This is how the Sketch file that I’ve prepared for Framer looked.

Ah, so neat.

No duplicate screens, no arrows flying everywhere.

Framer also allowed me to remember the flow of the user’s actions. I stored the current step in the flow into a variable called flowStep, and during different steps, there are different actions enabled in the prototype. This allowed me to build a very seamless prototype that behaved exactly like the real app for the series of actions that I wanted the user to perform.

There is also the advantage of editing my designs without worry. I just needed to make sure that folder names were not changed whenever I made any changes to my design. I just had to re-import my Sketch file, and everything would be updated with no trouble at all, and without affecting any interaction. Wonderful!!

Same for adding new artboards, it would just be added as a new layer and no affect anything that I’ve previously coded. This allows me to build onto the prototype screen by screen and fix errors along the way, instead of going through the cognitive load of thinking of the full flow while preparing my design screens, then needing to recall the exact same full flow again while making it interactive.

Lastly, the ability to reuse code! If I need a second prototype with improved designs, I can reuse more than half of the code that I’ve already written, and that would save so much time when I have an improved version of the prototype! If I use Principle or Craft, I’m pretty sure I would need to build the whole prototype from scratch again.

Cons

Yes, “hard coding” (fixing data and parameters in such a way that they cannot be altered without modifying the program) is used a lot in my prototype, as it is much faster. Even with the flexibility of Framer, to build all the interactions that is possible within all the screens would take so much time that it’s not viable for a prototype — you almost might as well build the actual app.

Integration with Sketch is not the best too. The inability to use Auto-code on Sketch layers directly is one. Another limitation is that every layer that you want to show up in Framer has to be in a folder. This means that I have to clean up and rename all the elements in my Sketch file. It would be nice if Framer could just import all the layers as they were. There is also the issue of needing to break up Sketch symbols if you have multiple interaction points within a symbol (like a tab bar, for example).

The import also takes much too long. (Even though admittedly, I had A LOT of layers.) When I had more than 4 artboards, it froze up my laptop whenever I tried to re-import the Sketch file. 🙁

Luckily, it seems that all the assets do get imported even when it freezes, so if I let it run for 10 minutes, then force the laptop to restart, all my layers will have been imported. I can’t imagine that’s good for my computer though. I’m not sure if there’s a way to import multiple Sketch files into a Framer project, but that might be a possible solution.

Conclusion

At first glance, I thought that the tools have the same function, but I quickly found out that they were all useful for different things.

Principle is good for very fast creation of animations for one or two screens.
Craft is useful for quickly creating clickable prototypes that need lots of navigation between pages, but little interaction within each screen.
Framer has proven to be the best for my current challenge — to prototype the full flow of an app that remembers the user’s actions.

If I had unlimited finances, I would buy all three apps. But for now, I would stick with minimally having the InVision free trial (limited to 1 prototype), and having Framer at hand. For building of animations for a couple of screens, Framer can do what Principle can, albeit taking longer, but I do like having the flexibility of being able to build a full app when necessary.

Building an interactive prototype: Comparing Principle, Craft by InVision and Framer was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building an interactive prototype: Comparing Principle, Craft by InVision and Framer

Cool stuff, every week

More Articles