Product designer
Screen Shot 2019-04-20 at 10.05.05 PM.png

Interaction Design with Framer X | UI

Prototyping using Framer X

Screen Shot 2019-04-08 at 11.25.51 PM.png

Overview

I challenged myself to learn Framer X, which is React-based prototyping tool. It is one of the most powerful tools that can create highly interactive prototypes with limitless possibilities. However, there is a very steep learning curve to get started because you will need to know how to code.  In the end, I feel that it will be all worth it. Because I got a better understanding of code, and how my designs impact the developers they are handed off to.

 

Approach

I created an archive of my framer x projects from the beginning. I want to document my journey from making something really simple to something more complex. All my files are all accessible to the public so we all can learn from each other.

 

Reflection

There are many design tools in Framers that are really helpful such as Stack, Page, and Scroll. I try to use framer to design everything in this project so I learn more about the tool. But I have to admit that Sketch and Figma are a much more comprehensive design tools. If I have a larger project, I would definitely use Sketch or Figma first and then import to Framer to make prototypes.

After doing this project, I become more confident about my learning skills. There are so many design tools in the market. Even though the one you are using now is probably going to be replaced in a few years; sharpening my learning skills will make me a better designer because I can quickly adapt to a new environment and express my ideas more smoothly.


 
 
ezgif-1-d24d8b8a0e2b.gif
 

1 Filter

This is my first Prototype using Framer X. I decided to practice creating code overrides. I started by reading this tutorial. I decided to create an image editing interface similar to VSCO.

I used the slider component from the store that saves me a lot of time. The tricky part is to figure out how to display the number that shows the value of the slider.

See code in GitHub

 
 
 
02StichkyHeader.gif
 

2 Sticky Header

I used another store component called Parallax to create a sticky header effect.

First, create a Scroll element and then write a few line of code override. I learned how to lookup other people’s code from the store and reverse engineer to make something I want.

See code in GitHub


 
 
 
03Scroll.gif
 

3 Scroll

For this prototype, I created an Android interface. I designed everything from scratch in Framer. I also used the android components from the store.

The design is inspired from Material Design. I learn a lot from Jay Stakelton’s Youtube channel.

See code in GitHub

 
 
 
musicplayer2.gif
 

4 music player

For this interaction, I continued to explore the page tool. The cube effect is very easy to use. Also I made the background , artist, and song name changes as you drag from one song to another.


See code in GitHub


 
 
 
05-Circlemenu.gif
 

5 half circle menu

My concept for this animation is to create a navigation bar for a cloud sharing app. By tapping the plus icon you can upload files, folders or images. You can press on the Cancel button to to go back.

I learned how to use JavaScript’s setTimeout() method to chain animations. And I also learned how to toggle animations.


See code in GitHub

 
 
 
06-navbar.gif
 

6 nav bar

This time I want to create a more fun navigation bar. I found out how to animate SVG path by using Animator form the store.

I also learned another method to chain animations, which is using async and await.


See code in GitHub