Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 74 lines (52 sloc) 3.29 KB

title: Introduction type: prototype order: 1

Prototype Tab

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

Expanded Prototype Panel

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. Download Sample File

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!