更快、更具功能性的原型設計

快速插入、樣式 & 導覽
- 全新「快速操作 Quick Actions」功能,可以透過鍵盤幾個簡單的按鍵迅速插入物件(widgets)和元件(components)、導覽頁面(navigate pages),以及套用物件樣式(widgets styles)。
- 按下斜線 [/] 即可開始操作。


畫廊視角
全新「畫廊視角(Gallery View)」提供文件中所有頁面和元件概覽,一目了然地查看所有內容。

探索互動新方式
應用樣式(Apply Style action)
使用應用樣式動作(Apply Style action)可動態更改原型中物件的顏色、字體和其他樣式屬性。

停用互動(Disable Interactions)
右鍵點擊任何事件、狀況或動作,暫時在原型中停用它,方便你測試不同的互動效果而不受其他設定干擾。

目標元件(Target components)
你可以在設置互動的過程中直接選定元件作為目標,這使得使用元件進行原型設計的速度更快且更有效率。

元件事件(Component events)
你可以為元件增加互動事件,例如「點擊(Click)」或「滑鼠進入(Mouse Enter)」,而無需呼喚事件。

緩動和動畫選項(Ease and animate options)
你能在互動設計中選擇更多的緩動效果,並使用新的縮放動畫來強化「顯示/隱藏(Show/Hide)」動作。

變數改變事件(Variable Changed event)
使用「變數改變(Variable Changed)」事件,可以在原型中變數值更新時觸發動作。

使用過渡和變換(Transitions and Transforms)來建立動畫效果
使用過渡效果(Transitions)來為樣式變更增加動畫效果,或透過應用樣式動作建立樣式效果。你還可以使用新的「變換(Transform)」屬性,對物件進行縮放、平移或旋轉。

過渡(Transitions)
將過渡效果設置為在樣式效果之間和「應用樣式」動作中實現動畫變化。你可以選擇緩動選項並設置動畫的持續時間。

變換(Transform)
縮放、平移或旋轉物件,可以在樣式效果或「應用樣式」動作中使用。你還可以在樣式效果中設置縮放和旋轉變換的起始點。

網格上等距分佈
將物件快速水平、垂直或按網格分佈。一旦它們之間的間距相等,你可以輕鬆調整它們之間的空隙並重新排列順序。

物件間距
可以透過輸入數值或使用畫布上的新拖曳手把來調整等距物件的水平或垂直間距。

互換位置
透過選取與拖曳來重新排列等距物件,或按住 Cmd 鍵進行物件互換。

全新模糊(blur)樣式屬性
為物件增加模糊效果,或使用背景模糊來模糊其後面的所有內容。

以及更多你期待已久的功能!
- 互換元件(Swap components)可以快速將 component instance 從一個 component 更換為另一個。
- 清除繼承樣式(Clear style overrides)恢復為應用中的預設物件樣式。
- 切換觸控指標(Toggle off the touch cursor)以在手機裝置原型中顯示預設指標。
- 以及更多功能……
