Export to Sketch From Archetype

30/01/19: Updated for Sketch v52.6

NB: If you haven't got the fonts you've selected installed locally before you export, they won't appear in the Sketch doc that's generated. (You can download and install Google fonts you've picked straight from Archetype if required).

Step 1:

Download this Archetype-Sketch plugin, and double click to install, just like any normal Sketch plugin.

Step 2:

Return to Archetype, click the 'Export to Sketch' button and copy the generated code.

Step 3:

In Sketch, create a new Document. In the top toolbar go to 'Plugins' and click on the 'Archetype to Sketch' plugin from the drop down list. Simply paste the copied code into the pop up box and hit 'Import Styles'. Voila! Your Archetype styles will then open in Sketch.

The new doc contains every desktop, mobile and advanced typography style you created in Archetype, one on top of the other arranged in the following order:

Desktop styles > Mobile styles > Advanced individual styles (if any were applied)

Optional: File Tidy-Up

A little optional housekeeping and your Sketch file will be good to go. To tidy up the layer list simply select the top most folder named 'View' under 'Page 1' of the file and continue ungrouping by pressing cmd+shift+G until you are left only with your text layers (see below).

Finally you can remove any duplicated text styles which Sketch will have automatically created using the 'organise styles' menu (see below).

That's it! All done. Please do let us know if you have any suggestions for improvements or new features so we can continue to make Archetype and more useful. Until next time, happy designing.

Thanks to the guys at 'react-sketchapp' who were super helpful in helping us bridge the gap between Archetype and Sketch!