Skip to main content

Introduction

iOS2Sketch is a free code-to-design tool. It can be used to generate Sketch documents from running iOS apps. Specifically, it can generate the corresponding Sketch Artboards from screens of the app, an Artboard corresponds to a screen in the app. (Together with Sketch-UICode(coming soon) , a design-to-code tool I developed, it forms a two-way tool: generating code from design drafts and design drafts from code.)

It can capture the runtime information of a screen at a time, including the hierarchical relationship , background color, rounded corners, borders, shadows, text fonts, etc. of components, and display it with the layers of the UI design tool Sketch.

Many iOS developers know about tools such as Reveal, Lookin or the UI Inspector in Xcode. Such tools can capture runtime information of the app and display it in a dedicated client.

iOS2Sketch works similarly, except:

  • Instead of using a dedicated client to display UI information, it uses the UI design tool Sketch as the client to display this information.
  • When the tools mentioned above display UI, they take screenshots of iOS components and display them in the client. iOS2Sketch is different from them. iOS2Sketch only takes screenshots of images and some special components, and the rest of the iOS UI components are directly displayed with various layers of Sketch itself. For example, the text component (UILabel) of iOS is displayed by the Text Layer of Sketch, and the background of the component is displayed by the Rectangle Shape Layer.

This means that the generated Sketch document is editable. Users can view the app UI information, and can also modify it.

In addition, you may have heard of Airbnb's react-sketchapp. iOS2Sketch is similar in function, except that react-sketchapp generates Sketch layers from React, and iOS2Sketch generates Sketch layers from iOS app.

You can intuitively understand the features of iOS2Sketch through the following GIFs:

  • Capture two screens of TLChat catpture-tlchat

  • Capture two screens of DuckDuckGo capture-duckduckgo

  • Inspect and edit captured Artboard inspect-and-edit

For a more detailed demo, please watch Demo Video

Why use iOS2Sketch?​

For designers:

  1. There is an iOS app but: no design draft / design draft is lost / design draft is outdated compared to the app
  2. Compare the UI developed by the engineer with your original design.
  3. Use another app as inspiration for your own designs without having to build everything from scratch.

For iOS development engineers:

  1. Can be used to inspect the hierarchy, background color, rounded corners, borders, shadows, text fonts and other UI information of iOS app like in Reveal, Lookin, Xcode. And it has some advantages over them, including:

  • It is convenient to inspect multiple app screens at the same time. For example: inspect the structure of the same iOS component under different iOS versions and compare them.

  • When capturing a screen, since iOS2Sketch only takes screenshots of images and some special components, and the rest of the iOS UI components are directly displayed with various layers of Sketch itself, so iOS2Sketch usually captures screens very quickly (taking screenshots and sending screenshots is time-consuming).

  1. Works in conjunction with Sketch-UICode(coming soon).

Components of iOS2Sketch​

iOS2Sketch consists of two parts:

  1. iOS2Sketch plugin for Sketch Mac app
  2. iOS2Sketch iOS framework

How It Works​

The running iOS app and Sketch are originally unrelated to each other and cannot communicate with each other. As shown below: how-it-works-1

To make them communicate with each other, you need to put the program code that can communicate with each other into iOS app and Sketch respectively, which is the iOS2Sketch iOS framework and iOS2Sketch plugin mentioned above. As shown below: how-it-works-2

iOS2Sketch iOS Framework will display a floating button on the app. Click the floating button, iOS2Sketch iOS Framework will capture the app's current screen and transfer it to the iOS2Sketch plugin, and the iOS2Sketch plugin will display the screen in Sketch.

Next, please click the "Integration and installation" button below to see how to integrate the iOS2Sketch iOS framework into your iOS project, and how to install the iOS2Sketch plugin.