大家好我是立秦，以設計工程師的職位加入 PicCollage 拼貼趣竟然滿兩年了，第一年寫下一週年紀錄的文章後，獲得不少朋友的鼓勵跟來自產業界的回應。第二年，除了紀錄下工作日常、新的挑戰之外，我想分享在這條路上的所見所聞，幫助其他正準備出發或是已經在這路上的朋友，能從這篇故事裡獲得一些啟發。
📍文章大綱
▍1. 在產品設計部門 (Product Design) 的日常
1.1 Design tool usage sharing 設計工具
1.2 Design system 設計系統
1.3 Process Automations 流程自動化
▍2. 在前端工程部門 (Frontend) 的日常
2.1 Editor
2.2 Team Expand
▍3. Life at PicCollage
3.1 公司現況
3.2 Outside of work
3.3 小結
【此篇文章建議閱讀時間為十五分鐘，歡迎使用電腦搭配以下歌單一起閱讀 🎵】
1. 在產品設計部門 (Product Design) 的日常
1.1 Design tool usage sharing 設計工具
在 PicCollage 的設計師主要使用 Figma 來製作 User interface, 建立 Prototype, 與進行設計稿工程交付。我除了每週定期收看 Figma 官方 Design Advocate (推廣大使) 的新功能技巧說明、也會搜集不同公司的設計師所分享的經驗談，從中萃取團隊適合學習的新知。
Luis 的 Figma & FigJam 繪製流程圖流程分享、 Clara 的 Figma 熱鍵使用教學、Joey 的 Component properties 心得筆記 都是很好的學習資源，根據每個設計師各自碰到的狀況，我會分別貼相對應的資訊給他們。如果有需要，也會在每週一下午固定的 Design sharing meeting 中直接跟全部人提及。
最近在公司推廣的是 Auto layout，這項功能可說是產品設計師為何會選擇使用 Figma 的原因之一。在翻閱過部分設計稿後，我發現 Auto layout 在公司裡的使用比例還有提升空間，有時設計師會花時間進行標注 (Annotation)，一但排版有所更動，整體標注也需要手動更新，而在工程交付時也會有些模糊地帶，需要口頭跟工程師額外確認這些元件在不同螢幕大小的縮放行為。
跟偵探一樣情蒐完各設計師製作介面的方式，還有了解大家對於 Auto Layout 的認知程度後，我就會展示在使用後所帶來的改善。而像 Auto Layout 這種複雜的功能，我也會額外撰寫文件，提及設計上、工程上要留意的設定，以及在 Editor / Viewer 權限下觀看設計規格時的差異 📝。
1.2 Design system 設計系統
PicCollage 是個超過十年的產品，在 2020 年全面轉換到 Figma 之前，已經存在有超過五年、專屬於它的設計系統。
每當產品中的功能在開發或迭代時，設計師會去發想、探索設計可能性，因此可能會創造出新設計、介面、和元件; 另一方面，為了讓部門內不同設計師在遇到類似的設計問題時能有固定參考依據 (例如顏色、字級大小、元件狀態的挑選)，我們又需要將決策轉化成文件規範與系統，降低未來做相同決定的時間成本。
在「創造新的使用體驗」與「採用設計系統」兩者之間，往往會有大量的溝通與取捨:
「做了這個新設計，而不參考使用既有系統的原因是什麼？」
「該設計版本對要檢驗的指標有更明顯的提升嗎？」
「這部分的新設計對已經使用既有系統的畫面的影響是什麼？」
有人認為建立設計系統就是不斷在 Figma 中建立一個個 components，我認為那是決策後的「結果」; 更真實的情況是 80% 的時間，設計師都在經歷組內討論、說服不同聲音的決策「過程」。
今年 7 月，PD team 在悠識的 DesignOps 全系列講座 中給了一場建立 Design system 的經驗分享(我的大頭貼在活動網站上根本像去郊遊的….)。很開心我能在拼貼趣參與到這段「過程」，並分享給其他軟體業的朋友，這是在直接選擇導入第三方設計系統的公司中不會遇到的 🍵。
在活動中，我們提到 「製作前」的準備事項，包括招募製作系統的夥伴、與工程部門溝通、統一任務目標與願景，「製作期」的啟動團隊方法、訂定製作系統的範圍與流程，以及「製作後」的迭代系統運作模式、搜集新需求與意見的管道。每個階段，Design engineer 都有可以發揮的地方: 在準備期，我能當作設計與工程的溝通橋樑，協助釐清設計需求與實務限制; 在製作期，可以分享 Figma best practice，讓設計師用貼近工程開發的思維去設計元件、製作規格; 在交付時，撰寫腳本 (Scripting) 讓部分輸出流程更自動化。
活動末，我們收到雪花般飛來的提問 (好險我們已經先瀏覽過部分問題)，憑著我們在拼貼趣製作系統的經驗，盡可能回答了每個問題。這也反應出在台灣，設計系統的議題逐漸被大家重視了！
這裡附上啟發我很多的設計師 Jan Toman 的公開分享: Getting buy-in for building a design system and team of five behind it 說明如何從不同面向，推動公司著手 0 to 1 建立設計系統、Data-informed design systems 中則說明量化資訊如何協助設計系統從 1 迭代至 10。希望這些來自中大型公司的精彩案例分享，可以幫助也正在建立系統的你。
1.3 Process Automations 流程自動化
延續前段的流程自動化，就來聊聊這個在公司裡最有趣的工作之一吧！👾
PicCollage 中提供大量的素材，像是含有主題的模板 (templates)、擺放多張照片的樣式設定…等等，讓使用者可以更方便創作專屬他們的拼貼 (Collages)。這些素材們部分是由設計師手動製作出來，並透過特定方式交付給其他部門。
Design engineer 能在設計工具中使用 Scripting 的方式加速這段交付流程、並確保資訊無誤。以 Designer Layout 這個專案中，設計師會產出超過 100 種擺放 2~4 張照片的版型，降低使用者在手機選完照片後，手動調整照片大小、位置的時間。
以往，在設計師製作好這些素材後，需要告知工程師到 Figma 查看，並交由工程師自行處理規格，iOS / Android 工程師慢則一個個用肉眼去對照 (如果一張圖的規格要看 1 分鐘，一百張下來…🥲，中途設計師又更新的話…🤯)，快則研究能不能透過 Figma API 將資訊一次存取下來。我的工作就是省去工程師親自來 Figma 取得規格資訊、確保設計師在交付的素材裡沒有任何規定外的樣式、並將這段交付過程自動化。
使用由 Rasmus 製作的 Figma plugin - Scripter，可以寫程式來獲得 Figma 設計稿上任何資訊，包括頁面內全部物件的大小、位置、使用的相片素材與樣式 (assets and styling)，取得資訊後，再轉換成 PicCollage App 能讀懂的 JSON 檔案並交付給工程師。整體來說只要半天不到的時間撰寫 Script ，就能完成以前快一週才能達成的任務，而且不管日後這些設計素材成長多快，我們總是可以用「一鍵輸出」即取得所需的資訊，更重要的是這些製作好的素材、程式碼都妥善存放於 Figma 上面，任何 members 都能享有、取得這些資源。
這是我在公司內運用程式提升 Design Operation 的其中一個例子，而我也一直熱衷於在設計專案內提供這樣的自動化流程協助，希望設計師們都可以專注在更重要的 UX 問題與決策，手動、繁瑣的事情就交給我吧 🙌！
Jordan singer 是不斷啟發我在 design engineering 想像的設計師，他所製作「用圖像化方式自動操控設計」的 Figma plugin - Automator，可以說直接開創了另一種在 Figma 做設計的可能性。推薦大家觀看他在 Figma 年會上分享設計師跨域工程開發的心路歷程 - Playing with Plugins，當初真的是嘴巴打開、看著他運用 AI 將輸入的文字直接轉成設計稿。
2. 在前端工程部門 (Frontend) 的日常
前端部門主要負責開發新產品 (Explore effort) 與建構拼貼趣網頁相關服務 (PicCollage effort)。廣義來說，只要公司有網頁相關的需求，不管是更新 company landing page、製作新的網頁產品、後台 CMS 介面更新，都會有前端成員的參與。
2.1 Editor
PicCollage 一直在探索編輯相片、影片的產品們。三月，我們組了一個 Tryout 小組，開始研究在 web platform 實現 PicCollage 所需的編輯相關技術，這個 web editor 有著手機版的功能，但又要因應使用者在電腦上操作的情境與需求，調整每一個功能的使用體驗。
在這個專案上，我們使用 React + Next.js + typescript 作為基礎，搭配 Radix + Stitches 製作 Components，並使用 Turborepo (一種 Monorepo 工具) 來管理不同的 packages 與 apps。除了基本的前端開發工具外，我們還研究了 graphic editing 產品所需的技術和開發套件。
「要如何處理在不同物件上的 Gesture/Keyboard input (Zoom / Pan / Rotate)」
「該挑選 Canvas / SVG / webGL 哪種方式來 render 畫面，差異是哪些」
「要如何實現多人及時共同編輯 (realtime & multiplayer editing)」
「如何處理操作衝突 (想像一個使用者正在移動圖片，但另一人卻刪除圖片)」
編輯器是個非常複雜的狀態機，除了要考慮來自滑鼠、鍵盤的輸入事件外，也要評估每個功能在不同瀏覽器、裝置平台、螢幕大小的使用體驗與支援度。
在例行的周四 product demo 上我們會跟公司 members 分享進度或有趣的成果，雖然準備 demo 總會花很多時間 (每次都要想梗還蠻燒腦的)，而且也沒有強制一定要每週都 demo，但我們自己設定了盡量每週 demo 的目標。除了要保持開發的慣性與週期，也藉由每週這個場合，讓公司的大家知道我們嘗試了什麼互動、想搜集的回饋、以及還能探索哪些技術。
在這半年的研究開發過程中，我們同時關注著其他 Editor products (Spline, RunwayML, Framer, Canva, Figma…) 的更新、迭代。這些編輯器產品有各自的使用情境以及主打的優勢，我們可以從中學習每種編輯器在做同個功能時介面、流程、技術上的差異之處，有時看到意料之外的互動方式也會刺激我們去試著想像更多種編輯的體驗。
除了編輯器類型產品，我們也會探索其他類型產品的互動行為、所用的前端技術。Creativerly 上每週會分享不同場域使用的網頁產品，前一陣子試了 Calendar 類的 Amie, Cron 就讓我們眼睛為之一亮，例如我們就從沒想過，行事曆上還可以結合 Spotify 音樂播放紀錄 (去挖掘大家上班時段聽的音樂還真有趣 ✨)。
整體來說 Web editor 是一個在介面與技術上挑戰性都很高的專案，也因為每個功能都有無限的進步空間，我們需要先溝通好 Scope 才能實際進入探索 & 開發，這半年中雖然常感受到自己能力還不足以做出很棒的編輯器，但每當看到專案有所推進、獲得鼓勵還是非常非常開心！
2.2 Team Expand
今年公司的前端工程師從 2 人增加到 4 人 (我把自己算成額外 0.5 個)，加上 Intern & CTO 竟然也來到一個史無前例的規模。每週二下午的 Frontend sharing 都好熱鬧:
Explore Effort (新產品團隊) 的同事分享 Mixerchat - 靈活分組的線上會議工具中所使用的 WebRTC video and audio APIs，以及在針對手機版、電腦版不同介面上所做的 CSS Grid 介面排版設定; PicCollage Server 部門的同事分享他在現有的 Ruby on Rails 平台上升級前端部分依賴，並計劃如何導入現代的前端開發技術，不只慢慢移除以前留下的技術債，更可以享有新技術帶來的便利性; 我跟另外一位同事則分享開發 Web editor 中遇到的有趣挑戰，關於 graphic editing、複雜手勢操作與狀態機 (State Machine) 管理我們累積了不少心得。
團隊人數增加讓彼此可以交流更多不同專案上遇到的挑戰，但同時也讓專案合作上的溝通、code review 時間增加。團隊目前並沒有限制專案一定要使用哪些前端框架或工具，主要以開發順暢、能上線產品為首要目標，不過，我們也開始在整理一個大家都能遵循的開發流程，這中間有許多的討論跟實驗，期待不久後我們可以有個成果，讓團隊在持續擴張中保有良好的工程開發體驗 (development experience)👩💻。
3. Life at PicCollage
3.1 公司現況
2022 因為 COVID 情況持續，讓台灣辦公室還是維持 Hybrid (可以進辦公室、也能遠端) 狀態，跟不少同事已經一陣子沒有實體碰面，公司的 Operation 同事不斷地舉辦公司的各種聚會，鼓勵大家多來公司認識新舊同事，真希望可以趕快回到整個辦公室不用戴口罩、一起出門吃午餐聊天的日子🍱。
科技業經濟下行 (Economic Downturn) 也影響到公司產品的一些數據表現，看到身邊不少朋友待的公司都停止招募、甚至一波波裁員，真的很欣慰 PicCollage 在營收穩定下是更願意聆聽大家的意見，一起討論在逆勢中應該如何調整公司策略，幫助公司在這波 Downturn 中找到新的機會點。
3.2 Outside of work
今年也可謂我的百岳元年，跟同事立下「一月一座山」的登山計畫後，在春夏季撿了郡大山跟奇萊南華。進入山林有一種魔力，它可以讓你遠離塵囂、暫時忘記工作上苦惱的事情，同時也是很好的機會可以跟山友交流趣事，還有認識台灣的大自然。尤其為了讓爬山更安全，還必須學會看天氣雲圖、安排足夠的糧食跟水、還有了解行程中容易發生意外的地形，在這過程中最棒的就是順便欣賞其他人拍攝到的景色以及每座山曾發生的歷史故事。
五月，前往美國 Figma 舊金山總部以講者身份參加 Config2022，在最棒的設計年會上分享了幾段在 PicCollage 做設計的故事，說來好笑，其實我事後根本不敢回去看影片紀錄，但慶幸自己做了這個決定實際拜訪一趟，看看那些認識多年、但從沒見面過的「網友」們，後來我還在 Figma 裡面置入台灣鳳梨酥，聽說在 All hand 上面被好好介紹了一番 😎。
為期三週的拜訪，都住在公司贊助的山景城公寓裡 (真的省下好多錢)，週末也會約美國工作的大學同學外出探索灣區的美食跟手搖飲。美國的城市氛圍、步調跟台灣截然不同，但我總是能找到合適的角落度過一天。
3.3 小結
第二年，在公司有了更多職務上的挑戰，也正在經歷公司規模慢慢變大的階段，期許自己的專業能力可以持續進步、面對「未知」仍保有好奇跟學習的心; 在興趣上，希望不管是排球、爬山都可以凝聚更多一起參與的同事，或是把這些事情的快樂，分享給其他想嘗試的人。
最後，謝謝看到這裡的你，單純想要把這一年裡發生的片段用文字記錄下來，如果這些能幫助你在這條路上走得更遠，那就太好了！🌈
對了我們也在持續徵才中，如果你想加入 PicCollage、一起探索下一個 lovable product，歡迎查看我們的 career page!
Back
Designtips.today
