Importing websites to Sketch

The Choices

There are a number of approaches to this problem how do I get an existing site into sketch.

  1. Redraw the page using a imported screenshot and trace over
  2. Sketch plugins that convert the site to SVG it starts getting fairly complex however
  3. The pdf to svg method (the quickest/easiest) — which ill describe below

The PDF to SVG Method

The easiest way I have found so far, is to open the page in Safari and to File/Export as PDF and then open the PDF in Sketch — it does an ok job of rendering, however then there is a bit of tidy up job to do.

Screenshot of webpage
PDF imported into Sketch

What works well:

  • Spacing of objects
  • Sizes of objects(mostly)
  • Images
  • Text (words)
  • Shapes

What Doesn't:

  • Fonts
  • Grouping of objects
  • Naming of objects
  • Some objects are not visible but are there — see icons for Posts alerts & Trips at the top right of the screenshot
  • Shadows don't render well

Summary

Overall I think its a fairly quick way, taking less than a minute, to import a webpage into sketch and makes use of what you already have installed ie Safari with no additional plugins or software etc required.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexander Miller

Alexander Miller

1 Follower

I’m a UX Designer with a background in Business Process Analysis. A Lean Six Sigma Blackbelt, Agile coach & ScrumMaster. Im a big fan of self organising teams.