Framer 前前後後進行了100+次更新，但在國內持續遇冷，因為絕大部分國內設計師並不會 JS，無法真正掌握這款工具的精髓。也許官方意識到了這個問題，於是在 Framer 基礎上推出了 Framer X，意在打造為所有人準備的互動設計工具。

閱讀準備

工具官網：Framer X

產品口號：Interactive design for everyone。

宣傳影片

「工具」三分鐘瞭解 Framer 全新版本：Framer X

https：//www。zhihu。com/video/1007740499393961984

繪圖 | Drawing

「工具」三分鐘瞭解 Framer 全新版本：Framer X

Your new favorite design tool。

https：//www。zhihu。com/video/1007741769093509120

Framer X 擁有所有你需要的功能進行圖示或複雜插畫的繪製。使用 Framer X 提供的高階路徑編輯功能來微調設計。當然，所有圖形均可匯出。

排版 | Layout

「工具」三分鐘瞭解 Framer 全新版本：Framer X

絕佳排版工具

https：//www。zhihu。com/video/1007742495593218048

前所未有的排版設計體驗。當你拉伸畫布時，Framer X 支援自動佈局。

Interaction | 原型設計

「工具」三分鐘瞭解 Framer 全新版本：Framer X

快速完成日常原型設計

https：//www。zhihu。com/video/1007742711243411456

使用 Framer X 提供的強力互動工具建立高保真的滑動、翻頁以及頁面切換，你所要做的就是移動滑鼠和點選。

Components | 控制元件

「工具」三分鐘瞭解 Framer 全新版本：Framer X

可互動控制元件

https：//www。zhihu。com/video/1007742943238569984

Framer X 中的控制元件不再只是靜態控制元件，他們可互動可複用，從地圖到影片播放器，都可以實現。

Store | 商店

「工具」三分鐘瞭解 Framer 全新版本：Framer X

市面上第一個應用內建設計商店。在商店裡你可以找到豐富的設計資源，從互動設計系統到圖示。也可以把你自己的設計沉澱分享出來。

React

「工具」三分鐘瞭解 Framer 全新版本：Framer X

當設計遇見 React。

https：//www。zhihu。com/video/1007743118174806016

在專案中使用真實的 React，從零到一打造可互動的元件。如果要管理物件的更多屬性，可以用 React 在屬性面板裡打造自定義介面。

Teams | 團隊協作

「工具」三分鐘瞭解 Framer 全新版本：Framer X

設計師們可以透過 Framer X 提供的私有元件庫，隨時同步設計資源。

其他文章

專欄：Ant Design | BorderDesign | 一斑

外掛：CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya

技法：Library | Colored Text | Symbol | Shared Text | Resizing | 流程圖 | 文件 | 表格

工具：InVison Studio | Nucleo | Feedly | Phase | Studio Platform | Overflow | Talebook

案例：Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe | Airbnb

資訊：2018年7月

感謝閱讀

我之前的同事@孫浩和@鍾二信是 Framer 大咖哦，相關的問題大家可以請教他們。

最後為團隊做個廣告，歡迎加入 Ant Design 團隊，歡迎使用 Kitchen：一款為設計者提升工作效率的 Sketch 工具集。