「器」兩分鐘認識一款把 Sketch 變成 Principle 的插件：Diya

隨著 Sketch 在版本49中增加了 Prototyping 功能，試圖給 Sketch 安裝「原型」義肢的插件也越來越多。前幾天發現一款有意思的插件 Diya，安裝後的 Sketch 神似 Principle。插件的 slogan 是「Bring your ideas to life」，為你的設計畫龍點睛。

??閱讀準備

• 插件官網：Diya - Timeline animation directly in Sketch
• 相關閱讀：Introducing Diya | Diya Tutorials
• 其他插件：CRAFT | Sketch Material | WeSketch | Runner

上手很簡單，走完核心流程大概可以分四步。

??第一步，連線

和 Prototype 功能相同的連線方式，從 Layer 到 Artboard。當然，目前見過所有具備原型能力的插件都是這麼操作的。

??第二步，調整

每個動畫都可以在時間軸面板上調節。Sketch 升到版本49.3的同學，時間軸面板暫時無法被呼出，等作者修復吧。。。

??第三步，預覽

??第四步，導出

Diya 的導出功能很貼心，會針對原型面相的對象「老闆」和「開發」生成兩個文件：

1. 一份普通的原型文件，老闆有個瀏覽器就可以瀏覽；

2. 一份帶動效注釋的原型文件，開發可以參考上面的參數進行效果還原。

雖然我沒當過「老闆」和「開發」，但是這個細節暴露了 Diya 的作者是服務設計出身，具備前端開發能力的全鏈路設計師。

快速上手後，還有這些功能可以玩一下。

??運動曲線

如果對動效的要求很高，嫌棄默認值的同學可以自己調節動效參數。

??形變動畫

可以比照 Keynote 的「神奇移動」來理解這個功能。

??路徑動畫

這是個非常有趣的小技巧，可以看一下官方教程，講的很清楚。

??動畫復用

正如 Sketch 的精華 Symbol，用 Diya 製作的交互動畫同樣可以復用。

??文章總結

怎麼看 Diya 都比 anima 家每年$79的 Sketch 插件 Timeline 靠譜多了！！

??其他文章

• Sketch 技巧：Library | Colored Text | Symbol | Shared Text | Resizing
• Graffle 教程：流程圖 | 文檔 | 表格
• 設計工具：InVison Studio | Nucleo | Feedly
• 設計譯文：Swarm | Do & Don』t | YouTube | Uber | iPhone X HIG | Oscar 2.0 | Atlassian | Adobe 圖標 | Adobe 品牌

??感謝閱讀

推薦閱讀：