對於現代設計師而言，Sketch已經成了不可或缺的設計工具之一。各家原型設計工具也在悄悄的發生一些改變，迎合設計師們的需求，紛紛開發出了針對sketch原型的插件。既有傳統的桌面端原型工具，也有基於雲平台的工具。雖然沒有任何一條標準規定你必須使用哪一個工具，然而如何能在眾多的sketch+原型工具的組合中找到最適合自己的工作流程，提高工作效率，也是一件耗時的工作。

所以最近摹客的小夥伴們精心的為大家整理出了一個Sketch+原型工具的合集，希望能幫助各位優秀的設計師朋友們找到適合自己的工具組合，提高工作效率。

Sketch

長久以來，Sketch 在可交互方面一直為人所詬病。官方似乎更希望將這些功能留給第三方開發者做插件，自己安靜的做個小而美的繪圖軟件。而今年更新的Sketch版本中，它也可以支持在Sketch內部進行輕量級的原型設計了。這對於廣大Sketch粉絲來講無疑是個好消息。

原型交互方式：

Sketch中的原型設計依賴於畫板（Artboards ）和熱區（ Hotspot ）鏈接實現頁面間的跳轉，實現動態交互原型（類似於原型設計軟件Mockplus中的拖拽式鏈接點 ）。然而不得不吐槽的一點是鏈接線加的太多會讓你眼花繚亂。

預覽方式：

1） Sketch支持在軟件內部預覽（類似於Mockplus中F5本地預覽）。

2） Sketch Mirror內實時預覽（ USB 連接或同局域網內預覽操作）。

3） Sketch Cloud 內實時預覽（登錄 Sketch Cloud 後可將項目文件上傳至官方雲端，實現在線多人預覽，並可進行討論。）

缺點：

鏈接線過多會導致體驗不好。

鏈接過渡效果有限。

Sketch相關資源：不可錯過的19款Sketch線框圖套件

1. Mockplus + Sketch

Mockplus是更快更簡單的原型設計工具。自發佈以來深受國內外用戶喜愛，適合軟件團隊、個人在軟件開發的設計階段使用。簡單快速的交互功能，能夠很好地表達設計，幫助設計師「關注設計，而非工具」。隨着越來越多設計師對協作功能的需求，他們也推出了適合多人協作的團隊版和企業版，為更多的軟件開發/設計團隊提高了工作效率。

原型交互方式：

1） 下載Mockplus Sketch插件

2） 在Mockplus中拖拽組件後面的鏈接點，實現組件與組件，組件與頁面，以及組件本身狀態的交互效果。一拖一放，3秒快速交互。

預覽方式：

Mockplus提供8種預覽方式，包括軟件內部F5本地預覽、在線發佈為HTML網頁微信小程序（搜索Mockplus小程序）、手機客戶端（MKplayer）掃描二維碼等方式。

2. 摹客iDoc + Sketch

在實現交互快、設計快、演示快、上手快的敏捷開發（Agile Development）的大趨勢後，摹客團隊在今年9月份推出了摹客iDoc,朝着更高效的產品協作設計平台方向發展。與Sketch的結合，使其在原生Mockplus原型設計和摹客 iDoc中實現高保真原型設計都非常高效、便捷。

原型交互方式：

在摹客iDoc中，按住鼠標在設計稿上繪製一個矩形的熱區，再鬆開鼠標通過左側項目樹選擇熱區跳轉的目標頁面，即可完成交互跳轉鏈接的設置。對設置好的交互鏈接還可以設置跳轉動畫，有9種動畫樣式可以選擇，默認沒有動畫。還可通過下拉框或直接輸入數值修改動畫執行時長。

預覽方式：

摹客iDoc中，點擊頂部導航欄右側播放按鈕，即可演示交互原型。手機項目也可生成二維碼用手機掃描查看。

3. InVision Craft + Sketch

製作高保真原型時，大多需要從Photoshop和Sketch上傳內容。那你肯定會碰到一個問題，就是需要填充很多真實的圖片到界面里。這個過程非常浪費時間，有沒有能節省時間的辦法呢？當然是有的，那就是Craft。

Craft是InVision出的一個插件，功能強大。它不只可以輸出視覺規範(比較偏向StyleGuid)，還有些很酷的功能例如複製並排列物件，定義間距，文本/圖片自動填充，重複元素自動填充等等。通過將這個插件安裝到Sketch，你將體驗到Sketch和InVision之間工作的連續性。通過將設計和原型製作流程結合在一起，就可以快速的輸出高保真原型。

原型交互方式：

從官網的介紹可以了解到，InVision的原型設計方式也是通過添加鏈接的方式。界面元素中添加鏈接到畫板，設置過渡動畫並添加微交互，將靜態畫面轉換為交互原型。

預覽方式：

軟件內部播放按鈕預覽。

4. Flinto + Sketch

