FramerX Summer Challenge 心得
Hello 我是立秦， MoBagel 的全端工程師，最近剛結束國外為期一個月的 FramerX 課程。這篇文章會紀錄這一個月內授課心得、課程所學的知識、以及分享我在課程中完成的練習作品，以下是會介紹到的主題:
- 30 天的 FramerX Summer Challenge 課程心得
- 課程作品與 FramerX 優勢介紹
- 換我辦一場，這個夏天一起來挑戰 FramerX — 免費，還有票選獎勵
30 天的 FramerX Summer Challenge 課程心得
這門課是五月在 DesignerNews 上看到的，當初使用 2 weeks FramerX 試用版後想繼續深入這個生態，於是就報名了。課程於六月初開始，由 Linton Ye 所舉辦，一週會有兩次 1.5 小時的直播，並在每次的直播課程後會給回家作業，我給自己設定回家作業的完成時限大概都在三天左右，畢竟一拖延下一個直播課時間就又到了。
這門課是國外的課程(台灣好像只有我一位學生🧐)，溝通的工具是 Slack，老師筆記則使用 Dropbox paper，上面有紀錄人數，以參與一般頻道人數來說大約 250 人，繳作業的頻道約 70人，定期在繳作業的人數大約 20~30人，上面發問、回答風氣很好，有些學生還會幫老師的課統整重點，讓新進來的同學也可以快速抓到一些知識。
報名後讀了課程大綱，課程分為兩階段:
第一階段圍繞在 React 介紹、實際在 Codesandbox 上練習 Framer animation API。第二階段轉移到 FramerX 工具上，介紹這個付費軟體強大的功能，以及實作期末作業。
用兩週介紹 React 在規劃上是很緊湊的，老師大部分聚焦在基本功能以及使用 Framer animation API，給非工程師也能上手這個 JS 框架，並用來實作動畫。我在第一週的回家作業思考 onDrag(拖曳) 可以應用的場景，最後套入在 Tinder swipe 中:
第二週老師更深入講解不同類型動畫 tap(點擊),drag(拖曳),scroll(滑動) 以及 async(異步) 方式來操控多動畫的次序。這週同時也加強 React component props & state 的概念，讓學生在切分元件上面有良好的處理方式。我在這週試著實作 Spotify 結合 Instagram 現時動態的介面: Spotify listen together，在應用的正上方可以瀏覽朋友正在聽的歌，並且加入一起聽:
第三週開始老師轉移到課程主題: FramerX，把這部分放在課程後半部是合理的，因為先熟悉 React 語法會大大加速在工具內客製化元件，當然另一個原因也受限於 FramerX 的免費方案只有14天…😭😭
這週講解 FramerX 提供的原生動畫元件、由全世界開發者提供現成套件的商店、以及給使用者高度客製化的 code component，細部內容會移到下一個段落做說明。
最後一週課程相對匆忙，內容涵蓋製作 Charting，以及 SVG動畫。除了有直播課程後的作業之餘，也還有期末作業需要趕工，而為什麼大家很積極製作的原因是:
完課後的作品會放到 Twitter 進行簡單的票選活動，學生將有機會獲得老師其他課程的折價，或是一年份的 FramerX (呼，這個至少價值台幣四千塊啊!)
期末作業我選擇結合 Tensorflow.js (十分鐘初步了解)來達成物品辨識的功能，我並沒有專注在調整參數或是訓練更多的資料集，而是用現成模型實現出一個簡單的 UI 流程: 選擇模型種類 →進行辨識→呈現結果。
四週課程其實很短，以設計師來說後半段的課程會稍微吃力，一個使用 FramerX 好玩的地方就是先具備了 React 以及網頁開發的知識，雖然不用這些技能也可以探索好一陣子，但多掌握些 coding skill 會讓 Prototyping 的細節處理更細緻，也可以實現更多設計可能性，讓產品雛形更逼近真實環境。
課程作品與 FramerX 生態介紹
這部分會帶過較多工程開發套件以及 coding 相關心得，請酌量服用
上述的兩個作業 Tinder swipe & Spotify listen together 是在 Codesandbox 完成，基本上都使用 Framer API 來做元件動畫，這個套件在計算物件偏移量(offset)、起始位置動畫(FLIP)都有良好處理。
另外這個動畫套件也由知名 animation library — Popmotion 的作者加入後一起維護、開發。有興趣的開發者不一定要下載 FramerX，可以直接載入到自己的專案中玩玩看，說不定會愛上他。
回到 FramerX 本身，這套工具提供一些原生 Prototyping components，在處理 Stacked 物件群有方便的互換位置功能; 在 Pagination 跟 Scroll 有方便上手的呈現方式; 在畫面跳轉時也有不同的 Link 模式可以選擇。這些基本功能可以給設計師快速的製作簡單的 Prototyping 版本。
如果想要更深入使用，FramerX 也提供了第三方的套件庫，你可以輕易嵌入 Twitter tweet/Youtube video/Instagram post…透過社群貢獻的力量狠狠甩掉其他產品三條街:
最後，你也能直接在 FramerX 所提供的 Code Section 直接寫起 React Component，尤其在裡面支援 React Hooks，搭配 Framer API 可以完全操控你的元件行為，當然如果你願意，可以像我一樣把做好的套件上傳到 Store 分享給更多人使用。
這些特點讓 Framer 可以走得更快，讓使用者在製作 Prototyping 有不一樣的選擇、更多細節可以去客製化。好，如果讀到這裡你有那麼點興趣…請務必用心讀過下一個章節👇👇👇
換我辦一場，這個夏天一起來挑戰 FramerX
上完課後我思考著 FramerX 對於台灣的設計師來說接受度有多高？在我們的工作環境與流程中有需求嗎？
以我修的課來說，最後大約只有 10 人繳出期末作業，完課率大約是 4% (10/250人)，多數人會要求老師延後影片下架時間。同時間規劃 coding/design 的內容相當還是難消化，這門混合兩種領域的課的確還是存在門檻（不過只要撐到完課，獲得獎勵的機會提升不少哈哈哈）
在這裡附上 FramerX 調查連結🔗:https://forms.gle/T9oYx1qghWPaGL8t6
希望先了解各位讀者對於這個軟體的認識/在工作上面、個人職涯規劃的需求，如果統整好課綱最快 7月底就能讓免費課程跟大家見面🔥🔥
最後附上授課老師在課程尾聲勉勵的話，感謝各位看完這篇課程心得:
I believe that programming is a required skill for a designer to advance his/her career. It’s NOT to replace engineers. It’s the ability to express complex, creative ideas with the power of code. It’s the feeling that you are in control of the final experience delivered to customers. – Linton
