The Sketch app for Mac: Bohemian Coding’s one-up to Photoshop. This versatile program works wonderfully as a design space for everything from email-templates to full websites; however, it was not designed to create those final products for you, so eventually you’re faced with the conversion process.
There’s an active community around Sketch, so there are many available plug-ins to help you convert to html. Sketch boasts several HTML conversion plug-ins. The question now is, how do they work and should you bother with them?
Why might someone choose a plug-in?
Sketch plug-ins don’t exactly have a reputation for delivering high-end, professional results, but they’re not useless. For starters, most of them are free (or very cheap), so they’re handy to have around if you feel like experimenting with the Sketch to HTML process on your own. For very small-scale, simple projects, you may even be able to get the job done with a couple plug-ins, a little skill and some luck.
Which is the ideal plug-in to use?
A lot of this depends on exactly what you’re looking for. Sketch developers keep track of their favorite third-party plug-ins, including those helpful for HTML conversion, in their Sketch Plugin Directory. Here are a few of the more popular examples:
1. Launchpad
This is the probably the most extensive conversion plug-in for Sketch. It’s certainly one of the more well-known. This is the only plug-in that’s really going to go for broke on the conversion process and give you a full HTML website.
2. Slinky
This is one of several plug-ins that assist with the creation of HTML e-mail templates. Since an e-mail template is a much smaller project than a multi-page website, you’ll likely have better luck with these kinds of plug-ins. There are fewer chances for deal-breaking errors.
3. Click-Thru Prototype
This one wins for most honest title. It’s just what it sounds like: a prototype. This can be a useful tool so long as you keep your expectations in check. A prototype is your alpha build. It is not going to look like the final product. The images won’t be pixel-perfect and the overall design might seem kind of wonky or even ugly. There’s still a lot of work in between prototype and fully-functional website. Be especially cautious if you show the prototype to a client. They might be turned off by it.
Are there drawbacks to plug-ins?
Plug-ins are relatively small pieces of software made to latch onto the desired program and extend its functionality by a small increment. And the more ancillary a piece of software is, the more room exists for errors. So plenty can go wrong with a plug-in, and since they’re not an actual part of the Sketch program, it’s not Bohemian Coding’s fault if they don’t work. It’s a good idea to vet plug-ins carefully and don’t be tempted to pay significant amounts of money for any of them because again, if they don’t work or corrupt your project, you’ve really got no one to turn to.
Plug-ins are also very limited in their capabilities. They are an automated process, after all. They’ll never be able to give you the same results as a hand-done conversion. There are some things they just can’t do.
Troubleshoot
A plug-in isn’t going to be able to isolate a problem in your code, much less go in and fix it. The code they generate is the code you get, end of story.
Code intelligently
There is an art to writing code that goes beyond functionality. Think of it like this: you might be able to understand a sentence written by a five year-old, but the numerous grammatical errors will make it stand out (badly). Well website code, even for a site that works, can still be riddled with grammatical coding errors. These will lose you W3C validation and hurt your search engine ranking. So even if your plug-in delivers code that loads without crashing, there’s likely a “kindergartener’s first writing assignment” level of errors inside.
Code with versatility
A website needs to be functional on all browsers and be scaled for every screen size. Plug-ins struggle with this, as well. If your code works, it’s likely only going to be working for certain people. You might find that your site is a hot mess on mobile phones or that it crashes in Google Chrome.
At the end of the day, plug-ins are handy to have around, even if they’re not perfect. Many very talented people put in a lot of work to create them, and they can accomplish some impressive tasks. However, for larger, professional products, you are going to be better off with a manual conversion service. Having a talented programmer translate your design from Sketch file to functional HTML code will help you avoid all of the aforementioned issues that pop up with Sketch plug-ins.
