編代碼之前，原型設計工具可以幫助程序員解決設計問題，即便審美不行也沒關系，這些工具都有著很棒的模板可供選擇。與客戶快速分享不同迭代的可能性可以顯著加速設計過程，接下來這十大原型設計工具值得一試。

1. Origami Studio

Origami最初由Facebook開發，以幫助團隊建立和設計產品。現在可以免費使用，程序員可注冊為蘋果開發人員，使用Quartz Composer下載并安裝Xcode以使Origami在Mac上順利運行。

與其他原型工具相比，此工具需要更多安裝工作。一旦安裝完成，就可以立刻開始創建設計概念，模擬滾動、滑動和頁面鏈接。Sketch和Photoshop的設計可以導入Origami，并且項目圖層將被保留，可以根據需要進行鏈接，動畫或轉換。Origami不以移動設計為中心：可以設計響應式網站，并模擬文本輸入，FaceTime相機和OS X拖放等功能。

只需點擊一下即可導出原型組件（包括動畫），Origami還提供了演示工具，使用戶可以為設計添加自定義背景，全屏查看，并模擬不同的設備。然而，缺點是無法讓客戶或設計團隊直接對項目或版本記錄評論。

2. Webflow

Webflow真正的發光點是，當原型設計完成后，點擊一個按鈕就可以轉換為生產就緒的網站。

最近，Webflow引入了新功能：一個用于原型的CMS。Webflow的CMS完全可視化，允許創建強大的動態網站而無需編寫代碼，另一個特別有用的功能是使用博客頁面原型概念創建博客。

如果你是自由設計師，并且難以找到程序員將你的設計變現，Webflow可以幫你。你可以設置用戶帳戶或指定管理員來管理內容，也可以在客戶端直觀進行更改，或者將原型導出到代碼中，Webflow干凈的語義代碼可以節省程序員幾個小時的代碼清理時間。

Webflow附帶可以拖放到原型中的網站模板和Web組件。Webflow響應自然，網站布局將針對所有設備進行優化：桌面設備，移動設備和平板電腦。如果這還不夠，你還可以設計適用于移動設備和所有現代瀏覽器的動畫。Webflow還具有內置擴展性，可以輕松地將直播原型連接到Slack，MailChimp，Google Drive以及超過400種其他服務。

3. Proto.io

Proto.io自帶的網站和應用程序模板可讓你快速啟動項目，現成的模板內置了多種互動功能，整個應用程序在網絡上運行，所以可以在任何平臺上運行Proto.io。但其每個功能似乎都創建了一個新窗口（用于構建和實時預覽項目）。如果希望將標簽數量保持在最低限度，那么這可能是一件令人煩惱的事。

Proto.io最近發布了一些插件，可以通過簡單的拖放整合Sketch和Photoshop設計。當導入文件時，Proto.io將文件保留在適當位置，用戶不必浪費時間重新對齊。如果已經導入Proto.io，也可以繼續在Sketch或Photoshop中進行更改，Proto.io原型將自動更新，不必重復導出和導入。

4. Framer

Framer是最受歡迎的原型設計工具之一。它可以通過代碼對任何東西進行原型制作，從而創造出新的突破性設計。但該工具學習困難，不過Framer編碼語言的文檔結構非常良好，并有很多學習資料。

Framer的Mac應用程序是精心設計的，可在編寫代碼時提供實時預覽。使用Framer，用戶不會受到其他應用程序拖放工具的限制。此外，由于Framer使用代碼來構建原型，所以可將實時數據從Twitter和Parse等來源整合到原型中。

像其他工具一樣，Framer支持Sketch和Photoshop項目，并且還將保留設計圖層。與大多數工具不同的是，Framer還可以導入After Effects文件。當你準備好分享原型時，Framer可以生成與客戶端共享的URL。這些可共享網址可在移動設備上打開以進行實時預覽，Framer還可以對VR進行原型設計。

5. Vectr

Vectr是免費的，無論是桌面還是網絡瀏覽器，原型都將保持同步，隨時都可使用并始終可訪問到最新更改。

Vectr原型可與URL共享，并集成到諸如Slack之類的應用程序進行強大的協作。目前，Vectr功能并不豐富，該應用程序的路線圖已經發布，詳細列出了功能列表。包括：完全脫機桌面應用程序，更多平臺，內置版本控制，內置設計資源市場，協同編輯，內置反饋和注釋工具等。

6.Atomic

Atomic擁有漂亮的用戶界面和直觀易用的動畫時間軸，Atomic是一個需要運行Google Chrome瀏覽器的Web應用程序，此外，沒有可用的桌面應用程序。

如果使用After Effects進行原型動畫，你將感覺到Atomic的動畫時間軸有多棒。Atomic很靈活，方便調整交互，只需點擊播放按鈕就可查看更改和動畫。

其歷史選項允許用戶快退以查看歷史迭代，并從任何角度創建新版本。對于iOS設計人員，Atomic推出了帶有iOS設計元素庫的套件，以實現快速原型設計。你也可以直接將自定義CSS添加到Atomic中，也可以導出CSS，簡單地將其復制并粘貼到項目中。

7.Easee

Easee是最令人印象深刻的原型設計工具之一，當很多人認為該產品是Steven Fabre的激情項目時，Easee卻給人留下了深刻的印象。Easee的目標是幫設計師為網絡構建漂亮的動畫，而無需編寫代碼。

使用Easee，你可以從Sketch和Photoshop中拖放圖層并開始動畫制作。Easee可以在應用程序中創建平滑動畫并導出到CSS，因此可以將它們導入到實際的Web項目中，還可以在網上查看動畫實時預覽。

8.InVision

InVision可以說是世界上最流行的原型設計工具。該團隊不斷添加新功能，幫助設計人員更高效地進行原型設計。InVision的最大功能是其對項目反饋的管理，客戶和設計團隊可以直接在原型上提供意見。

將項目狀態傳達給客戶和團隊是至關重要的，通過InVision的項目管理頁面，用戶可以將設計組件組織到狀態工作流中。例如，如果將設計組件拖入“進行中”隊列，客戶或團隊查看狀態時會立即知道正在進行的工作。

前不久，InVision發布了一個稱為Boards的功能，它可用作演示工具，項目資產管理器以及創建moodboards。

InVision的功能列表似乎永無止境：用戶可從Sketch或Photoshop導入設計文件，動畫設計資源，鏈接頁面以模擬現實生活中的網站，并在移動設備上預覽原型，還有版本控制，無限的免費用戶測試以及與Slack，Dropbox，Box等應用程序的集成等。

9.Adobe Comp

最近發布的iPad Pro告訴我們，許多廣告素材正在使用平板電腦開發項目。Adobe Comp提供了將自然繪圖手勢轉換為生產就緒圖形所需的工具。

使用Adobe Comp，可以創建與Photoshop，Illustrator和InDesign無縫集成的打印，Web和移動布局。Comp可與Adobe Stock和Typekit一起使用，從而提供圖像，圖形和數百種字體，可以在設計原型時輕松整合。

Adobe Comp提供了開發和設計原型的新方法，并且由于其用戶友好的設計，實際上沒有學習障礙。

10.Principle

Principle由OS X的前蘋果工程師構建，Principle具有可將原型導出到視頻或動畫GIF的功能，可以在Dribbble，Twitter或任何地方共享！

Principle僅適用于Mac，如果你使用過Sketch，則原理界面將會非常熟悉。雖然Principle不包括協作工具，但這種缺點可能會被其離線功能所掩蓋。

結論

這十大原型設計工具的功能都很強大，你可以結合團隊的特點和興趣選擇最適合的工具。