Introducing Launchpad for Sketch

Publish websites directly from Sketch, no coding needed.

Anima App
Anima App
May 2, 2017 · 5 min read

Launchpad converts your design to HTML and CSS and publishes your design as a real live website.

Update: Launchpad is now part of Anima toolkit, allowing designers to create Responsive and Interactive websites, all inside Sketch.

Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

4 months ago we’ve launched a new product that changes the way designers design. Auto-Layout for Sketch enables designers to create responsive designs in a seamless way.

2 months ago we’ve introduced a new feature called Stacks. Stacks are Flexbox within Sketch. This powerful feature made designing responsive designs even easier and better.

These milestones have paved the way for our new product.

Our new product allows designers to publish websites with a single click, directly from Sketch.

Visit Website:

Up until now Sketch designs were merely pixels. Today they become alive. Sketch designs of websites become real websites. Designs that were made responsive with Auto-Layout will now be responsive in the same way on a browser in a real website.

Launchpad is a Platform as a Service for designers. The entire interface is integrated seamlessly into Sketch so you can feel at home.

Launchpad for Sketch is a web publishing tool for:

  • ✅ Landing pages
  • ✅ Marketing websites
  • ✅ Static websites

Launchpad does not currently support:

  • ❌ Dynamic websites with Javascript

It’s perfect for Landing Pages and Marketing Websites.

Main Features Overview

  • Breakpoints — A way to make your design look great on Mobile, Tablets or Desktops.
  • Links —Each Artboard is a web page. You can set up links between Artboards or to external websites.
  • Forms — You can set up forms and enable visitors of the website to submit information such as their contact information.
  • Videos — You can embed a video player in the website. YouTube, Vimeo, MP4 or GIFs are all supported.
  • Analytics — Track visitors with your favorite analytics provider.
  • SEO — Meta tags for search engines and social media websites.

Let’s dive into each of these features!


Breakpoints are a way to make your design look great on Mobile, Tablets or Desktops.

To create Breakpoints

  1. Design a webpage in multiple Artboards where each Artboard is for specific screen width.
  2. Using the Breakpoints button, mark the multiple Artboards as same webpage.
Design by Zhenya & Artem


There are 3 types of links:

  1. Page Link - A Link between different Artboards
  2. Anchor Links - A Link within the same Artboard
  3. External Links - A Link to an external website
Create Link to a different Artboards
Create an Anchor Link
Create an External Link


Forms allow visitors of the website to submit information such as their contact information.

A Form is composed of:

  • Text Inputs - One or more Text Input layers
  • Submit Button - One Submit Button layer

When setting a Layer as a Submit button, form options will reveal:

  • Email - optional Email address to send notifications when visitors submit information
  • Spreadsheet - optional A name for a Spreadsheet which you can view and download as CSV of all the entries
  • Success page - optional Where to redirect visitor once their submission has been successful.
  • Failure page - optional Where to redirect visitor in case their submission failed.


Live contact form
Sketch file

Based on Contact Form by Sophinie Som


You can embed a Video player in your website by setting a Layer as a Video.
When selecting the Video layer, you’ll be able to provide a link to a video, that will be presented on the website.

Supported Video URLs are: YouTube, Vimeo, MP4 and GIF


Landing Page Demo

Video Players Demo


To track incoming traffic into your website you can sign up to any of the Analytics providers and paste in the code snippet they provide.

Steps overview:

  1. Sign up for an Analytics provider of your choice.
  2. Create a website tracking project in the Analytics provider dashboard.
  3. Copy the tracking Code snippet they provide to your pasteboard.
  4. Paste the tracking Code snippet in the Launchpad Analytics section under Manage Website.

Google Analytics

More information on Analytics is available here


Meta Tags are a part of HTML. They enable providing information about the website that isn’t actually presented for visitors, but is used by software that can read these tags and use their information.

  • Search engines such as Google use Meta Tags to index the website in their database.
  • Social media websites use specialized Meta Tags to enable previewing web pages within their feeds.

You can edit these tags to optimize the way your website is seen by Search Engines, Social Media websites, and more.
Better information such as an image and a clear description can increase the traffic to your website.

Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

Design + Sketch

The best collection of articles, tips, tutorials, and…

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