一、製作mockup的不專業分享
此時看著標題「Mockup的不專業分享」呆立幾分鐘的我...思考著幾星期前的我為什麼會發瘋在上篇文章說會以續篇的方式分享mockup XDD，擔心自己敘述得不夠好會誤人子弟(哪來的子弟?)，此外網路上也有很豐富的學習資源！
但...女子漢大丈夫說到還是要做到!我的分享在設計師或專業人士眼裡可能很渺小，所以此段分享主要適合:
A. 完全沒接觸過Figma但想使用的人
B. 對mockup概念陌生的人
切入正題~~~
mockup的中文翻譯成「視覺稿」，它主要用於呈現產品整體的視覺設計，原則上就是依照wireframe(線框圖)定版的佈局去製作，在wireframe的基礎上增加更豐富的視覺元素，包含圖標、排版、配色等細節的視覺呈現。
我是使用Figma去製作網頁的mockup，在Youtube搜「Figma教學」應該就會跑出一堆教學影片，基本操作這邊就不多加闡述~~~但我這邊想提供幾個核心的概念跟好用的工具給大家參考，希望可以幫助到初學Figma製作mockup的夥伴能少走一些冤枉路><
- 善用快捷鍵
善用快捷鍵的一大好處是不需要一直使用滑鼠就能執行動作，能有效地增加工作效率!因此建議大家使用Figma時，可以注意自己最常執行的動作有哪些，可以把對應的快捷鍵記下來~
以我為例，我常用的快捷鍵有:
ctrl + z : 回上一個動作
ctrl + G :將多個元件組成一個group(這個非常好用!!!)
ctrl + \ :展開或收合工作區
ctrl + shift + K :開啟電腦中的圖片區
T ：輸入文字
R：拉矩形圖案
Ｌ：拉線條
2.推薦好用的Plugins(套件)
Unsplash:是一個免版稅的圖片庫，不需要退出螢幕即可使用，這裡一定能找到適合你設計的圖片，只需輸入關鍵字，就可以快速搜尋！
Remove BG：這個套件只需幾秒鐘就能自動完成圖片的去背，如果是幫電商或賣產品的公司製作購物網站的mockup，這個套件會派上用場！
Feather Icons :很多常見的icon都可以在這裡找到!
Iconify : 這是主管推薦我的套件XD~一樣很多好用的icon都可以在這裡找到!
二、 chit-chat moment-我這兩週做了什麼 ?
我的工作流程
過去兩到三週主要是延續上篇提到的新專案，我的工作流程是:參與會議>撰寫與整理會議記錄>整理設計稿(一個讓設計稿變得更易讀、更方便工程師去寫CODE的重要步驟)>過需求給前端>前端切版完進行測試>出問題單>待前端修正好問題再進行複測。
整個流程的重點是整理新版的設計稿、過需求以及進行測試!
我的體會
透過最近跟著主管一起執行專案的過程，我體會到一位PM是否具備耐心、細心以貼心的重要性!
在軟體業當PM較常需要合作溝通的對象有客戶、前後端工程師、UI設計師以及老闆，PM除了需要跨部門溝通以外，「所有事情一直在改變」也是PM日常要面對的工作內容之一。
最近跟著主管一起執行專案的過程中有了一些體會，時刻注意設計師在設計稿上做了那些更動，需要耐心; 測試時需要穿梭在設計稿、規格文件以及不同的頁面中找錯誤，需要細心; PM不只是傳遞需求的橋樑，PM需要多做什麼事能讓工程師更專注於開發工作，需要貼心。
