Introduction

What Is It?

• Prototype enables designers to create and publish websites directly from Sketch, no coding needed
• It’s perfect for Landing Pages and Marketing Websites

Prototype is great for:

• Freelance designers
• Designers in start-up teams
• Web Design agencies

Prototype is a great tool for:

• High-Fidelity Prototypes (Learn how you can create one)
• Landing pages
• Marketing websites
• Static websites
• Websites based solely on HTML and CSS

Prototype does not currently support:

• Dynamic websites with Javascript

Main Features

Prototype has 3 main sections:

Flow

• Links - In Prototype, each artboard is a webpage. You can set up links between artboards, to external websites, or overlay an artboard over another
• Breakpoints - A way to make your design look great in Mobile, Tablets, and Desktops

Smart Layers

• Forms - You can set up forms and enable visitors of the website to submit information such as their contact information
• Embed Code - Embed HTML snippets that enhance your website funcationality
• Fixed Position - Fixes components in one place while the rest of the content moves behind them on scrolling
• Hover Effect - Animations that happen when a visitor hovers their mouse over a specific element
• Entrance Animation - Animation that is activated on scroll
• Videos - You can embed a video player in the website. YouTube, Vimeo, MP4 or GIFs are all supported

Interaction/Animation

• Interaction - Add Click, Hover, or Timer actions to trigger state transitions
  • Animation - States transition automatically without a trigger

How Does It Work?

Designers can take their design to production in a matter of seconds.

Here are the steps for creating a website from a Sketch document:

1. Design your website in Sketch where each web page is represented by an artboard
2. Apply responsive design by using Layout
3. Optionally, add Links, Forms and Videos
4. Create a preview website to verify that the website looks as desired
5. Publish!

Example

See some of the feature listed above in action in a live website.

Try it yourself in Sketch!

1. Download the edited Sketch sample file Download
2. Click the Preview in Browser button in the Anima panel
3. Explore!