Lots of us use GIFs every day to communicate ideas or feelings more smoothly than words allow. A quick search through your inbox or Slack channel is sure to turf up lots of funny reaction GIFs, but they're capable of more than just oiling the wheels of office banter. For designer and remote worker Steven Fabre, GIFs are an invaluable way to show interactions in designs.
Whereas videos, video calls and screen recordings are relatively time-consuming, Fabre found that GIFs were a straight to the point way of communicating with teams remotely.
"The problem was, creating those GIFs was extremely time-consuming," Fabre explains. "I would design my states in Sketch and export those so I could open them in Photoshop. From there, I would overlay them on top of each other and turn visibility on and off via the timeline. And to make things worse, every time I would make a change in my design, I had to go through this whole cumbersome process all over again."
To this end, Fabre created Gifmock, a simple desktop application for macOS that helps users to create high quality GIFs from their mockups.
With the Gifmock Sketch plugin, users can design interaction states and instantly turn them into frames. Once the frames and timings are perfected, the GIFs can be easily exported to Slack or wherever your team is based.
Alternatively, animations can be designed in After Effects. Just drag and drop a video to automatically turn it into a GIF without having to worry about a compromise of quality and frame rate. Once it's ready, you can publish the GIF on Dribbble.
Photos and Keynotes slides can also be imported into Gifmock to create engaging GIFs that can be used on Twitter. To get the perfect look, the timing of the frames can be changed, plus you can crop them all at once with a real-time thumbnail preview.
Fancy creating your own mockup GIFs? You can grab Gifmock for $14, with no rolling subscriptions to get locked into. You can even download a free 14 day trial to see if you like it before you buy it.
Some designers are already using it for, er, mainly important work:
using gifmock for this quick n' dirty visualizationexcited to build this~ #overwatch pic.twitter.com/LqMyoJcbnw14 July 2017
Gifmock permet de créer des GIF à partir de Sketch. Mais ça marche aussi avec des photos de chatons. https://t.co/mrjAi6yC3C pic.twitter.com/tDdIxMeX1Y11 July 2017