Importing from Sketch
You can import a Sketch file into Pagedraw by clicking on the
Import Sketch button in the topbar of our editor:
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.
- open the Pagedraw doc you’d previously imported the Sketch file to,
- go to
- untick the
- 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.