Get started with Protoship Codegen

Install plugin

Tutorial for new users

1. Signup

Signup with Codegen and login to the plugin

2. Preparing Sketch Files

Learn how to organize Sketch layers so they are exported correctly

3. Make the design fluid across different screen sizes

Let’s make the static Sketch design into a fluid HTML page

4. Download Code

Quick look at the final code ready for hand-over


  • Try converting one of your own designs. Start only with a single artboard and not a large design file. It can get overwhelming if you begin with a complex design and multiple artboards.

  • Watch the tutorial Make truly responsive designs to learn how to make the design work beautifully well across all device sizes.

  • Watch the tutorial Deep dive into Layer Grouping to understand how grouping works and apply that to complex designs.

  • Write to us with your questions, comments, and frustrations at We look forward to hearing from you.