情境:

  1. 為了提升H5的操作效能,而進行網頁架構的重新撰寫
  2. 想同時解決長期積累的設計債,引進Figma設計協作工具,解決同仁間溝通問題。

困難:

  1. 我身為該專案的設計統籌者,需統籌資源,負責分派設計工作給同仁;
  2. 擔任與前端溝通協調的窗口,統一開發語言,制定設計系統。

成果:

  1. 同仁間能夠順暢使用Figma,並可引用設計系統快速勾勒頁面,
  2. 與前端有共同的溝通語言,漸低QA產品測試的障礙

前期製作Figma調研報告,提供同仁們了解導入Figma的使用優劣比較


一邊與前端討論設計系統的架構,一邊整理製作Figma設計系統,並轉換成Library,讓同仁們遵循相同的設計架構,並能快速製作所需要的頁面。

文字系統


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/faeb49e5-c780-4908-bb82-a2fa01009893/Untitled.png

顏色系統


Untitled