跳到主要内容

介绍

iOS2Sketch是一个免费的code-to-design工具，可以用来从运行中的iOS App生成Sketch文档。具体的说是从App页面生成与之对应的Sketch Artboard，一个Artboard对应App的一页(准确地说是一屏)。（它与design-to-code工具Sketch-UICode(即将推出)一起构成了一个双向工具：既可以从设计稿生成代码，也可以从代码生成设计稿）

它可以捕获iOS App 页面的运行时信息, 包括组件的层级关系、背景颜色、圆角、边框、阴影、文字的字体等等信息，并用UI设计工具Sketch的图层显示出来。

不少iOS开发者都了解Reveal、Lookin或者Xcode 自带的 UI Inspector这类工具，这类工具能捕获iOS App 页面的运行时信息，并在一个专用的客户端里显示出来。

iOS2Sketch的工作原理与它们类似，不同的是：

  • 它并不是用一个专用的客户端来显示UI信息，而是把Sketch当作客户端来显示这些信息。
  • 前面提到的那些工具在显示UI的时候，是对页面里的每一个组件进行截图然后在客户端里显示出来。而iOS2Sketch是除了对图像(UIImageView）和一些特殊组件进行截图之外，大部分iOS UI组件都是直接用Sketch自身的各种图层显示出来。 比如iOS的文本组件（UILabel）就是用Sketch的文本图层(Text Layer)来显示的，组件的背景是用Rectangle Layer显示的。

这就意味着所生成的文档是可编辑的。用户既可以查看这些页面的UI信息，也可以在其基础上修改这些图层。

另外，你可能听说过Airbnb的react-sketchapp，iOS2Sketch在功能上与之类似，只不过react-sketchapp是从React生成Sketch图层，iOS2Sketch是从iOS App生成Sketch图层。

你可以通过以下动图来直观地了解iOS2Sketch的功能：

  • 捕获TLChat的两个页面 catpture-tlchat

  • 捕获DuckDuckGo的两个页面 capture-duckduckgo

  • 查看与编辑所捕获的Artboard inspect-and-edit

更详细地演示请看演示视频

有什么实际用途​

对设计师：

  1. 已有iOS App，但是：没有设计稿/设计稿丢失了/设计稿相对于app来说过时了
  2. 将工程师开发完的页面的与原始设计进行对比
  3. 使用另一个App作为自己设计的灵感，而无需从头开始构建所有内容

对iOS开发工程师:

  1. 可以用来查看iOS App UI界面的结构，就像在Reveal、Lookin、Xcode中那样。并且在这方面具有一些优势，包括：
  • 可以很方便地同时查看多个UI页面。比如：查看同一个iOS组件在不同iOS版本下的结构，对它们进行对比；
  • 在捕获页面时，由于iOS2Sketch是除了对图像(UIImageView）和一些特殊组件进行截图之外，大部分iOS UI组件都是直接用Sketch自身的各种图层显示出来，所以iOS2Sketch捕获页面的速度通常很快（截图与传送截图是比较耗时的）。
  1. 与Sketch-UICode(即将推出)配合使用。

组成部分​

iOS2Sketch由两部分组成：

  1. iOS2Sketch 插件
  2. iOS2Sketch iOS Framework

大致工作原理​

运行中的iOS App与Sketch本来是互不相关的。彼此之间并没有什么可相互联系的手段。如下图： how-it-works-1

要想让它们之间可以相互联系，就需要把能彼此通讯的程序代码分别放置到iOS App中和Sketch中，这就是上面提到的iOS2Sketch iOS Framework与iOS2Sketch插件。如下图： how-it-works-2

iOS2Sketch iOS Framework会在App上显示一个浮动按钮。点击该浮动按钮，iOS2Sketch iOS Framework就会把App 页面捕捉下来并传送到iOS2Sketch 插件，iOS2Sketch 插件随即把该页面显示到Sketch中。

接下来请点击下面的"集成与安装"，来看一下如何把iOS2Sketch iOS Framework集成到你的iOS项目中，以及如何安装iOS2Sketch插件。