現有工作流程：

概念發想→

PD

• Axure
• 墨刀
• Atlassian

<aside> 💡 可能產生的問題： 不同人做的文件有不同的溝通方式與工具，連帶就會有不同的格式、連結，其他人要接手或是有跨專案的合作時，就必須要重新索取相關的檔案 Spec

</aside>

實際設計→

Designer

• Sketch
• illsutrator
• Photoshop

<aside> 💡 可能產生的問題：

1. 不同的人負責不同的專案，會有不同的子檔案存在各自的本機端，樣式或設計稿要統一，需要不停向對方要檔案；或是要溝通時，要不停的截圖、傳檔、擔心解析度、掉字的狀況。
2. 無法即時了解彼此間的工作進度

</aside>

互動原型→

Designer

• Principle
• Invision
• AE

<aside> 💡 可能產生的問題：

1. 檔案在負責人的本機裡，臨時需要的話要找負責人拿
2. Sketch 轉入各個做原型的軟體，轉換需要時間，檔案需要另外調整
3. 原型需要修改時，有時得從 Sketch 開始調整，然後在重新轉入做原型的軟體中

</aside>

工程開發

RD

• Zeplin
• iconMoon
• 藍湖

<aside> 💡 可能產生的問題：

1. 設計有漏切檔案時，要請設計重切圖
2. 檔案分佈在不同的 Zeplin 資料夾，同樣的圖有不同的名稱；不同時期迭代的圖片會散落在不同的地方，由於不清楚由誰做的，迭代的原因也不清楚

</aside>

What is Figma？

Figma是個可以線上即時設計協作、評論、檢視開發模式，並擁有原型互動的功能，可替代數位產品開發一條龍上絕大部分的設計工具

導入Figma後的工作流程：

概念發想→

PD

• PD 成立專案，並使用 Figma 製作 wireframe、Function Flow
• 產生的相關連結可以置入各種文字編輯器中，方便 Spec Review
• 溝通流程及 Spec 迭代都會被 Figma 記錄下來

實際設計→

Designer

• 設計接手後，在該專案底下開始設計，設計們可以線上分頁共同編輯
• 設計系統可跨專案共用，也可針對個案進行微調
• 設計中， PD 可隨時掌握進度確認方向，有文案需修改的，PD可隨時自由調整

互動原型→

Designer

• 設計可直接在畫布中製作互動原型，無需轉檔
• PD 可在某頁原型中留言需要修改的地方，設計僅需修改一處就可更新設計及原型
• 可觀看測試者的使用情況，觀察操作動線

工程開發

RD

• 工程師憑免費 Figma 帳號就能瀏覽、評論以及檢視原始碼
• 工程師可以一鍵下載打包全部的切片；有漏切的地方，工程師可以自己選取該區塊下載

Detail

Detail

Detail

Detail

常見QA：

• Q：Library 能不能跨專案使用？
• Q：同個專案若大家都能編輯，那不怕被 PD 或 RD 不小心弄亂檔案嗎？
• Q：免費帳號的權限？
• Q：價錢又是多少呢？