Home » Tools »

HTML Sketchapp HTML Sketchapp

HTML Sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors.

Design systems Design-to-code Web development

Visit site »

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 (<View>, <Text>, <Image>),
  • 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:

Alternatives to HTML Sketchapp

Abstract

One place to version, manage, and collaborate on your Sketch files.

Design version control Developer handoff Design systems

Catalog

Combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.

Web development Design systems

Diez

Cross-platform design system framework, making it easy to adopt a unified design language across codebases, platforms, and teams.

Design systems

Figma

Where teams design together. Design, prototype, and collaborate all in the browser.

Design systems Visual design Prototyping Collaboration Developer handoff

Fractal

Build. Document. Integrate. Powerful component libraries & styleguides that fit the way you work.

Web development Design systems

React Sketch.app

Render React components to Sketch; tailor-made for design systems

Design-to-code Design systems Web development

Sketch

The industry-leading tool for digital design.

Visual design Prototyping Design systems

Storybook

An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Web development Design systems