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

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

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

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

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

raw-image

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

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

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

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

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

.

➤ 不用再擔心設計稿的失誤!透過這些方法,可以改善 Sketch 和 Figma 的問題


如此一來,設計稿的問題就不再影響切版了,輕鬆自在地,更快速完成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

avatar-img
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
留言
avatar-img
留言分享你的想法!
pxCode Team的沙龍 的其他內容
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。