开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

html-sketchapp-cli

Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp and Puppeteer.

Add some simple markup to your page, for example:

<div data-sketch-symbol="Button/Primary">...</div>
<div data-sketch-text="Heading">...</div>
<div data-sketch-color="#212121">...</div>

Then run the html-sketchapp command to generate JSON files in html-sketchapp's "Almost Sketch" format, ready to be imported into Sketch.

$ html-sketchapp --file sketch.html --out-dir dist/sketch

Install

Please note: html-sketchapp-cli requires Node.js and targets the latest "Active LTS" version. Older versions of Node are unsupported.

If you're in a hurry and just want to try it out, you can install html-sketchapp-cli globally, along with html-sketchapp's Sketch plugin:

$ npm install --global html-sketchapp-cli
$ html-sketchapp install

However, when using html-sketchapp-cli in the context of a project, you should install it locally instead:

$ npm install --save-dev html-sketchapp-cli

Then, add some scripts to your package.json:

{
  "scripts": {
    "html-sketchapp-install": "html-sketchapp install",
    "html-sketchapp": "html-sketchapp [...args]"
  }
}

Once these scripts have been added, the following commands can be run within your project:

$ npm run html-sketchapp-install
$ npm run html-sketchapp

Page Setup

Before using this tool, you'll need to add some hooks to your page so that everything can be selected, extracted and named correctly.

Annotate symbols with data-sketch-symbol attributes. Note that forward slashes will create nested menu items within Sketch.

<div data-sketch-symbol="Button/Primary">
  ...
</div>

Annotate nested symbols with data-sketch-symbol-instance attributes, where the attribute values reference existing symbols defined elsewhere in the document.

<div data-sketch-symbol="Icon/Reply">...</div>
<div data-sketch-symbol="Icon/Retweet">...</div>
<div data-sketch-symbol="Icon/Like">...</div>

<div data-sketch-symbol="IconRow">
  <div data-sketch-symbol-instance="Icon/Reply">...</div>
  <div data-sketch-symbol-instance="Icon/Retweet">...</div>
  <div data-sketch-symbol-instance="Icon/Like">...</div>
</div>

Annotate all text styles with data-sketch-text attributes.

<div data-sketch-text="Heading">
  ...
</div>

Annotate all colors with data-sketch-color attributes. Note that colors are unnamed in Sketch, so only the hex value needs to be provided.

<div data-sketch-color="#212121">
  ...
</div>

For a real world example, check out SEEK Style Guide's sketch exports page and the corresponding source code.

CLI Usage

Importing from a local file

If your page is self-contained, you can import from a local HTML file.

$ html-sketchapp --file sketch.html --out-dir dist

Importing from a local static web server

If your page needs to be hosted on a static web server, you can provide a local directory to serve and a root relative URL to import from.

$ html-sketchapp --serve docs --url /sketch --out-dir dist

Importing from existing web server

If your page is hosted on an existing web server, you can provide an absolute URL.

$ html-sketchapp --url http://localhost:3000 --out-dir dist

Viewport sizes and responsive design

If you provide a set of one or more named viewports, every symbol and text style will be rendered for each screen size.

$ html-sketchapp --viewports.Desktop 1024x768 --viewports.Mobile 320x568 --file sketch.html --out-dir dist

If multiple screen sizes are provided, the viewport name will be being appended to all symbol and text style names. For example, Button/Primary will be exported as Button/Primary/Desktop and Button/Primary/Mobile.

Optionally, you can set the pixel density for a given viewport by adding an @ followed by the desired scaling factor to the end of the viewport's resolution. For example, you can simulate a 1.5x and 2x display like so:

$ html-sketchapp --viewports.HigherDensity [email protected] --viewports.Retina 1024x768@2 --file sketch.html --out-dir dist

If no scaling factor is provided, a default of 1 will be used.

Config file

All options can be provided via an html-sketchapp.config.js file.

module.exports = {
  file: 'sketch.html',
  outDir: 'dist/sketch',
  viewports: {
    Desktop: '1024x768',
    Mobile: '320x568'
  },
  puppeteerArgs: '--no-sandbox --disable-setuid-sandbox',
  puppeteerExecutablePath: 'google-chrome-unstable'
};

You can provide an alternate config file path with the --config option.

$ html-sketchapp --config example.config.js

Importing into Sketch

Once this command has successfully run, the following files will be generated in the output directory.

• document.asketch.json
• page.asketch.json

These need to be imported into Sketch via html-sketchapp's corresponding Sketch plugin. To ease the install process, you can run the following command.

$ html-sketchapp install

Then, open a new Sketch document and, from the menu, select Plugins > From *Almost* Sketch to Sketch. In the file picker, select both document.asketch.json and page.asketch.json, and click Choose.

Congratulations! You should now have your symbols, text styles and document colors available within Sketch!