Leona Chiu

Menu
關於我

為什麼用 Figma 設計網站，能讓開發更順利？

為什麼用 Figma 設計網站，能讓開發更順利？

一名工程師，常常會面臨排版人員和工程師之間的落差。
排版人員想了一個想要的網站規劃，卻總是擔心自己能否完美還原，或者在實現過程中會不會跑偏。有時候工程師得花很多時間理解排版人員的意圖，並將它轉化為實際的程式碼，這樣的過程有時候會讓工程師感到很痛苦且非常花雙方的時間。
不過自從開始使用 Figma，溝通上變得順利多了，而不是雙方都憑空想像。
透過Figma 讓工程師與排版人員在實現網站排版
時，更加高效的溝通。
分析如下：
1.
工程師可以和排版人員在同一個檔案中即時協作
Figma 是一個雲端工具，它讓工程師可以和排版人員在同一個檔案中即時協作。這意味著工程師和排版人員可以在同一個雲端檔案裡同時工作，隨時看到彼此的更新。這不僅消除了來回傳送文件的麻煩，也不再擔心漏掉排版更新。更重要的是，這大大提升了溝通效率。
2.
工程師可以直接拿到排版資源，開始從頭開發
雖然還是要架設框架，但不會離設計人員的想法太遠。
不會拿到排版稿，都得花大量時間提取顏色、字體、間距等排版細節，加長製作的時間。不僅如此，排版中的圖像、圖標等資源，也可以直接導出，不用再花時間索取圖像。這樣讓開發省了大量時間，也大幅減少排版與實現之間的差異。
3.
統一的排版風格，讓開發更有一致性
如果排版人員在 Figma 中建立了排版，那麼在開發時可以按照這些規範來進行。不管是按鈕、表單還是字體，所有的排版元素都有清晰的標準。這樣不僅確保了網站的視覺一致性，也讓在開發時更加清楚該怎麼處理每個細節，減少需不斷確認對方腦中樣式的時間。
4.
響應式排版，適應不同設備
現在很多網站的使用者都來自手機，設計響應式網站變得尤為重要。幸好 Figma 讓排版人員可以設計適配不同裝置的界面，從手機到平板，再到桌面都能進行排版。工程師從 Figma 確認這些設計稿，就能有方向的進行排版，因為排版本身必須花很多的時間調整程式碼，如無法確認對方的樣式，就須花更多的時間進行溝通，反而壓縮架設的品質及時間。
5.
更快實現網站，節省開發的時間
Figma 讓排版人員和工程師之間的協作更順暢，也大大縮短了開發週期。因為可以在排版階段就處理好很多問題，排版上的細節能在開發前就被解決，這樣在實現網站的時候能夠更加快速，也避免了很多無謂的返工。
6.
交互排版一目了然，更好理解
在 Figma 中排版人員不僅能設計靜態頁面，還能創建交互原型。這樣就能直接看到點擊、滑動等操作會如何反應。對樣式效果有想法的同仁，不需要自己去猜測交互效果是怎麼樣的，並能幫助工程師更準確地實現排版人員的想法，且能與非工程系統的同仁，溝通時能及時反應並收集他人想法，整理出可以讓大多人接受的網站設計流程。
7.
減少錯誤和返工，讓開發過程更順利
當排版和開發協作得當，符合預期的網站就能更快成型。Figma 讓排版人員能夠精確定義每個設計元素，讓工程師在開發過程中能夠清楚地知道每個細節該怎麼做。即使有修改需求，也能快速在 Figma 中看到最新版本，讓開發過程更加順利。
總結來說 Figma 不僅是一個排版工具，它還讓排版和開發之間的協作變得更加順暢。從即時協作到資源導出，再到響應式排版和交互效果，Figma 都能幫助排版人員和工程師更加高效地合作。
參考資料
1.
Figma 官方網站： https://www.figma.com
2.
學會 Figma 排版： https://www.figma.com/best-practices