最簡單快速的編輯概念：設計稿轉RWD之前，你應該要知道什麼？

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

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

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

以下這支教學影片，就特別介紹了pxCode的編輯概念（Editing Concept）。

對於剛入門的新手來說，有一些細節概念或許不是那麼清楚的，例如說什麼時候應該做出怎麼樣的調整，來進入下一步調整？又或是說，怎麼樣的調整，才更適合一個設計稿？

以下這支教學影片，就特別全面地介紹了pxCode的編輯概念。歡迎收看，並提出任何疑惑，我們都會為你解決 ;)

.

這些或許不會有最標準的答案，不過在pxCode，我們提供了非常直接式的建議，不時提供『智慧式提點』，為你當下的調整步驟給出最適當的建議。

如此一來，你可以更快速的掌握一個設計稿的屬性，在最短的時間內，將客戶託付的設計稿，編輯轉換成擁有完好程式碼的響應式網頁（RWD）！

⏱ Timeline:

🔵 0:04 切版概念 . 🔵 0:12 pxCode 編輯流程 🔵 0:28 結構主要內容 🔵 0:50 Size, Direction, Cutline 🔵 1:16 Lucky Guess 🔵 1:35 HTML concept 🔵 1:46 pxCode 三種結構 . 🔵 2:27 總結

.

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