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

更新 發佈閱讀 2 分鐘

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

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

vocus|新世代的創作平台

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

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

.

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



⏱ 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

留言
avatar-img
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
pxCode Team的沙龍的其他內容
2022/01/28
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
2022/01/28
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
2022/01/28
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
2022/01/28
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
2022/01/28
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
2022/01/28
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
看更多
你可能也想看
Thumbnail
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
Thumbnail
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
Thumbnail
隨者Sketch(2010)、Adobe XD(2016)、Figma(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style
Thumbnail
隨者Sketch(2010)、Adobe XD(2016)、Figma(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style
Thumbnail
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
Thumbnail
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
Thumbnail
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
Visual studio code(VS Code),Hello World !
Thumbnail
Visual studio code(VS Code),Hello World !
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News