Export to Sketch From Archetype

24/04/20: Updated for Sketch v64

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 the Archetype-Sketch plugin, and double click to install, just like any normal Sketch plugin.

Plugin for Sketch v64 and above
Plugin for pre Sketch v64

Step 2:

Return to Archetype, and copy the generated code you see having clicked the 'Export to Sketch' button. (You can use the 'Copy code to clipboard' button or copy all the code manually).

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!