My First Framer Project

Prototyping is an integral part of a design process as it sets a very high bar in terms of overall execution of the product. In the last couple years we’ve seen a slew of average to awesome prototyping tools. Some are easy to learn, but come with limited abilities. Some are really powerful, but have a steep learning curve. It becomes very difficult to choose one and fall in love with.

Personally, I am motivated to get into a long-term relationship with a tool if it promises me to be committed and trustworthy. A tool, that will love my innocent ideas as a n00b and respect the matured ones when I grow up learning it. Well, there are tools that promise me that trust and commitment. They are awesome, but I choose to fall in love with the one that makes me feel good. Framer is one such tool that makes me feel good I feel is totally worth falling in love with.

I started learning Framer few weeks back and so far, I’ve just loved it. After looking and poking around a bit, I wanted create something playful to start and pretty much ended up creating this little thing.

It does nothing, it is just for fun, it possibly just makes me feel good. But, I feel to learn a new-something you just need to get into it. Explore it to give shape to your own ideas. As soon as you learn to reflect your basic expressions with a tool, gesture, language or a medium, you start getting creative at it. And that is just the beginning of your creative endlessness.

So, I wanted to put a short story of my process in front of all of you. I’ll be glad if this helps anyone in their process, understanding some basic and important code constructs, or overall boosting your dependability on a prototyping tool like Framer.

Process & Code

One limitation that I imposed on myself was to create all the elements natively in Framer. I intentionally did that to learn more coffeeScript and the most common properties and methods that come in with the basic objects.

Alan Lakein once said, “Failing to plan is planning to fail”. It is one of the most profound philosophies for any prototyping process. Having the end goal clearly in mind helps us to take alternative paths to reach there and no matter which path you take, if you plan your moves correctly, you have already signed up for success. So to plan this well, I broke the elements, events and behaviors carefully from the vey beginning.

Here is a visual of what was running through my mind when I started playing around. Each element’s composition, its behavior due to an event and the harmony between elements were thought out at this stage:

Once I had a fair amount of clarity on what am I up to, I started playing around in framer. The whole code is explained below in the sequence of their importance and appearance in the Framer file. I have tried my best to explain blocks or lines of code with #comments.

Composing the swatch refresher button:

Composing the Heart Layer:

This layer is created using 5 child layers and a wrapper/parent layer to hold all these child layers. Here is a quick view of how this was planned. The names on the right side are the actual layer names used in the code.

Planning the events:

From here, we should be creating our swatch and thinking out the interactions thoroughly to plan the events well. So lets relook at what is happening with the interaction and break it down into various events:

Start pressing a color in the swatch… (TouchStart)

• The selected color is applied to the rhombus-ey area of the heart.
• The semi-circles on each side of the heart (heartLeft and heartRight) get a lighter color of the selected color from the swatch.
• A border is applied to the selected color layer.

Keep the color pressed…(onLongPressStart)

• The heart starts growing with a wiggle-ey animation. Stops at a point and keeps wiggling.
• The color selector pops away to being invisible
• Ship love text disappears

Release the pressed color…(TouchEnd)

• The heart bounces back to the original size and position
• Little hearts appear randomly and ease out of the screen at the top
• Ship love text with the selected color appears and slowly animates up
• A sheen animates over the ship love text to emphasize the magic word
• The color selector bounces back to its original position and size

Color selector tap event (Tap)

• The whole swatch is refreshed with a nice little animation.

Lets go one-by-one:

First, lets create couple of variables to store our main animation curves.

Next, create the ship love text and its sheen.

Next, lets handle the heart-grow and wiggle animation and store it in a function called “growHeart” so that we could call it in our onLongPressStart event later.

Next, we will write a function to animate our little hearts.

Next, swatch. This swatch uses nested for loops to create a grid instantly. First lets initialize couple variables and an array to hold these color layers so that we could play with them in code later.

Then, create the swatch holder/wrapper to visually hold all the color layers.

Now that everything is nicely setup, we will write our main function to create the swatch and attach all the events. This functions does a lot of things so lets break it up in words before proceeding with the code.

1. Creates layerRowCount*layerColCount layers
2. Adds random colors to each layer
3. Animates each layer with a delay to create a smooth wavy effect
4. Adds all the 3 events to each color layer

Finally, we will add our last Tap event to the color selector circle button

That’s about it! If you want to play around with the framer file, please use it as you want to — Ship Love