Transacto is an android app that I was working on, that collects and organizes the user’s bank transactions automatically so that the user can track his/her finances better in a single place without any effort. (To learn more, you can visit the landing page )

To explain the user how the app works, I developed a simple three step walkthrough, which was used in the app, and the product’s landing page and the presentation.

Transacto walkthrough - image 1 - student project

The onboarding example from the class gave me the idea to try building an interactive prototype for transacto's onboarding process in framer. However, I was interested in building more than just some static content that could be swiped, so I decided to add some smaller animations to add a bit more meaning to the images.

You can view the Framer project here .

Transacto walkthrough - image 2 - student project

The code looks terrible, so I apologize in advance.

While the Framer documentation is really helpful, here are a few problems that I ran into while working on this project:

Importing layers from Photoshop - a really bad idea : I had built these mockups in photoshop nearly a month back, and had no idea about framer. I am a total sketch addict right now, but I didnt really want to build all of the assets in sketch from scratch. As expected, I ran into a whole load of issues when importing the files, like layers missing randomly and mismatched hierarchy. After playing around a bit, I realized that the only way to avoid this problem of missing layers was to put the layer in a group (I know it sounds silly) and then import it in framer studio.

As Koen pointed out, Sketch is the best option right now for importing assets without any hassle.
Size: Had to assign the relevant page for each layer's super layer and then it fit the view perfectly
Indentation : Tabs are not same as Spaces for indentations ! (After getting a lot of stupid errors, googling and hair pulling, a stack overflow answer about some coffeescript error pointed this out)
States: For the active page indicator, I thought I would try something different, and change the state of each page's indicator rather than move an active indicator (like in the tutorial) based on the active state. However, for some reason, it wouldnt work. (Toggling between on and default state on each swipe wouldnt work, except for the last page..wierd, but I have a feeling that I was making some stupid mistake...). I ended up placing an active indicator, and aligning it with the x value of each page's underlying indicator on each page change.
Dirty code: Right now, I am handling each layer's state individually, but I am sure that there is a more elegant method to handle animations when there are a ton of layers. To be honest, I didnt really care about code quality because the whole point of prototyping is to test things by building the quickly, right? However, I now think that as complexity increases, clean code helps a lot and actually saves more time! Any advice on organizing all the code better? (I think modules can help quite a lot to organize code??)

Thanks for viewing the project and I would love to hear your feedback.

Also, thanks a lot Noah, for this amazing class. I cannott think of any better introductory sessions for Framer, it definitely helped me a lot !

Sufiyan Yusuf

UI/UX Designer

2

18