使用Flinto可以創建一些小的交互和動畫，實現多屏App的整體流動（Comprehensive Flows）。使用它的Transition Designer，可以非常快速的創建跳轉和轉場動作。對於新手而言，直觀明了，當用習慣了後就感覺特別順手，菜單、工具和選項都變成最小化。用它完全可以設計出令人印象深刻的原型，避免陷入特點過多的境地，分散用戶注意力。

原型交互方式：。

Flinto可以快速實現交互設計，與Sketch無縫對接，並且通過插件就可以把素材直接導入到Flinto中，添加鏈接和過渡效果或者添加自動跳轉。通過上傳圖片，添加熱點配合相應的交互動作快速的生成原型，方便客戶通過網頁或者手機端進行觀看。

預覽方式：

1） 點擊軟件內部播放按鈕

2） 下載iOS手機端App預覽（手機、電腦處於同一局域網）

5. Principle + Sketch

Principle和Flinto有很多相似的地方。作為一款原型設計工具，Principle的設計方式別具一格。它更多地關注於轉換製作的時間軸線路以及Sketch屏幕間的交互。對於不同習慣的設計師來說，有的人喜歡這種設計方法，而有的人就更喜歡使用像Flinto中的Transition Designer或者Framer中的Auto-Code（自動編程）。

原型交互方式：

使用Principle可以方便地為多屏App製作流動，或者就專註於微交互，這兩種任務它都可以勝任。與本文介紹的其它工具相比，Principle缺少一點潤色。作為一款與眾不同的原型設計工具，它的原型設計方式也略微特殊。

1） 下載Sketch插件，導入素材

2） 建立過渡和交互動作

3） 用延遲和曲線來打磨動畫

4） 添加滾動/分頁/拖拽

預覽方式：

1） 軟件本地預覽

2） 下載Principle Mirror手機預覽

缺點：

1）畫圖不方便，所以建議大家在Skecth中做好圖，再導入到Principle中

2）不能在當前頁中做動畫。

3）在Principle中的素材不能自由調整大小，只能用左側面板的scale選項進行寬、高調整。

6. Axure + Sketch

眾所周知，Axure是一款老牌的設計軟件。作為專業的原型設計工具，它能快速、高效的創建原型。而輸入高保真原型，則需要把視覺設計師在Sketch中製作好的矢量素材，例如圖標、控件、按鈕等導入到Axure中提高交互設計的效率。

原型交互方式：

先安裝好Sketch插件AxureRP.sketchplugin,選中Sketch的素材，點擊菜單的Plugins-AxureRP-Copy Selection。對於一般的交互，在Axure中可以通過彈窗來逐個篩選設置，到屬性面板上去篩選目標頁面（頁面多的時候就有點煩了）。稍微複雜的交互，則需要條件生成器來實現。Axure在交互設置中，可以添加條件判斷，但需要用戶有一定的編程常識，否則掌握起來有相當難度。尤其是初次使用的時候。

預覽方式：

本地發佈預覽

7. Marvel + Sketch

Marvel是一款免費的原型設計Web 應用，可以進行網頁設計和移動端的UI設計。它根據你設計好的 PSD 或 Sketch 文檔，也就是說你的視覺稿無需轉換格式就可以使用，當然線稿圖（.jpg or .png）也可以，導入後進行後續的交互設計。

原型交互方式：

先將畫板通過Sketch插件同步到Marvel，框選界面元素，通過熱點（HotSpot）連接目標畫板並設置頁面的轉場方式和操作手勢。不像連線的方式那麼直觀，所以容易造成邏輯混亂。

預覽方式：

1） 直接在web頁面中進行可交互的原型展示。

2） 生成URL通過郵件分享。

8. Framer + Sketch

與其他幾款原型設計工具不同，Framer 可能是最特別的一款原型工具，因為它要求設計師具備代碼能力。而它製作出來的原型也最接近真實效果。它支持調用系統鍵盤，輸入真實的文本，然後作為數據被使用；它支持對音頻、視頻進行真實的控制與監聽；Framer 的強大來自於它對 HTML、CSS 以及 Javascript 的無縫支持，單是音頻和視頻，就有數十種屬性和事件可以拿來用。

原型交互方式：

Framer X中原型設計變得更加直觀，只需點擊幾下即可創建基本級別的交互。將畫板從sketch中複製粘貼到Framer中,使用「鏈接」工具添加推送和疊加等過渡，或使用多向手勢創建嵌套滾動視圖。

預覽方式：

1） 本地預覽

2） iOS/Android手機鏡像預覽

總結

以上就是一些比較常見的Sketch原型設計工具組合。當然還有很多我們並沒有列舉出來的工具，例如Pixate 和UXPin，當然了還有Facebook的Origami Studio。如開頭所說，並沒一項規定限制你必須使用哪一種工具，只要是適合自己的使用習慣，適合自己的語言環境，適合團隊的工作節奏，在不同的原型設計工具中切換使用也是常有的事。

不管是使用Sketch的原型設計功能還是使用Sketch+原型設計工具組合的方式，只要能幫助自己提高工作效率，設計出滿意的現代原型就是很好的組合。找到適合自己工作流程的原型工具，然後就開始工作吧！