怎樣從Sketch向Xcode自動導出圖形資源

一個實驗性的小方法，不使用Sketch和Xcode的同學其實無需浪費時間了。

Bohemian Coding(Sketch的制作團隊)發布過一款名為SketchTool的命令行工具，用來自動導出.sketch文件當中的界面和切片。

越來越多的設計師和開發者開始在iOS開發流程當中使用起Sketch。通常，整個流程中會包含很多重復性的工作，例如在Sketch當中修改設計方案，重新導出，然后將更新后的圖形資源移入Xcode的Asset Catalogs當中，并再次運行Xcode項目以查看實際效果。

而通過SketchTool配合Xcode，這些都可以自動化完成。

下面是完成這套圖形資源更新流程的演示視頻：

你也可以下載視頻當中涉及到的項目文件。

接下來我們對視頻當中演示的幾個關鍵環節進行說明。

安裝SketchTool

你可以在Bohemian Coding的網站下載最新版本的SketchTool，然后將下載文件中的sketchtool和 sketchtool resources.bundle放進/user/bin路徑中。

或者，你也可以通過在OS X的“終端”當中粘貼以下代碼來安裝SketchTool：

curl -O http://sketchtool.bohemiancoding.com/sketchtool-latest.zip;\
unzip sketchtool-latest.zip;\
sudo cp sketchtool/sketchtool /usr/bin/sketchtool;\
sudo cp -R sketchtool/sketchtool\ resources.bundle/ /usr/bin/sketchtool\ resources.bundle/;\
rm -r sketchtool/;\
rm sketchtool-latest.zip;

準備Sketch文件

組織項目文件的方式因人而異，不過我個人傾向于將所有的Sketch文件放在Xcode的項目根路徑當中，為它們建立一個名為“Graphics Resources”的文件夾當中，正像各位在上面的演示視頻當中看到的那樣。

在Sketch文件中，使用artboard和切片來組織需要導出到Xcode當中的圖形素材。例如，在我的AppIcon.sketch里，我會將每種規格的圖標放置在各自的artboard當中，和Sketch 3自帶的iOS App Icon模板的方式差不多，我只做了簡單的修改。

創建腳本

在Xcode中，創建新的Run Script Phase，并確保其在列表中位于“Copy Bundle Resources”之前。

在我的項目文件中，Run Script的代碼如下(你也可以在下載到的文件中看到)：

# AppIcon
sketchtool export artboards "$PROJECT_DIR"/"Graphics Resources/AppIcon.sketch" --output="$PROJECT_DIR"/"$PROJECT_NAME"/Images.xcassets/AppIcon.appiconset --formats="png"

# LaunchImage
sketchtool export artboards "$PROJECT_DIR"/"Graphics Resources/LaunchImage.sketch" --output="$PROJECT_DIR"/"$PROJECT_NAME"/Images.xcassets/LaunchImage.launchimage --formats="png"

以上代碼需要根據你的項目情況進行調整或擴展。