GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → markhorgan → Click Thru Prototype

markhorgan / Click Thru Prototype

Licence: gpl-3.0
Sketch plugin that creates a HTML click-through prototype of a website design

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

sketch-plugin

Projects that are alternatives of or similar to Click Thru Prototype

Chromata
A color plugin for Sketch
Stars: ✭ 15 (-95.44%)
Mutual labels:  sketch-plugin
Sketch-Plugin
Plugin to share artboards directly via WeTransfer. Share the link easily with your colleagues and friends.
Stars: ✭ 39 (-88.15%)
Mutual labels:  sketch-plugin
Google Sheets Content Sync Sketch Plugin
Sync content within a Google Sheets document, to text layers — based on their names. Edit and collaborate on your content in Google Sheets, then sync in back to your sketch files.
Stars: ✭ 277 (-15.81%)
Mutual labels:  sketch-plugin
sketch-markup-listify
Sketch plugin for convert and copy text layers into HTML lists.
Stars: ✭ 31 (-90.58%)
Mutual labels:  sketch-plugin
sketch-nudged
A Sketch plugin to easily edit your nudge distance settings.
Stars: ✭ 70 (-78.72%)
Mutual labels:  sketch-plugin
Sketch Module Web View
A sketch module for creating an complex UI with a webview
Stars: ✭ 270 (-17.93%)
Mutual labels:  sketch-plugin
sketch-plugin-boilerplate
Basic development boilerplate for Sketch plugins
Stars: ✭ 63 (-80.85%)
Mutual labels:  sketch-plugin
Sketch Lint
Check the compliance of your design guidelines within seconds
Stars: ✭ 291 (-11.55%)
Mutual labels:  sketch-plugin
sketch-find-and-replace-text
Find and replace text throughout your Sketch document
Stars: ✭ 41 (-87.54%)
Mutual labels:  sketch-plugin
Sketch Gifme Plugin
Embed gifs and videos in your Sketch files!
Stars: ✭ 274 (-16.72%)
Mutual labels:  sketch-plugin
nudge-resize-sketch-plugin
Sketch Plugin to quickly resize a layer with keyboard shortcuts
Stars: ✭ 25 (-92.4%)
Mutual labels:  sketch-plugin
sketch-search-everywhere
A Sketch plugin for searching layer and selecting it.
Stars: ✭ 53 (-83.89%)
Mutual labels:  sketch-plugin
Sketchcontentsync
Sync sketch files with google docs.
Stars: ✭ 270 (-17.93%)
Mutual labels:  sketch-plugin
sketch-plugin
Design your next Atlassian app with our component libraries and suite of Sketch tools 💎
Stars: ✭ 51 (-84.5%)
Mutual labels:  sketch-plugin
Css Buddy
A Sketch 3 plugin that allows you to use CSS on layers.
Stars: ✭ 279 (-15.2%)
Mutual labels:  sketch-plugin
sketch-constraints
📏 A plugin that integrates constraints in Sketch to lay out layers.
Stars: ✭ 1,294 (+293.31%)
Mutual labels:  sketch-plugin
Sketch-StickyGrid
Sketch plugin to make paths be snapped to grid.
Stars: ✭ 62 (-81.16%)
Mutual labels:  sketch-plugin
Sketch Artboardtricks
A variety of artboard-related utilities for Sketch, primarily rearranging them into a grid, numbering them, etc.
Stars: ✭ 316 (-3.95%)
Mutual labels:  sketch-plugin
Keys For Sketch
Advanced shortcut manager for Sketch app.
Stars: ✭ 281 (-14.59%)
Mutual labels:  sketch-plugin
Sketch Connection Flow Arrows
Plugin for generating easy to use connection flow arrows in Sketch
Stars: ✭ 275 (-16.41%)
Mutual labels:  sketch-plugin
View All Similar Projects ➔

Click-Thru Prototype

A Sketch plugin that creates a HTML click-through prototype of a website design so you can give your clients an idea what the website will look like. Here's an example of a website generated by the plugin. Change the width of the browser to see the different responsive designs.

Screencast

Installation

To install, download the zip file and double-click on Click-Thru-Prototype.sketchplugin. The commands will show up under Plugins > Click-Thru Prototype. To see it in action, open demo.sketch and then select Plugins > Click-Thru Prototype > Export to HTML.

Usage

You can create links between artboards, add external links or show a JavaScript dialog. When you're finished adding these you can generate a HTML website of the current page by selecting Export to HTML. The generated files can then be uploaded to a server so you can show your client.

Responsive Design

The plugin can handle responsive design, you just need to start your artboards with the same name e.g. index, index tablet, index mobile. When you change the width of your browser it will show a different artboard in the exported website. You can turn this feature off by unchecking Responsive artboards in Settings. You may need to update your artboard links after turning this setting on or off.

Responsive artboards

Mobile Menu

On mobile you will want to show a mobile menu rather than the normal horizontal menu. To do this you need to select which layer is the button that shows the menu by selecting Set Mobile Menu Button, and which layer is the mobile menu by selecting Set Mobile Menu.

Mobile menu

Retina Images

By default it will show 2x images for high pixel density screens. To turn this off uncheck Export retina images in Settings and re-export the page.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].