從設計檔到RWD響應——完整的快速工具教學

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

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

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

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

.

⏱ Timeline:

🔵 0:18 : pxCode 3 steps . 🔵 0:48 : a. Split to Sections 🔵 0:57 : b. Analyze Group 🔵 1:12 : b1. Suggestion 🔵 1:24 : b2. Clean Up 🔵 1:45 : b3. Boundary 🔵 1:53 : b4. Layout 🔵 2:28 : c. Smart Responsive . 🔵 2:59 : Preview 🔵 3:12 : Export Code 🔵 3:22 : Recap

.

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