Skip to main content

Using iOS2Sketch

Use iOS2Sketch as follows:

  1. First make sure that both the target app and Sketch are running.

  2. Confirm that the iOS2Sketch iOS framework and the iOS2Sketch plugin are connected.

    If a dark gray floating button appears on the app, they are already connected (if you are running the app on a real device, you need to use an Apple data cable to connect the device to your Mac computer).

  3. Clicking the floating button will immediately capture the current screen of the app and display it in Sketch. Next, you can view the Artboard corresponding to the screen in Sketch, and you can also modify it.

"Capture Navigation Information" feature (Beta)​

Version 1.1.0 added the "Capture Navigation Information" feature. To use this function, you need to click the iOS2Sketch->Settings menu item under the Plugins menu of Sketch, and then check "Capture Navigation Info" in the pop-up Settings window.

How the "Capture Navigation Information" feature works​

When screen navigation occurs in the iOS app, the iOS2Sketch iOS Framework can record this information and send it to the iOS2Sketch plugin. Based on this information, the plugin uses Sketch's prototype function to add links to Sketch Artboard(s). In this way, the navigation information between app screens is mapped to the prototype interaction information between Sketch Artboards.

Currently this feature supports the following standard iOS navigation actions: Push new screen, Pop screen, Present new screen, Dismiss screen, Switch TabBar's screens , etc.

The following GIFs can help you understand the function.

  • Push and Pop screen push-and-pop

  • Present and Dismiss screen present-and-dismiss

  • Switch TabBar's screens tabBar-switch-page

How to use it​

  • For Push, Present new screen and Switch TabBar's screens

    First capture a screen (assuming it is named Artboard1 in Sketch), then trigger a screen navigation on the app (such as clicking a button to push a new screen), and then capture the new screen (assuming it is named Artboard2 in Sketch), At this time, a prototype link is generated in Sketch, which points to Artboard2 from the component (such as a button) that triggers the navigation action in Artboard1.

  • For Pop, Dismiss screens

    Pop or Dismiss a screen on the app (the screen must have been captured in Sketch in advance, assuming the name is Artboard1 in Sketch), then a prototype link will be generated in Sketch, which points to the previous Artboard from the component that triggers the navigation action.

Notice​

This feature is still in beta stage and may not work on some apps.