RWD切版秘笈：透過這些方法，改善 Sketch 和 Figma 的設計稿問題

身為一個前端工程師&設計師，不管你屬於前者或後者，我們都相信，你一定都曾經尋找過更快速的方法，去將手中的設計稿，編輯成擁有多種程式碼的RWD響應式網站（Responsive Web Design）。

而這一篇文中，就將對此分享我們所設計的一個全新編輯工具——pxCode。

透過Figma/Sketch將檔案直接輸出，並導入pxCode之後，pxCode就會提供許多獨創的視覺編輯方式，讓甚至沒有任何工程或設計背景的用戶，都可以輕易上手——（這句話是真的喔）

這一支影片中，將會詳細地為pxCode用戶介紹【設計稿的調整與修正】。

你或許會好奇，為什麼早已經在設計軟體裡完成的設計稿，在導入之後還要進行修正？——

沒錯，因為這中間的切換，經常會有元件不適應（也可能是設計稿本身）的問題，進而導致字體、圖案的設定變形，比如說：字型不支援，因此要改用另一種字型替代；設計元件不居中，因此要設定置中......

於是在pxCode裡，就特別為這樣的情況做了適應調整，讓無論什麼樣的設計稿，都可以在裡頭，用最快的方式進行切版編輯，大大提升了效率！

.

如此一來，設計稿的問題就不再影響切版了，輕鬆自在地，更快速完成RWD網頁切版！

歡迎收看以上教學影片，並提出任何疑惑，我們都會為你解決。 ;)

⏱ Timeline:

🔵 0:03 設計檔編輯方法 🔵 0:24 設計稿的字型變動 🔵 1:07 色塊或圖片的重疊 🔵 1:37 設計檔元件沒有居中 🔵 2:11 轉變成圖案 🔵 2:37 複製貼上 🔵 2:51 Fill Mode 🔵 3:18 圖片切割法 . 🔵 3:54 總結

.

📲 歡迎任何問題與合作邀約： pxCode官方網站, Facebook, YouTube