HTML Sketchapp
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, 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:
- our wiki,
- and the excellent article "Sketching in the Browser" by @markdalgleish.
Related Tools
Plasmic
The fast and fun visual builder for React.
Sketch2React
A 100% free front-end solution for Sketch app that lets you build real code prototypes and even very simple websites. No plugins, only using the built-in tools.
Keyframes
Keyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.
React Sketch.app
Render React components to Sketch; tailor-made for design systems
Diez
Cross-platform design system framework, making it easy to adopt a unified design language across codebases, platforms, and teams.
Bodymovin
An After Effects extension to export animations for web.
Lottie
An iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
Catalog
Combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.
Storybook
An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Fractal
Build. Document. Integrate. Powerful component libraries & styleguides that fit the way you work.
Netlify
Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.
Flywheel
Whatever your work environment, Flywheel's powerful WordPress platform removes all the hassles of hosting, streamlines your processes, and lets you get back to doing your best work.
Hugo
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Jekyll
Transform your plain text into static websites and blogs.
Figma
Where teams design together. Design, prototype, and collaborate all in the browser.
Flow
Animate Sketch designs in seconds and export production ready code.
Laska
A visual editor to create user interfaces for React Native.
BuilderX
BuilderX is a screen design tool which codes React Native for you.
Lona
Tools for building design systems and using them to generate cross-platform code, Sketch files, and other artifacts.
Hadron
A development environment for designers and developers who work together towards the same goal.
Alva
Create living prototypes with code components.
Modulz
Like Sketch but with interactive components, box model layout and React export.
Supernova
Supernova allows you to create animations, navigations, localizations, get production code.
React Studio
Create app flows and components. Express their properties and data linkage visually. Get code immediately.
Sketch
The industry-leading tool for digital design.
Haiku
Create React and Vue components directly from your designs.
