Importing from Sketch

You can import a Sketch file into Pagedraw by clicking on the Import Sketch button in the topbar of our editor:

When you import a mockup from Sketch, it will be just a static drawing. You will have to tell Pagedraw which aspects of that drawing are dynamic and how everything should resize.

Make sure that there are no overlapping blocks in your drawing. Overlapping blocks may impair code generation, and must always be avoided.

Pick only the artboards you want to import

After you import, select all the artboards you want to keep and use the REMOVE ALL BUT SELECTED button in the sidebar to get rid of all the extra ones.

Rescale the doc

It’s easy to Sketch at 2x, 3x, 1.3x, or something else entirely. Pagedrawn code uses the exact pixel sizing from the design, so it’s important to scale everything to 1x. If the imported Sketch file was accidentally designed at not-1x, you can use the RESCALE DOC feature in the doc sidebar to scale it back to 1x. You can always pinch to zoom in in the Pagedraw editor to work at 2x or more.

Bring in future incremental updates from the same Sketch file

You can keep working on your Sketch file after importing it into Pagedraw. You can merge those changes in later while keeping the work you’ve done in our editor. This way you can use Pagedraw to wire up data bindings and specify layout constraints while still using Sketch to do all your visual design.

Just

  1. open the Pagedraw doc you’d previously imported the Sketch file to,
  2. go to Import Sketch and
  3. untick the Overwrite checkbox,
  4. then upload the new version of the Sketch file.

Correctness not guaranteed

Pagedraw is designed so that generated code will look and work exactly the same as its source design in our editor. We do not guarantee that Sketch files will look or work exactly the same in our editor. We think of the Sketch importer as more of a starting point for working on a design in Pagedraw.