最簡單的前端切版工具！——只要掌握這四個編輯功能，就可以輕鬆RWD

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

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

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

然而，我們都知道，要在最有效率的時間下完成切版，有兩個方式： 一、技術強大 二、掌握工具

而pxCode作為一個致力於提供最快速切版方法的工具，裡頭也設計了最有效率的功能介面。因此只要在掌握了pxCode所設計的功能，基本上就可以很大幅度地提升切版速度。

在這篇文中，將會重點介紹網pxCode裡，使用者介面的四大功能項目，分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas。

.

如此一來，掌握了功能細項，不只是讓你免去寫程式的困擾，還用視覺編輯的方式，讓你比其他人快個10倍！

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

⏱ Timeline:

🔵 0:06：編輯介面 . 🔵 0:21：導覽列 Navigator 🔵 0:39：屬性 Inspector 🔵 0:47：排版類屬性 🔵 1:01：樣式類屬性 🔵 1:16：工具列 Toolbar 🔵 2:13：編輯區 Editing Canvas . 🔵 2:54：總結

.

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