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

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

更新於 發佈於 閱讀時間約 3 分鐘

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

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

raw-image

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

以下這支教學影片,就特別介紹了pxCode的編輯概念(Editing Concept)。

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

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

.

➤ 從設計檔到RWD響應式網頁:Figma, Sketch 免費轉換成 HTML, CSS, React(不用寫程式)


這些或許不會有最標準的答案,不過在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

avatar-img
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
留言
avatar-img
留言分享你的想法!
pxCode Team的沙龍 的其他內容
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。