Version
Built with ❤️   in NYC & TLV
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:
- Design your website in Sketch where each web page is represented by an artboard
- Apply responsive design by using Layout
- Optionally, add Links, Forms and Videos
- Create a preview website to verify that the website looks as desired
- Publish!
Example
See some of the feature listed above in action in a live website.
Try it yourself in Sketch!
- Download the edited Sketch sample file Download
- Click the Preview in Browser button in the Anima panel
- Explore!
Caught a mistake or want to contribute to the documentation?
Edit this page on Github!