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