How to Convert HTML to Sketch
If you have an old website in need of a design refresh, your designers might be looking for a tool to convert HTML to Sketch before they can improve on the existing design. The simple reason is that HTML is merely the code behind a design; it cannot be used to modify the design in any significant way. On the other hand, when you convert a website to the Sketch file format, it can be imported into the Sketch application and the design can be changed in any way you want. There are various methods to convert HTML to Sketch, and the most popular and easy way is to use an HTML to Sketch plugin. The next section shows you how to convert a website to a Sketch file using an HTML to Sketch plugin.
The Process to Convert HTML to Sketch File
1. Get the HTML code for the website
The first step obviously is to have your HTML code ready. You can do this by copying the code from the Inspector section of the developer tools in Chrome. If you are on Linux, you can simply type in "wget (website link)" without the quotes to download the entire website, and then access the HTML code that way. Whichever method you use, you will need to locate the HTML file for the site before proceeding to the next step.
2. Install Node.js and NPM
These two independent components are required in order to use the html-sketchapp open-source application, which is essentially a command-line interface that allows you to convert HTML nodes into Sketch components. To get node.js and npm installed on Mac, simply download the macOS installer. When you download node.js, npm will automatically be installed along with it. You are now ready to install and run the html-sketchapp-cli program to convert HTML to a Sketch file.
3. Install the html-sketchapp-cli plugin
Next, install the CLI locally, since you already have your HTML file stored on your machine. To do this, run the following command in the command line (Terminal):
$ npm install --save-dev html-sketchapp-cli
Once this is done, you can run the program installation and the program itself:
$ npm run html-sketchapp-install
$ npm run html-sketchapp
You will also need to annotate your Sketch symbols before they are converted from HTML so that they can be named properly after being extracted. For this, you can use the following format to define the attribute and create nested items within the converted Sketch file.
In addition, you will need to annotate all nested symbols and text using the appropriate attributes. For example, text elements will need the data-sketch-text attribute, while nested symbols will need the data-sketch-symbol-instance attribute.
4. Convert HTML to Sketch File
$ html-sketchapp --file sketch.html --out-dir dist
The above is the final command to convert the HTML file (assumed to be sketch.html but you can change it to the actual file name before running the command) into a Sketch file containing all the components from the HTML file. Once you have this output file, you can import it to Sketch and start working on your design.
The Best Alternative to Sketch
While Sketch is an amazing app for designers, it has a lot of restrictions that make it prohibitive in terms of usage on a range of operating systems like Windows and Linux. Instead, you can consider using a cloud-based utility such as Wondershare Mockitt, which is essentially OS-independent and will let you work on any platform using a modern browser. In short, it simplifies the design process and allows you to create powerful and interactive hi-fi prototypes. Let's look at some of the key features of this innovative online UI/UX design and prototyping utility.
- Collaboration and Access - Since Mockitt is completely online, you can access it from anywhere as long as you are one of the authorized stakeholders in a particular design project.
- Extensive Assets - Gain access to a large asset library containing hundreds of design components that are customizable and shareable with other team members. The huge repository of widgets, symbols, icons, etc. can also be assigned Master status to enable global editing of all instances.
- Interactive Components - All your widgets can be linked to their respective target page states to show gesture-triggered transitions and other effects that you can choose from the built-in library. Breathe life into your prototypes by making them fully interactive.
- Drag-and-Drop Design Interface - The flexible UI in Wondershare Mockitt gives you the freedom to drag your components and drop them on the screen, greatly increasing your productivity. You also have a double-click option and a click-and-draw option, giving you greater flexibility.
- Real-time Review and Commenting - The online nature of the platform allows collaborators and stakeholders to view and comment on design projects in a real-time environment, thereby speeding up the normally prolonged review process.
- Code-ready - HTML and style code is automatically generated for all components and kept ready for the developer to download. The developer can also come in and do code inspection ahead of downloading the HTML package along with style code for web, iOS, and Android. It makes the developer handoff process a very simple one.
- Preview and Sharing - Preview your designs on any device by just logging in to your Wondershare Mockitt account. Generate a URL or a QR code for secure and permission-based sharing.
Wondershare Mockitt is not only a robust tool for design and prototyping for UI/UX but the platform keeps adding additional functionality. Since there's nothing for you to download, all you need to do is refresh your browser and get access to a rich and growing featurelist. One of the upcoming additions to the feature set is the Sketch plugin, which will allow you to import your entire Sketch canvas or multi-slice files with just one click. Once you convert a website to Sketch, you will be able to import these into Wondershare Mockitt and start working on your design in a seamless manner.
