Juans best Keyshape tips & tricks

Hey guys! Yesterday I had a presentation internally about Keyshape, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy 🤖 💪 ✅

9 out of 10 times I use this marvellous animation app because it does so many things right:

  • Easy to use interface that resembles a bit of Flash (in a good way 😆)
  • Amazing export options (CSS, Lottie, Android Vector Drawables, KeyshapeJS, MP4, GIF etc)
  • The code output is clean and easy to implement in projects

Lottie import and export!

Lottie is a hugely popular animation format that works about everywhere. Via the official Keyshape Lottie plugin you add animation super powers to a very affordable app.

Many times when I need to animate something complex I usually do this:

  1. Browse around Lottiefiles.com to find an open source animation
  2. Download the Lottie JSON file and open it up inside Keyshape
  3. Change things like colors, timing etc
  4. Export the animation again to either Lottie or any other format that suits my current project needs
  5. If I export it again as Lottie I drag+drop it into Lottie Preview for testing it out, distributing it further. All your animations that you add to preview and don’t publish to Lottiefiles.com are by default private. But here’s the neat thing, you can still share them with your developers. 🤖 ❤️

Animate once, use everywhere

Also, since I now have the animation inside Keyshape, it’s a piece of cake exporting it or adapting it for several use case.

Some of you may now this, most of you won’t: Keyshape is actually responsible for me doing video tutorials in the first place. When I started using it in 2017 there where the total amount of 0 video tutorials about Keyshape. I felt a strong need to start showing the world how awesome this little animation gem was. I still do!

So without further notice, here are a couple of great tips I have gathered through my experience.




Co-founder of Team Sketch2React. Designer that wants to make your maker lives easier😺👍

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Orpetron Web Design Awards Winner Sites (Nov 26– Dec 2)

What If French Dressing Were Actually French?

UX: How To Optimise A Fill-In Form That Will Increase Conversion Rate by 200% (Real Case Study)

Vision breaks ground on Graphite Square

Graphite Square

How Hoang has made over $5500 in passive revenue thanks to UpLabs Premium

The Edge Effect

How I changed my life with one Medium post

Roll Call: Zoe + Matt + Sijia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Maguid

Juan Maguid

Co-founder of Team Sketch2React. Designer that wants to make your maker lives easier😺👍

More from Medium

Enjoying web design using Tailwindcss

Learn the basics of responsive web design

Responsive design

Trickfilm: The New Saturday Morning Cartoon Service

Project Holori