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 → amin-nas → Sketch-to-Clickthrough-HTML

amin-nas / Sketch-to-Clickthrough-HTML

Licence: other
Sketch plugin for creating a click-through HTML prototype

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

htmlsketchsketch-plugin

Projects that are alternatives of or similar to Sketch-to-Clickthrough-HTML

typex
Typography web export (css, sass, html, json, ..) plugin for Sketch
Stars: ✭ 42 (-44%)
Mutual labels:  sketch, sketch-plugin
Sketch-Highlighter
Sketch plugin that generates highlights for selected text layers
Stars: ✭ 41 (-45.33%)
Mutual labels:  sketch, sketch-plugin
sketch-test-inspector
Helper utils and plugin for running unit tests on sketch plugins
Stars: ✭ 18 (-76%)
Mutual labels:  sketch, sketch-plugin
RemoveAllGuides
Plugin for Sketch App.
Stars: ✭ 21 (-72%)
Mutual labels:  sketch, sketch-plugin
Sketch-Resize-Commands
A Sketch plugin that lets you resize and reposition objects by using simple arithmetic commands, like `b+20,lr+20`. Multiple objects are supported.
Stars: ✭ 32 (-57.33%)
Mutual labels:  sketch, sketch-plugin
Pdf Export Sketch Plugin
Sketch plugin for PDF exporting
Stars: ✭ 231 (+208%)
Mutual labels:  sketch, sketch-plugin
library-styles-sync
sync shared styles from a Sketch Library to the current document
Stars: ✭ 70 (-6.67%)
Mutual labels:  sketch, sketch-plugin
Fluid For Sketch
[Sketch Plugin] Sketch-flavored Auto Layout-like Constraints
Stars: ✭ 2,408 (+3110.67%)
Mutual labels:  sketch, sketch-plugin
sketch-flip-size
🔁 FlipSize is a small Sketch plugin to flip the size of a shape, layer or artboard
Stars: ✭ 16 (-78.67%)
Mutual labels:  sketch, sketch-plugin
uiLogos-sketch-plugin
Sketch plugin to Insert professionally designed dummy logos of companies and 190+ country flag into SketchApp
Stars: ✭ 26 (-65.33%)
Mutual labels:  sketch, sketch-plugin
sketch-pages-to-folders
Sketch plugin that exports all the artboards of a Sketch file into folders, which are based on the pages of the Sketch file.
Stars: ✭ 56 (-25.33%)
Mutual labels:  sketch, sketch-plugin
Sketch-Navigator
"Sketch Navigator lets you quickly jump to any specific artboard without having to scan the all too easily cluttered Layers List in the app’s left-hand pane." - Khoi Vinh
Stars: ✭ 160 (+113.33%)
Mutual labels:  sketch, sketch-plugin
Git Sketch Plugin
💎 A Git client generating pretty diffs built right into Sketch.
Stars: ✭ 2,459 (+3178.67%)
Mutual labels:  sketch, sketch-plugin
React Sketchapp
render React components to Sketch ⚛️💎
Stars: ✭ 14,861 (+19714.67%)
Mutual labels:  sketch, sketch-plugin
Sketchcrapp
SketchCrapp - Crack your Sketch.app in seconds :) Supports MacOS Big Sur.
Stars: ✭ 218 (+190.67%)
Mutual labels:  sketch, sketch-plugin
sketch-crowdin
Connect your Sketch and Crowdin projects together
Stars: ✭ 35 (-53.33%)
Mutual labels:  sketch, sketch-plugin
Android res export
Export Android resources in Sketch, bitmap assets, nine-patch, vector drawable, app icon, shape XML..
Stars: ✭ 204 (+172%)
Mutual labels:  sketch, sketch-plugin
Plugin Requests
A collection of plugins requested to our Twitter account
Stars: ✭ 211 (+181.33%)
Mutual labels:  sketch, sketch-plugin
library-replacer-sketchplugin
A Sketch plugin that allows you to replace a library in a Sketch file
Stars: ✭ 19 (-74.67%)
Mutual labels:  sketch, sketch-plugin
sketchplugin-swift-color
A Sketch Plugin for generating UIColor and NSColor initializer Swift code from fill color of selected layers.
Stars: ✭ 58 (-22.67%)
Mutual labels:  sketch, sketch-plugin
View All Similar Projects ➔

Tested with Sketch version 42

Sketch to Click-through HTML

Create HTML pages with images of artboards, and add hotspots on top.

Installation
  1. Download the plugin.
  2. Double click "Sketch to HTML.sketchplugin" to install it.

How it works

Link a layer to an artboard

link layer

Fix layers

You can also fix layers to one of the four positions. If you got a fixed nav, this can be handy. link layer

Export to HTML

link layer

Full Command List

Command Description
Link selected layer to... Link a layer to an artboard in the current page
Fix selected layer to... Fix a layer to one of the four positions: top, right, bottom, left
Export to HTML Export current page artboards into html files, in a folder named after the Sketch file
Clear selected layer's HTML Clear the HTML options set for the selected layer
Clear current page Clear all the HTML options set in the current page
Show HTML config for selected artboard Get an alert message listing HTML options set for current artboard

Limitations

  1. Only the artboards of the current page will be exported.
  2. A layer you wish to link or fix has to be a top-level layer, meaning it cannot be nested inside another layer.
  3. Make sure each artboard in the page has a unique name.

What's next?

  • Remove limitation #1 - perhaps user selects which pages
  • Remove limitation #2 - Link or fix nested layers
  • Open folder after export

Feedback & pull requests

All are welcome :)

License

MIT

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].