A material design template for Pencil app
JavaScript CSS XSLT HTML Shell
Switch branches/tags
Nothing to show
Clone or download
Latest commit 698a600 May 17, 2016
Failed to load latest commit information.
build Update Aug 7, 2015
mobile Update Aug 7, 2015
README.md Update README.md May 17, 2016
build.sh Updated template and added building script Jul 20, 2015


Pencil Material Design Template

A material design template for Pencil, the open source prototyping tool for Windows, Mac, Linux and Firefox (HTML export template)



  • Beautiful Material Design
  • Left and right buttons to navigate
  • Responsive
  • Click the prototype to see the hotspots
  • Three options: mobile, tablet and desktop (at the moment only mobile has been developed)
  • Mobile web support: allows you to open it on a mobile device in fullscreen, just like if you were using a real app.
  • Keyboard arrow keys support


  1. In Pencil, go to Tools > Manage Export Template...
  2. Click Install New Template...
  3. Select the template zip and click Open

Make awesome Material Design prototypes

Use these collections from Nathaniel Watson:


Example Click areas


  • Add tablet and desktop editions
  • Add custom size edition
  • Solve a few bugs
  • Use Polymer paper elements
  • Web component version
  • Support for experience customization based on values indicated on each page notes
  • Support global template UI customization