Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/html-sketchapp/html-sketchapp
HTML to Sketch export solution
https://github.com/html-sketchapp/html-sketchapp
design-systems html html-sketchapp sketch sketch-plugin
Last synced: about 5 hours ago
JSON representation
HTML to Sketch export solution
- Host: GitHub
- URL: https://github.com/html-sketchapp/html-sketchapp
- Owner: html-sketchapp
- License: mit
- Created: 2017-08-11T09:53:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:33:26.000Z (about 2 years ago)
- Last Synced: 2024-12-14T20:03:20.098Z (7 days ago)
- Topics: design-systems, html, html-sketchapp, sketch, sketch-plugin
- Language: JavaScript
- Homepage:
- Size: 2.23 MB
- Stars: 1,850
- Watchers: 67
- Forks: 116
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - html-sketchapp - sketchapp | 1793 | (JavaScript)
README
# html-sketchapp [](https://travis-ci.org/html-sketchapp/html-sketchapp) [](https://www.npmjs.com/package/@brainly/html-sketchapp) [](https://github.com/brainly/html-sketchapp/blob/master/LICENSE.md) [](https://www.npmjs.com/package/@brainly/html-sketchapp)
HTML to Sketch export solution.
## What it can do?
html-sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.
## Why?
The motivation behind this project was ability to easily share Front-End style guide with our Design team. Although similar project, [react-sketchapp](https://github.com/airbnb/react-sketchapp), already exists it does require you to:
- use React,
- build everything using generic components (``, ``, ``),
- and keep your styles in JS.
We were unable to quickly work around these limitations, so we created html-sketchapp.
You can learn more about this project from:
- [our wiki](https://github.com/html-sketchapp/html-sketchapp/wiki),
- and the excellent article ["Sketching in the Browser"](https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526) by @markdalgleish.
## Limitations
Comprehensive summary of what is, and what is not supported can be found [here](https://github.com/html-sketchapp/html-sketchapp/wiki/What's-supported%3F), but the TLDR is as follows:
- pseudoelements are not supported,
- some CSS properties (e.g. overflow) are not supported or not fully supported,
- not all types of images are supported (animated gifs, webp),
- resizing information is not generated,
- all fonts have to be locally installed.
The good news is that all of those are fixable and that we welcome pull requests ❤️
## How do I run it?
### Install html-sketchapp
You can get stable version of html-sketchapp from NPM.
```sh
npm i @brainly/html-sketchapp
```
### Create .asketch files
`html2asketch` is a library that you can use to create a script that extracts specific parts of your website and saves them as layers, shared text styles, document colors and symbols. Your script then can be run in a regular or a headless browser.
There is no one right way of using `html2asketch`, but you can start by checking out the ["Usage Examples"](https://github.com/html-sketchapp/html-sketchapp/wiki/Usage-Examples) section of the wiki or the two example projects that we provide:
- [html-sketchapp-example](https://github.com/html-sketchapp/html-sketchapp-example) - minimal script that takes an URL and produces a `page.asketch.json` file
- [html-sketchapp-style-guide](https://github.com/brainly/html-sketchapp-style-guide) - script that takes parts of the Brainly style-guide and exports them as Sketch symbols, shared text styles and document colors. This script produces `document.asketch.json` and `page.asketch.json`.
*If you are wondering what are, and why we need `.asketch` files, plese see our [wiki](https://github.com/html-sketchapp/html-sketchapp/wiki/How-does-it-work%3F).*
### Import .asketch files to Sketch
All `.asketch.json` files should be loaded to Sketch via the `asketch2sketch.sketchplugin` plugin.
You can download ready to use Sketch plugin from the ["Releases"](https://github.com/html-sketchapp/html-sketchapp/releases/latest) section, or build it yourself from the sources:
```
npm i # install dependencies
npm run build # build the plugin
```
## Projects using html-sketchapp
- [html-sketchapp-cli](https://github.com/seek-oss/html-sketchapp-cli) - "Quickly generate Sketch libraries from HTML documents and living style guides."
- [story2sketch](https://github.com/chrisvxd/story2sketch) - "Convert Storybook stories into Sketch symbols."
- [UIengine](https://github.com/dennisreimann/uiengine) - "Workbench for UI-driven development."
- [Alva](https://github.com/meetalva/alva) - "Alva is a radically new design tool that enables cross-functional teams to design digital products"
- [FAST-DNA](https://github.com/Microsoft/fast-dna) - "A set of tooling, resources, and components used to accelerate building Web sites and applications."
- [HTML to Sketch](https://kimdal-hyeong.github.io/html-to-sketch-electron/download-analyst/) - "You can draw a website in an open sketch window."
## Standing on the shoulders of giants :heart:
This project uses huge bits and pieces from the fantastic [react-sketchapp](https://github.com/airbnb/react-sketchapp) and wouldn't be possible without [skpm](https://github.com/skpm/skpm) and information from [Sketch-Headers](https://github.com/abynim/Sketch-Headers).