Designing and Building Custom Animations with Framer and Sketch
Moving from data-entry business tool design to more consumer- and client-facing frontend work started testing my attention to finer detail and aesthetics - but more importantly, user interaction and responsive design. A big issue was trying to convey transitions and animations - how should the product feel when I interact with it. I began researching the most efficient prototyping options available, in the hopes that I could build pieces of the interface to help my team understand the design, even before design approval.
Sketch
Working with Sketch for under a year, I already made leaps and bounds over my work with Adobe Illustrator, which has seemingly become more bloated over time.
RelSci Android UI work in Adobe Illustrator. Filled with buttons and forms that I rarely use for simple operations.
MINE by RelSci iOS design in Sketch. Interfaces appear for the element selected, and vanish when they no longer apply.
The cleaner interface got rid of distractions and unnecessary menu depth, while the easier-to-access shortcuts helped speed up my workflow.
Sketch also let me work with artboards better as a whole - I can replicate screens rapidly with a single shortcut.
I won't go into too much depth on the pros and cons of Sketch over AI - whatever works for you is always the better tool - but cutting the fat in my day-to-day let me organize my designs better, which helped with prototype construction.
Framer
Now that I can easily create perfect vector illustrations of my app, it was easier to show my team and stakeholders how the screens should look static.
A big piece of user experience design is tricking the user through transitions. This might seem like an odd statement - I'll try to clarify. If I open a news app and click through a few links - the app will, at the least, show each link in a new 'view' or window. Android and iOS usually show these in some kind of pop-up animation. Now, mentally, I'm thinking of all the windows I opened, and how to deal with them - how hard will it be to get back to something I found earlier?
If you can phase-in or blend a new view into a current one, we start to see the app as one experience, rather than a stack of cards.
How can I show some of these transitions, along with some more aesthetic eye-candy? Framer.
Framer is essentially a WYSIWYG CoffeeScript editor. It allows me to draw objects and write simple code to manipulate and animate them - you can build interactive prototypes with click and drag listeners that react to the user. Framer contains some very nice viewing and presentation options, and exports the prototype in a self-contained page that I can host on a webserver for others to play with.
Sketch Integration
The best feature of Framer is that it can auto-import layers from Sketch, and some Adobe products. Every layer and sublayer in Sketch becomes an object in Framer, and they obey the same hierarchy I defined in Sketch, with all the same attributes (placement, opacity, visibility, etc)
In the example below, I wrote a quick prototype to show how our upcoming design for MINE by RelSci on iOS will feature a seamless Relationship toggle.
Framer features an import button that handles the actual grab, straight from the Sketch workspace that it detects.
After the import, 1 line of code is added to the top of your script - an array object that contains all the layers from Sketch as items. I'd rather work with the items individually, so I'll break them out.
# This imports all the layers for "mine_add_rel" into imported
imported = Framer.Importer.load "imported/mine_add_rel"
# Break out individual items
AddRel = imported["AddRel"]
RemoveRel = imported["RemoveRel"]
AddRelToggle = imported["AddRelToggle"]
RemoveRelToggle = imported["RemoveRelToggle"]
Teal = imported["Teal"]
That's it. Now I just need to add a click listener, a few conditionals to ensure we avoid race conditions, and add animations to my Sketch objects.
# Listen for a click on the Add Relationship tag
AddRel.on Events.Click, (event, AddRel) ->
# If the Remove Relationship button isn't visible, do the Add Relationship animation.
if RemoveRel.visible is false
RemoveRel.visible = true
AddRel.opacity = 0
Highlight = new Layer
width:10, height:10, backgroundColor: "#BC2E2E", borderRadius: "50%", opacity:0
Highlight.superLayer = Teal
Highlight.x = AddRel.x + (AddRel.width)/2
Highlight.y = AddRel.y + (AddRel.height)/2
highlightAnimation = Highlight.animate
properties:
width: 1200, height: 1200, opacity: 1, x:AddRel.x + (AddRel.width)/2 - 600, y:AddRel.y + (AddRel.height)/2 - 600
curve: "ease", time: 0.25
else
RemoveRel.visible = false
AddRel.opacity = 1
Highlight = new Layer
width:10, height:10, backgroundColor: "#2E686C", borderRadius: "50%", opacity:0
Highlight.superLayer = Teal
Highlight.x = AddRel.x + (AddRel.width)/2
Highlight.y = AddRel.y + (AddRel.height)/2
highlightAnimation = Highlight.animate
properties:
width: 1200, height: 1200, opacity: 1, x:AddRel.x + (AddRel.width)/2 - 600, y:AddRel.y + (AddRel.height)/2 - 600
curve: "ease", time: 0.25
You can see above that I manually created the objects that represent the header color - red and teal blocks that explode radially from the center of the Relationship buttons.
That's it - now I have a prototype showing the intended transition.
Only a couple more listeners add the highlight effect of a 'click-and-hold.'
# Listener functions allow the user to press the Relationship button and highlight it before releasing and triggering the action.
AddRel.on Events.TouchStart, ->
if RemoveRel.visible is false
AddRelToggle.visible = true
if RemoveRel.visible is true
RemoveRelToggle.visible = true
AddRel.on Events.TouchEnd, ->
if AddRelToggle.visible = true
AddRelToggle.visible = false
if RemoveRelToggle.visible is true
RemoveRelToggle.visible = false
Since the prototype is just Javascript, it's easy to post on any website and let users interact. Framer has some great examples to play with.
I posted a couple other examples below - my latest rendition was a full new user tour as part of our onboarding process. I usually stick with simple prototypes - for a full app, I'd probably fall back to easier options like Flinto, which can import all screens rapidly.