設計人與開發者之間的愛恨糾纏理不斷，會寫 Code 又會 Design 的人簡直橋本環奈千年難一遇，那麼怎麼樣才是團隊協作的最佳流程？趁這次 Framer X beta 版本，我想看看在這裡能不能找到答案。
Framer X 是一款高擬真原型的設計工具，從介面設計到原型都可以在同一套軟體裏達成，且可以透過自編程式去進行更自由地操作，先前看過幾款用 Framer 製作而成的 Prototype，完成度之高簡直難辨真假，而且所有設計元件都是開發友善，甚至整個 team 都共用同一份 framer 檔案進行開發。
一般像是 Sketch 或是 Adobe XD 雖然都有內建 Prototype 功能，不過都是簡易的畫面轉場為主，如果是進階一點的需求我們可能會使用 Invision 或是 Marvel App來進行原型製作，若是要有條件式邏輯的話可以用 ProtoPie，強調細節動態則是 Principle 或 Flinto，遇到動畫控則可以用 After Effects 做好之後透過像 Lottie 這樣的工具來搭配。
但不論怎麼搞，製作原型的目的都是讓大家取得對產品的共識，以及讓工程師能夠看懂設計師的想法，原型模擬只是盡可能的把想像中的效果弄出來，那有沒有可能這個 Prototype 是真的可以被開發者沿用呢？Framer X 也許可以打破這道設計師與工程師間的心牆，讓產品開發的流程趨於理想。
Framer X 自從釋出八月即將開放的消息後，我就興奮地預約註冊，那時候還為了能把順序排到前面，除了分享之外，還投了點廣告 ww
這篇僅是開放 beta 版本後試玩一下的記錄，適合已經有使用過 Sketch 或 Adobe XD 等 UI介面設計軟體的朋友搶先閱覽。
Stack — 疊層
我不知道中翻是什麼，但就用途上我給他稱為「疊層」也就是可以像積木那樣層層疊，同時取代原本物件的位置。
Layout — 響應式調整
用過 Sketch 的 Resizing 就知道它，特別的是滑鼠覆蓋時還有模擬動畫!!
Components — 模組化元件
就跟 Sketch 或 Adobe XD 裡的 Symbol，以及 Axure RP8 的 Master 一樣，Framer X的 Components 也可以將會重複用到的元件做統一管理。
值得一提的是，Components有一些額外的係數可以設定，並可透過撰寫程式讓控制列升級，像是電池的電量，或是開關按鈕的狀態：
這些 Components 除了可以自定義以外，也可以到內建的商店取得 —
Store — 設計商店
這真是個令人期待的功能，可以想像全世界的設計師或工程師們都可以自由地在這裡發佈以及取得 UI 元件，從 WordPress的佈景主題及 Unity遊戲的素材商城成功可以預測到，開放式的社群發展會為產品帶來無限可能。
Prototype — 原型
其實最期待這個功能，但竟然還不能用？！不知道是不是 Bug 或下一階段才有，囧。
結論
不管是用什麼軟體或工具，只要能達到產品順利開發的目標即可，更何況現在介面設計軟體愈來愈多，而且快速更新下也都愈來愈像，選一個自己或公司慣用的就好囉，重點還是在溝通協作上，以目前的試玩體驗來說，如果專案上的 Developer 及 Designer 同時都用 Framer X + React 進行開發，是相當有可能達成理想和諧狀態的。
感覺一定會被問的常見問答
Framer X 好上手嗎？
雖然 Framer 已經至臻成熟，但其需要 Code 的門檻對不少設計師而言仍是個課題，Framer X 在這塊處理上非常棒，軟體上手幾乎沒什麼學習曲線，載下來就躺著用。
只有 Mac 版本嗎？Windows 能不能用呢？
目前僅有 Mac 版本，若您是 PC 用戶可以到這裡登記，未來可能會開放。
Sketch 跟 Framer X 哪個好用呢？
綜合目前玩得到的區塊以及不小心偷瞄到的潛在功能，Framer X 的確是非常令人驚艷，而且操作上會發現很多設計執行上小細節都被照顧到了，倍感貼心，不愧是設計使用者介面與體驗的軟體。
但目前來說 Framer X 還是 beta 版本，完成度比不上已經累積大量使用者與外掛的 Sketch，專案導入上還需要等等。
至於若是 PC(Windows)使用者，還是只有 Adobe XD 家族唯一解。
任何問題、聊聊或相關合作，都可以加我 Facebook 或寄信至 riven@monospace.tw。
