How To Add A Drawing Effect To Your FramerJS Prototype
One of my recent design projects @Driftt involved using a squiggly line to highlight a certain area in a dialog box and I wanted to get a better idea on the way it would feel prior to pushing it to our dev team for implementation.
I use Framer Studio for prototyping, but since Framer is geared towards Interaction Design it tends to lack support for effects that fall outside the standards for this category.
Luckily for me (and you) there is a way. Before starting you’ll need the following:
Adobe After Effects
Sketch 3
Framer Studio
Creating the movie clip in After Effects
I started with creating a simple movie clip with alpha transparency (that I would later import to Framer). You can create a simple line drawing in After Effects in just minutes following these 4 steps:
Tip: When exporting make sure that RGB+Alpha is selected in Channels.
After rendering the movie, simply move it inside your Framer prototype directory and you’re done with this part.
Prepping the UI in Sketch
If you are new to Framer you must know that all the design elements that make a UI component must be grouped in order to be able to target them in Framer after importing the Sketch file. I used 3 groupings for this project as seen below, but PNG images will work too if you do not wish to use Sketch.
Creating the prototype in Framer
And now the fun part! But before getting started a quick reminder that your Quicktime and Sketch files (or PNGs) must be located in your Framer prototype directory. The rest is a walk in the park:
That’s it! I hope this was helpful. Please don’t hesitate to send your comments, questions snippets of your own prototypes.
In case you were wondering, I used our own Annotate by Driftt to capture and annotate my screenshots and make this tutorials more visual and helpful.
It is available for both Mac and iOS and you may get it here.
Thank you for reading.
