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
In spite of many competing platforms like — Adobe XD, Figma, Invision Studio, Framer X — to name a few, and Sketch being Mac OS only, it still has one of the largest and oldest userbase, with a lot of companies and its designers already invested in it. It makes a good platform to target in the beginning. Also the developer ecosystem for Sketch is quite mature.
Why use Genus
There are other plugins available offering similar functionality which are paid and/or non-open source. Why still use Genus might be a question one could have. Genus, being open source gives an opportunity to customize the HTML and CSS output which could be useful to pair it with existing design system libraries, low code generators, etc which might be used in your projects. Also, it being no longer a black box, one can know its inner workings. Last but not the least, its free!
How to install Genus
- Make sure you have Sketch installed in your Mac OS machine.
- Click on Genus Github zip download to get the compressed repo.
- Unzip the downloaded file.
- Double click on Genus.sketchplugin to install the plugin.
Do checkout the project readme for details.
How to use Genus
- Open your design made in Sketch (Alternatively, we have provided a test Sketch file in the zip file under testing>sketch>genus-test-cases.sketch).
- 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
Sketch at the core are nested layers and hence html generation requires recursion to go over the layers and apply the styles, layer by layer. In fact You can map the div classes to the layer names. There is a unique number appended to div classes to make them unique but you still can use partial names to search the sketch for a particular layer/element. As a good practice, naming each layer logically can greatly help in inspecting the generated HTML and trace back problems. Also, grouping logical entities can help you create nested divs.
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.
