Importing from Sketch
You can import a Sketch file into Pagedraw by clicking the
Import Sketch button in the dashboard. It will open the imported doc in the Pagedraw editor and save it to your project.
Make sure that there are no overlapping blocks in your drawing. Overlapping blocks may impair code generation, and should 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 rest.
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 the doc sidebar,
- click on the
UPDATE FROM SKETCHbutton,
- and upload the new version of the Sketch file.
Note this button will only show up on docs which started as Sketch imports.
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.
Keep one single Pagedraw doc called master where you have all of your real Pagedraw work, which goes to production.
Import Sketch/Figma files into separate Pagedraw docs basically as readonly docs. Then choose an artboard, copy paste it from the Sketch/Figma imported doc -> master. Clean it up and wire data in Pagedraw. Repeat with the next artboard.
We also suggest doing this in a bottom up fashion where you start with the smaller components which build up towards the larger ones.