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