A Sketch plugin to generate prototype web pages.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 216145a Nov 21, 2017
Permalink
Failed to load latest commit information.
Contents/Resources/runner add bundle script Nov 3, 2017
dist/blade.sketchplugin/Contents 0.0.4 Nov 20, 2017
examples add examples Nov 3, 2017
scripts add video demo Nov 20, 2017
src/plugin add video demo Nov 20, 2017
.gitignore add dist Nov 3, 2017
LICENSE refactory project start Oct 26, 2017
README.md update readme Nov 21, 2017
TODO.md add examples Nov 3, 2017
package-lock.json add bundle script Nov 3, 2017
package.json add video demo Nov 20, 2017
yarn.lock fix bundle Nov 4, 2017

README.md

Blade

Version Join the chat at https://gitter.im/Sketch-Plugin-Blade/Lobby

Blade is a sketch plugin designed to generate prototype web pages. Add simple annotation to your sketch layers and blade will get the magic done. Click image below to see demo video.

Blade New Demo

Installation

  • Copy blade.sketchplugin in dist folder to sketch plugin folder.
  • Create a artboard to group your layers.
  • Run Blade -> Export Current Artboard on plugin menu.

You can check the example file and its output in the example folder.

Annotation Usage

Blade use layer name annotation to convert layer to certain html component.

A

Add link to any kind of layer.

[A?url=http://www.github.com/sskyy/blade]xxx

Case

Switch between different versions of any layer. Press Command key to see selectors.

[Case]
  [#caseName=red]xxx
  [#caseName=blue]xxx

Group

Default type of group layer. Can be centered to its container.

[Group?center=true]

Ignore

Layer will not show in output.

Img

Export any kind of layer as a Image.

Roadmap

Components

  • Group( as default)
  • A
  • Button
  • Case
  • Ignore
  • Img
  • Input
  • Text
  • Textarea

Script support

Support basic javascript