Marketch從Sketch畫板直接量取CSS【免費下載鏈接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.項目地址: https://gitcode.com/gh_mirrors/ma/marketch設計稿交付還在對著截圖量像素周四下午四點設計師把Sketch文件甩進群配一句“標注看文件”。開發打開后放大截圖一個按鈕一個按鈕地量margin再手動抄進樣式文件。Marketch是個Sketch插件能把畫板導出成瀏覽器里的HTML頁面在頁面上直接取每個元素的CSS。它解決的是設計稿交付這一環設計導出一次開發復制著用不再對著截圖量像素。Marketch導出的頁面能干什么把Sketch畫板變成瀏覽器里可直接量取CSS的交互頁面左側導航選頁面和畫板中間預覽區跟著切換點任意圖層右側面板吐出寬高、填充、圓角和可復制的CSS懸停第二個元素兩者間距直接標出具體數值右上角開“Show slices”查看各圖層的導出切片克隆倉庫到雙擊安裝導出流程怎么走你打開終端運行下面這條命令把項目拉下來git clone https://gitcode.com/gh_mirrors/ma/marketch進目錄后你要的只有marketch.sketchplugin這個文件夾雙擊它Sketch會自動接管安裝裝完菜單里沒出現就重啟一次Sketch。接著打開任意.sketch文件按Command Shift M快捷鍵綁在manifest.json的 Export as zipFile 命令上彈出對話框選選中畫板、當前頁還是全部勾不勾2x畫板和逐圖層導出圖片確認后選個保存位置得到一個zip包。解壓后瀏覽器打開index.html畫板就變成了下面這樣的頁面左側是頁面和畫板列表中間是設計預覽右側是CSS數值。注意文件里必須用真正的畫板普通分組不會被識別當前版本v1.0.24已兼容Sketch v52的API。中央是設計預覽右側是該圖層的CSS。它擅長什么以及它不管什么它強的地方數值直接來自Sketch文件本身margin、填充、圓角這些參數可以原樣復制進樣式文件不用截圖比對兩個元素之間的間距懸停一下就標出來64×64以內、不含文字的小圖標組會自動按組導出成一張圖避免切片散落一地。它不管的不生成響應式斷點導出的HTML是1:1的測量頁不是生產級布局動效和交互邏輯也不在提取范圍里只有靜態樣式。用命名規則控制導出范圍如果你只想交付部分畫板把頁面或畫板名字前面加個“-”它們就不會被導出真需要“-”開頭就用“-”轉義。想讓某個矢量以SVG而不是PNG用圖層名前加“svg”前綴即可。這兩條規則都實現在marketch.sketchplugin/Contents/Sketch/export.cocoascript里。想改右側面板的展示或導出頁面樣式直接打開index.html它是純HTML/CSS/JS的單文件頁面數據來源是zip里的data.js。 Marketch導出報錯或面板缺數據怎么辦導出時提示找不到畫板原因文件里用的是普通分組不是Sketch畫板。 處理把分組轉成畫板再確認導出對話框里的畫板范圍選項。Sketch v52下右側面板不顯示文字和形狀原因v1.0.24是為繞過v52 API變更做的臨時兼容這兩類圖層的展示被關掉了。 處理等官方的長期修復當前版本可以先用懸停測量拿數值。多行文字只顯示第一行原因舊版本bugv1.0.22已修。 處理插件菜單里點“Get New Version”核對版本號升級后再導出。什么場景該用什么場景別用如果你的設計文件在Sketch里流轉每周要向開發交付一批標注頁面這個流程能省掉手動量像素的重復勞動。如果團隊的稿子主要放在Figma里這個插件幫不上忙它的數據源是Sketch的原生API。如果只是批量導圖片資源Sketch自帶導出就夠了多一層HTML頁面沒有必要。下一步把Sketch文件變成瀏覽器里可量測的頁面。克隆倉庫雙擊插件文件夾對一個畫板按Command Shift M試一次。【免費下載鏈接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.項目地址: https://gitcode.com/gh_mirrors/ma/marketch創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Marketch：從Sketch畫板直接量取CSS
Marketch從Sketch畫板直接量取CSS【免費下載鏈接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.項目地址: https://gitcode.com/gh_mirrors/ma/marketch設計稿交付還在對著截圖量像素周四下午四點設計師把Sketch文件甩進群配一句“標注看文件”。開發打開后放大截圖一個按鈕一個按鈕地量margin再手動抄進樣式文件。Marketch是個Sketch插件能把畫板導出成瀏覽器里的HTML頁面在頁面上直接取每個元素的CSS。它解決的是設計稿交付這一環設計導出一次開發復制著用不再對著截圖量像素。Marketch導出的頁面能干什么把Sketch畫板變成瀏覽器里可直接量取CSS的交互頁面左側導航選頁面和畫板中間預覽區跟著切換點任意圖層右側面板吐出寬高、填充、圓角和可復制的CSS懸停第二個元素兩者間距直接標出具體數值右上角開“Show slices”查看各圖層的導出切片克隆倉庫到雙擊安裝導出流程怎么走你打開終端運行下面這條命令把項目拉下來git clone https://gitcode.com/gh_mirrors/ma/marketch進目錄后你要的只有marketch.sketchplugin這個文件夾雙擊它Sketch會自動接管安裝裝完菜單里沒出現就重啟一次Sketch。接著打開任意.sketch文件按Command Shift M快捷鍵綁在manifest.json的 Export as zipFile 命令上彈出對話框選選中畫板、當前頁還是全部勾不勾2x畫板和逐圖層導出圖片確認后選個保存位置得到一個zip包。解壓后瀏覽器打開index.html畫板就變成了下面這樣的頁面左側是頁面和畫板列表中間是設計預覽右側是CSS數值。注意文件里必須用真正的畫板普通分組不會被識別當前版本v1.0.24已兼容Sketch v52的API。中央是設計預覽右側是該圖層的CSS。它擅長什么以及它不管什么它強的地方數值直接來自Sketch文件本身margin、填充、圓角這些參數可以原樣復制進樣式文件不用截圖比對兩個元素之間的間距懸停一下就標出來64×64以內、不含文字的小圖標組會自動按組導出成一張圖避免切片散落一地。它不管的不生成響應式斷點導出的HTML是1:1的測量頁不是生產級布局動效和交互邏輯也不在提取范圍里只有靜態樣式。用命名規則控制導出范圍如果你只想交付部分畫板把頁面或畫板名字前面加個“-”它們就不會被導出真需要“-”開頭就用“-”轉義。想讓某個矢量以SVG而不是PNG用圖層名前加“svg”前綴即可。這兩條規則都實現在marketch.sketchplugin/Contents/Sketch/export.cocoascript里。想改右側面板的展示或導出頁面樣式直接打開index.html它是純HTML/CSS/JS的單文件頁面數據來源是zip里的data.js。 Marketch導出報錯或面板缺數據怎么辦導出時提示找不到畫板原因文件里用的是普通分組不是Sketch畫板。 處理把分組轉成畫板再確認導出對話框里的畫板范圍選項。Sketch v52下右側面板不顯示文字和形狀原因v1.0.24是為繞過v52 API變更做的臨時兼容這兩類圖層的展示被關掉了。 處理等官方的長期修復當前版本可以先用懸停測量拿數值。多行文字只顯示第一行原因舊版本bugv1.0.22已修。 處理插件菜單里點“Get New Version”核對版本號升級后再導出。什么場景該用什么場景別用如果你的設計文件在Sketch里流轉每周要向開發交付一批標注頁面這個流程能省掉手動量像素的重復勞動。如果團隊的稿子主要放在Figma里這個插件幫不上忙它的數據源是Sketch的原生API。如果只是批量導圖片資源Sketch自帶導出就夠了多一層HTML頁面沒有必要。下一步把Sketch文件變成瀏覽器里可量測的頁面。克隆倉庫雙擊插件文件夾對一個畫板按Command Shift M試一次。【免費下載鏈接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.項目地址: https://gitcode.com/gh_mirrors/ma/marketch創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考