We added a new component — and guess what?

It’s wonderful and will change how you work with Sketch2React.

Bold words yes but let me explain a bit of background. Without context, this will just be empty words taking up space on the inter webs.

If you have followed me for a while, you will know that I love animation and motion design. One of the very first things that got me super excited back in early 2019 was when we added support for CSS plugins. What custom CSS excited me most?

The true force of being able to animate elements in my designs inside Sketch with the amazing Animate.css library. It blew my mind right open.

To be able to add a ready made animation library to separate components blew my mind

I’ve always pushed for animation within our framework. That’s why we added Lottie and Haiku support very early on.

What bugged me for a long time

I’m a big fan of both Lottie and Haiku but one thing that I’m an even greater fan of is smarter workflows. I usually make simple animations using Keyshape. The strength of Keyshape is that it’s a super lightweight vector-based app that outputs code by default.

No need for plugins or third-party libraries.

What do I want to do in Sketch2React? The same.

Enter {image-external}

This is a 100% true story. While talking with Fredrik over Slack about a week ago, he casually adds:

”Hey Juan, by the way, I actually added a new component to Sketch2React. It’s called {image-external} and it lets you host images and GIFs from your server. Actually, I added it a while ago, just forgot to tell you about it” …

Whhaaaaaaaaaat?!!!!

After I had come down from the shock of Fredrik forgetting to tell me about this, I quickly thought:

”Hmm, if it works with images and GIFs, what about animated SVGs?”

Drum roll.

Yes, it does, and here’s living proof.

Why I’m excited

For me, creating an animation in Keyshape, exporting it as SVG CSS and then just uploading it to an FTP server is way easier, quicker and more enjoyable than the alternatives.

Don’t get me wrong, I really love the Lottie format, but this workflow is cleaner. This way I know it will work in from the get go without the need to install anything else.

It even works inside buttons

Animated buttons I say why not?

While putting together a simple demo for you guys, the thought of also having small animated elements inside e.g a button became something I really needed to explore.

Why not, I say. Let’s push this as far as we can imagen with the things we have. Modus Operandi Team Sketch2React.

A few failures later and it worked fine. You can just grab my findings and components from the free demo above, we hope it will bring you much joy.

Important side note

You need our latest Sketch2React stable version for this to work, but we will add it to our free demo in a near future. Stay tuned folks.


That’s it for this time, we hope you will have as much fun with {image-external} as we do.

Leave a Reply