ui app html,GitHub - ui-code-automation-lab/html-sketchapp: HTML to Sketch export solution

html-sketchapp 68747470733a2f2f7472617669732d63692e6f72672f68746d6c2d736b657463686170702f68746d6c2d736b657463686170702e7376673f6272616e63683d6d617374657268747470733a2f2f62616467656e2e6e6f772e73682f6e706d2f762f40627261696e6c792f68746d6c2d736b6574636861707068747470733a2f2f62616467656e2e6e6f772e73682f62616467652f6c6963656e73652f4d49542f626c756568747470733a2f2f62616467656e2e6e6f772e73682f6e706d2f646d2f40627261696e6c792f68746d6c2d736b65746368617070

HTML to Sketch export solution.

7834bf67d055dec204daafcf08e31190.png

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.

8abf9e78fe0a28843ace2f52d9374384.png

Why?

The motivation behind this project was ability to easily share Front-End style guide with our Design team. Although similar project, 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:

and the excellent article "Sketching in the Browser" by @markdalgleish.

Limitations

Comprehensive summary of what is, and what is not supported can be found here, 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.

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" section of the wiki or the two example projects that we provide:

html-sketchapp-example - minimal script that takes an URL and produces a page.asketch.json file

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.

Import .asketch files to Sketch

All .asketch.json files should be loaded to Sketch via the asketch2sketch.sketchplugin plugin.

e2f592f842d35af081b1e3f2eb71e4ca.png

You can download ready to use Sketch plugin from the "Releases" 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 - "Quickly generate Sketch libraries from HTML documents and living style guides."

story2sketch - "Convert Storybook stories into Sketch symbols."

UIengine - "Workbench for UI-driven development."

Alva - "Alva is a radically new design tool that enables cross-functional teams to design digital products"

FAST-DNA - "A set of tooling, resources, and components used to accelerate building Web sites and applications."

HTML to Sketch - "You can draw a website in an open sketch window."

Standing on the shoulders of giants ❤️

This project uses huge bits and pieces from the fantastic react-sketchapp and wouldn't be possible without skpm and information from Sketch-Headers.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值