Download Sketch file

Download codegen-tutorial.sketch — we will use it for the onboarding tutorial

Tutorial for new users

1. Introduction

2. Preparing Sketch Files

Learn how to group Sketch layers so they can be made responsive

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.

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