preloader

Genus - An open source Sketch plugin to export HTML

  • Monday, Jun 8, 2020
blog-image

Genus - An open source plugin to convert Sketch to HTML

Many a times, there is a need to quickly prototype web pages. It is easy for designers to flesh them out in vector based UX toolkits like Sketch, Adobe XD, Figma and the likes. And it really helps if we can directly export a design from a design tool into HTML, to accelerate the process.

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

  1. Make sure you have Sketch installed in your Mac OS machine.
  2. Click on Genus Github zip download to get the compressed repo.
  3. Unzip the downloaded file.
  4. Double click on Genus.sketchplugin to install the plugin.

How to use Genus

  1. 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).

    Open Sketch design

  2. Select the artboard(s) you want to export as HTML.

    Select artboard

  3. Go to the menu bar, Plugins>Genus>Export.

    Go to Genus export

  4. After processing, the HTML and associated assets are exported to the same location as the Sketch file. The path is also mentioned in the dialog box.

    Exported HTML at Sketch location

  5. Once exported, you can go the exported location and you will find folder(s) named after the name of your artboards(s) selected for export.

    Go to export location

  6. Open a folder and open index.html to see the result in your browser.

    Open html in browser

Tips for creating Sketch designs which can be helpful to create logical HTML output

  1. Naming each layer logically can greatly help in inspecting the generated HTML and trace back problems.
  2. Grouping logical entities can help you create nested divs.
  3. If the intent is to export groups as png, make a group exportable.

Troubleshooting exported HTML

  1. If there are any missing fonts notification which comes up on the top right of the Sketch application, please install them.
  2. In case fonts are not rendered properly in the browser, you might want to import the fonts in CSS. This can be done by:
    1. Adding Google fonts as per required like the following statement @import url('https://fonts.googleapis.com/css?family=Roboto:500,900|PT+Serif:400|Open+Sans:400'); (this is for the fonts used in genus-test-cases.sketch sample file).
    2. Copying font files to a font folder and importing them can also make it work.
  3. In some rare cases font weight rendered by html and sketch could be different. In those cases you might want to check correct font weight from sketch file and plugin into css.