Genus — Generate HTML from sketches in seconds

Image credit— Nikin from Pixabay

Effective prototyping is the first step to success. While it is easy for designers to flesh them out in vector based UX toolkits like Sketch, Adobe XD, Figma and the likes, But it is not so easy for developers to quickly convert those designs into working code. The ability to export a design from a design tool into HTML, no doubt, tremendously helps accelerate the prototyping.

Genus, is an open source plugin made for Sketch which enables one to quickly export an HTML version of your design.

Why make a Sketch plugin

Why use Genus

How to install Genus

  1. Click on Genus Github zip download to get the compressed repo.
  2. Unzip the downloaded file.
  3. Double click on Genus.sketchplugin to install the plugin.

Do checkout the project readme for details.

How to use Genus

  1. Select the artboard(s). Yes, It allows selection of multiple artboards and each artboard will have its own folder.

3. The generated files are stored in a folder with the name of your artboard. The artboard folder location will be same as that of your sketch file. The index.html contains the generated html, css folder will contain all the generated stylesheets and images — as the name suggests, contains the image assets.

4. Change the html and css if required.

Getting under the hood

While there are many types of layers available in sketch we used only three — Groups, Text and Mask. Groups, as the name suggests, groups different elements and are exported as image. By defaults, Text will be exported as text but it is possible to export them as image. In order to export texts as image we need to mark them as “group”. Exporting texts as image is helpful when they are not required to be editable in the prototype. For e.g. in the earlier shown sketch may be you only want to build dynamic feature of search bar and hence all the information card (image + text) could be treated as image(s). As a good practice, always keep a separate group for features you want to change in the generated html so that they go in a separate div. It would be good time to pause the reading here and go through the generated html to see the ideas in action. We had to include mask because Sketch api would often return incorrect width and height for an image. For masked layers, we had to programatically extract the width and height from the exported image. You can call it a hack.

But what about other layers — Shape, Image and symbols etc.? Well, they are all exported as image. The rationale for this decision came from our real world experience building prototypes. In most of the prototypes, focus is always on few elements and rest of the elements are more like a filler to give a sense of completion. Custom building every layer type was not worth the time. Having said that you can add new layer types in the code easily. Please check the code of two functions — checkIfLayerExportedAsImage and generateHTMLForChildren.

In case you need to add new logic you need to be aware of unofficial sketch API — CocoaScript. CocoaScript is like a bridge which lets you access Apple’s Cocoa frameworks from JavaScript. This means you have a ton wonderful classes and functions you can use in addition to the standard JavaScript library.

Genus has helped us reduce prototyping effort from weeks to hours and we hope that it helps you too in your prototyping workflows. Needless to say, we are open to feedback and suggestions.

Certified Solution architect | Experience technologist | Speaker | Developer. Views and opinions are personal