Design + Sketch
Published in

Design + Sketch

Introducing Protoship’s Teleport: convert websites into Sketch documents

Protoship converts Sketch documents into HTML and CSS with SASS mixins, Bootstrap grids, and reusable React components. With this, designers no longer need to spec the design for the hand-off, and developers can create beautiful HTML straight from the mockup without any hand-coding.

It also has another feature that works in the reverse, and is mostly for designers — convert existing websites back into Sketch. We call this feature Teleport. With this tool, designers can easily keep up with an evolving website without having to manually recreate the changes developers make to the website. It also helps you use any existing website as an inspiration to build something new and beautiful.

We demo the Teleport functionality in this video. First we’ll convert the official Sketch website into a Sketch document and show how it looks. We’ll then convert a text-centric page and build something great out of it.

We hope you enjoy the video and would love to hear what you think. Please sign up for the early beta here. We hope to release in a few months and would love to have you onboard.

UPDATE: Teleport is now live! Download it from https://protoship.io/tools/teleport.html

--

--

--

A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

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
Jasim A Basheer

Jasim A Basheer

Turn your Sketch designs into production-ready HTML & CSS with https://protoship.io

More from Medium

Figma to Production-Ready Javascript component with AWS Amplify Studio — Part 1

How to use System fonts in Figma, Webflow and Code?

Using Figma interactive components to create functional buttons

Article header which reads “Making Interactive Buttons: A Figma Tutorial”

10 Figma Plugins to discover

featured image of 10 figma plugins