Sketch: Embed Maps, Forms and more in your files – and publish them!

Maps! Now directly in Sketch and exportable to HTML 🙌

Hello! I got so excited by the Anima App​’s launch of embeddable widgets this morning – as part of Launchpad 0.7 for Sketch – that I went ahead and explored a bit. View the demo landing page here.

You can now easily embed AND export to HTML:
– 🌏 maps
– 💰 eCommerce (from Gumroad or Free&Willing, my platform)
– 📝 forms (Mailchimp)
– 📊 Google analytics and any other tracking snippets!

I went ahead made a sample demo file

The landing above page was created with Launchpad, the downloadable file is linked at the end of the page, but if you are in a hurry you can download the file directly.

To test the landing page it just:
download the file 
– click the rocket in the Anima App panel in Sketch!

– Then follow the instructions :)

You can publish an unlimited amount of pages (if you want you can pay to remove the Anima branding, but you don’t have to until you are ready…).

Ready, Set.. Go! 🚀

Adding Widgets
1) Start by adding a rectangle where you want to place the Widget

Select the rectangle and choose “Widget” from the CUBE menu.

2) As of now pretty much anything that can be loaded into an iFrame be displayed and published as a widget:

Choose the widget time from the list (not shown)

3) Paste the iFrame code…

Paste the code snippet in the right area (in this case for Google Maps)
Et voilà, the Google map loads in place of your rectangle. :)

click the rocket (the one on the right) in the Anima App panel in Sketch!

– Then follow the instructions :)

You can alway edit a widget here selecting the rendered widget and clicking the CUBE menu. Tip: when it’s blue it means something has been connected to that element.

Widgets look like this in the layers panel

UPDATE: While I work on a video tutorial please enjoy this great video from Pablo Stanley of Sketch Together — the widgets portion starts at 14:35 but worth watching the whole video to learn about Launchpad in general! Enjoy!

Great video from Pablo Stanley

If you enjoyed this post please ❤️ and share or consider the workshop below:

[WORKSHOP] Tonight May 30th (6:30pm ET) I’ll be talking about Sketch App​, Anima App​ and Autolayout + Launchpad and how to publish websites and mobile apps.

👉 🎟 Get your tickets here

You can get a 5-Tkt pack and save 30% on our events (online and in person events). Tickets are valid 1 year from purchase.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.