“Meet me in the browser” — 2020 介面設計工具的狀態
作為設計師該花五分鐘思考的那些事
2020，Figma 開啟了設計社群的文化、Framer 也準備發佈網頁版本，今年 web-based 雲端設計工具不僅在功能本身有所更新，更進一步，也會對設計師的文化帶來改變吧!
Lichin 的個人文章搬新家了，歡迎拜訪 🙌
https://designtips.today/articlesFigma Conference: Config 2020
二月初在美國舊金山參加了 Figma 第一次的年會 — Config 2020。年會規模根據有加入 Slack Channel 的人數約一千人，缺點是空間稍微擠了點、且只有短短一天。不過還是對 Figma 未來要 release 的功能很期待:
Figma keynote 在此，摘要一下三個面向的更新，網路上已經有完整的影片跟 Blog，文章這裡就簡單帶過。有興趣看 Demo 的朋友可以查看上述連結:
📌 Editor 功能: Auto layout / Font management / Batch Edit Color。這些功能讓設計師在面對煩瑣操作上可以更快速解決，如 Auto layout 在父元件 resize 時，可以同時讓內部 content 動態調整、顏色在更新上可以根據目前全選範圍做部分調整…等等。
📌 協作與分享: 只分享 Prototype 不能 Access design file 的分享連結，個人認為接案的朋友會受惠良多、設計稿內可點擊連結(hyperlink🔗)，以後能直接點擊到外部 PRD 或是規格文件，是設計稿與文件整合的實用功能。
📌 建立社群文化: 只要有人的地方，就有社群。線上生產力工具往社群化發展是很重要的一件事，在下一個段落我會深入介紹這個新的想法、目前的功能，以及它在未來將會帶來的改變。
Building community together in Figma
當人們還將 Figma 定位成設計界的 Google Doc 時，它已經慢慢走向社群化了。2019 十月 Figma 開始 Community Beta 測試，我收到他們的邀請信，建立了我的個人 Profile:
💡如何整理履歷 / 作品 / 練習，又讓別人能持續追蹤你的設計？
準備面試或是練習時，有些設計師會把能公開的作品們整理到 Behance、Dribbble 或是 Google Drive、個人網站上面，讓其他人可以透過連結了解你的經歷。Figma 作為雲端設計工具，希望使用者在一個平台上面不只能創作也能建立個人檔案，使用屬於你的 handle (像是 Twitter 的帳號名字) 讓大家可以瀏覽作品或正在進行的專案。
但與 Behance、Dribbble 不同之處是，放上 Figma Profile 的檔案是能被查看內容的，換句話說: 你的設計想法跟實作方式是會被全世界的人所看到的。
目前有超過 400 位公開的 Profile 以及 1000+ 公開作品在 Figma 上能被瀏覽，這裡分享我認為 Figma Community 可能帶來的改變:
Explore & View 探索與瀏覽
想想當設計師在工作時因為參考需求，想要下載一份 UI System 時的流程: 我們可能會花上不少時間穿梭在各個素材網站，去找到符合需求的那份檔案(這裡以 Sketch 為參考):
問題來了: 找到檔案之後你知道作者是誰嗎？你能再找到其他的作品嗎？如果這些檔案很好，又該去哪邊下載呢，是不是在這個 UI Store 網站沒有收錄其他作品呢？
🔮Figma 整合了檔案、插件、創作者檔案於同一個地方(就在自己的官方平台上)，透過keyword 與 Hashtag 探索，你可以找到任何資源。
在 Community 首頁就能探索作品，Uber、Microsoft、Google…都放上了他們的 UI system。點選任何檔案後也能過 hashtag 再繼續探索更多檔案與 Plugins，如果搜尋 “chi” 並點選 Creators (創作者) 分類還能找到美國芝加哥的城市設計專案。
Learn & Remix 學習與連結
如果你有在使用 Dribbble，我想對於 Rebound 的文化不會陌生。Rebound 是 Dribbble 上面設計師們給予反饋的方式，在一個想做 redesign、延伸設計的原始作品上可以透過這種參考引用的方式，讓後來的作品與它互相連結。
Rebound 有個不方便處，這些作品大部分僅僅是截圖或是 Gif 動畫，而不是可以被查看編輯細節、了解實際圖層的 Showcase。
🔮Figma Community 加入了 Remix 的功能，這個機制讓人可以查看每個後來延伸作品的細節、複製一份成為自己的檔案，它能幫助設計師產生更多的設計想法與學習實作方式。
想想未來社群在舉辦 daily UI，你不需要再去 Facebook 的社群討論串下面附上沒有辦法操作的作品截圖，而是直接上 Figma 瀏覽該同學的作品，甚至複製一份來參考設計架構、色系與字體配置，讓自己可以更快速修改、學習…是不是改變了以往的 UI Challenge 模式與設計師交流的方式呢？
💡Open Source 對於設計師的好處在哪裡？
你可能會想，能直接這樣複製大公司或是別人的作品嗎？答案是完全可以的，甚至可以拿這些素材另外做商用行為，在發布一份公開檔案時，Figma 都會請作者同意檔案使用 CC BY 4.0 條款，這讓 Figma Community 的定位又跟一般作品集網站的功能不太一樣，在展示的同時，要知道別人是能使用你的作品的。
Open Source Community 就像個森林一樣(而且挺有機的)，透過搜尋你可以找到大公司所製作的 Design Guideline ，了解一些實作的眉角，也可以挖掘世界各國設計師並持續 follow 他們有趣的專案：譬如 Smart Animate 教學、繪畫模板等等…這種減少重複造輪子的現象，讓設計師能採用、學習、修改他人的作品，並創造出更多不一樣的新設計。
而如果是個還沒有 Figma 帳號的使用者，被這些豐富素材吸引後，也會順便註冊一下成為 Figma user，畢竟他的基本方案是完全免費的嘛。從這來看，Figma Community 將成為公司另一個用戶成長的方式吧！
從 Solo 到雲端協作的 FramerWeb
Framer 在 2020 年初宣布要在不久後發佈網頁版的消息(目前我估計還是要到八月後了)，提供多人協作的功能，讓 Prototyping 也能是團隊運動。
💡 設計師該為了工作而寫程式嗎?
2019 九月我在 UI/UX Taipei 分享 Framer 年會心得時也稍微討論了這個議題，而年末也舉辦了 Framer 工作坊，跟產業界七位資深設計師邊做 hi-fi Prototyping 邊討論實際在公司內的使用流程:
對於「設計師應不應該寫程式？」這個問題，我想更好的問題是「設計師在公司應該用什麼工具來建立跟工程師溝通程式的管道？」。針對這個問題，使用 Framer 就是個不錯的解決方式，平常設計師可以只專注於設計功能，但必要時，也可以切到 Code 模式，使用工程師也能理解的 API (雙方都說著同樣的語言)實現所需的動畫。
而這問題在 FramerWeb 上又進一步改善不少，因為有多人協作的功能，設計與工程的討論將會更沒有隔閡，身為設計師的你，也許最終並不需要寫程式，動動嘴跟滑鼠讓工程師幫你實現想法吧 😬
💡 無論如何…我還是想試試看學習程式
根據我在 Twitter 上看到 CEO 對於 FramerWeb 推出後的收費方式…應該會有免費的方案！基於這點，設計師開始使用這個工具邊做設計邊寫程式還是很有吸引力的:
另外，在年初 Framer 也在上面發佈超過五十個範本包(包含 Carousel, Parallax scrolling, Real data 使用…等等)，並持續更新官方線上教材，不想從零開始盲目摸索的話，這裡已經有很多實際 UI Animation 範例可以參考並從中學習。
時間拉回 Figma Config 結束當天的晚上，我的 mail 裡面跳出了一封來自 FramerWeb 新功能發佈的信件，打開看著不禁笑了出來「🥴時間點也太剛好」，從這天起網頁版開始支援匯入 Sketch / Figma 檔案。
🏋🏻♀️設計師在轉移檔案到新工具總需要很多時間，透過這種自動化的方式，降低轉移工具的阻力，讓使用者可以更快轉換到 FramerWeb 。
我想 2020 年 Framer 會又帶起一波學習程式潮流吧，畢竟工具本身很適合拿來給設計師做從想法到實作的成品展示，最後要輸出時也有 live share 的連結，想要 embed 到任何網站上也非常方便!
Figma, Framer…Future?
呼，終於介紹完對兩個工具的想法…搞得好像自己是業務一樣，但我想文章中幾個問題才是我好奇、也希望各位讀者可以想一想的。2020 年，有太多新的學習文化或是建立檔案、管理的方式，如果看完問題集，自己也還沒有好的做法或是習慣，為何不開始嘗試看看呢？ 上面兩個公司在未來釋出這些功能時都是完全免費的啊！🤓
設計師的一天大多在討論、思考需求、提出新的假設與 design，思考工具使用性這件事本身的順位並不高，但它卻是像呼吸一樣基本而重要，好好的呼吸(咦這什麼比喻?) 把地基打好，才能走得遠、跳得高。
