MarketchSketch 設(shè)計(jì)稿獲取 CSS 與測(cè)量尺寸的完整工作流【免費(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/marketchMarketch 是一個(gè) Sketch 插件可以把 Sketch 設(shè)計(jì)稿導(dǎo)出成一個(gè) HTML 頁(yè)面你在瀏覽器里點(diǎn)元素就能直接量尺寸、復(fù)制 CSS 樣式。還在逐個(gè)量尺寸、抄色值接過(guò)設(shè)計(jì)稿的同學(xué)都熟悉這個(gè)流程用測(cè)量工具一個(gè)一個(gè)量寬高的像素值再?gòu)臉邮矫姘謇锸謩?dòng)抄填充色元素之間的間距全靠放大畫(huà)布目測(cè)。這些數(shù)字在設(shè)計(jì)稿和代碼之間來(lái)回謄抄很容易抄錯(cuò)。Marketch 的思路是把這件事搬到瀏覽器里完成它把畫(huà)板ArtboardSketch 中獨(dú)立的畫(huà)布區(qū)域通常對(duì)應(yīng)一個(gè)頁(yè)面或一屏內(nèi)容連同圖片、圖層數(shù)據(jù)導(dǎo)出成一個(gè) HTML 文件打開(kāi)后點(diǎn)誰(shuí)看誰(shuí)。下面從安裝到導(dǎo)出走一遍完整流程。三步裝好 Marketch 插件前置條件一句話需要 Sketch 3 或更高版本并且文件里必須包含畫(huà)板否則插件無(wú)法工作。克隆倉(cāng)庫(kù)git clone https://gitcode.com/gh_mirrors/ma/marketch解壓其中的marketch.sketchplugin.zip文件雙擊解壓出來(lái)的marketch.sketchplugin安裝即完成裝好后 Sketch 菜單欄會(huì)出現(xiàn) marketch 菜單項(xiàng)也可以直接用快捷鍵 CommandShiftM 觸發(fā)導(dǎo)出。從選畫(huà)板到拿到 CSS真實(shí)工作流勾選要導(dǎo)出的頁(yè)面與畫(huà)板打開(kāi)插件面板后左上角是頁(yè)面和畫(huà)板的選擇區(qū)。勾選想導(dǎo)出的對(duì)象支持多選、跨頁(yè)面確認(rèn)導(dǎo)出后得到的是一張包含所有畫(huà)板的 HTML 頁(yè)面可以整體瀏覽也可以直接發(fā)給同事看。如果某個(gè)頁(yè)面或畫(huà)板不想出現(xiàn)在導(dǎo)出里把它的名字加上-前綴即可被排除。如何拿到任意元素的 CSS在導(dǎo)出頁(yè)面中點(diǎn)擊任意元素右側(cè)面板會(huì)立刻給出它的 X/Y 坐標(biāo)、寬高、填充色和圓角等參數(shù)并生成對(duì)應(yīng)的 CSS 代碼比如一個(gè)按鈕可能顯示background: #4cd964; border-radius: 4px; width: 75px; height: 32px;直接復(fù)制進(jìn)自己的樣式文件即可不用再對(duì)著設(shè)計(jì)稿逐個(gè)數(shù)字核對(duì)。測(cè)量?jī)蓚€(gè)元素之間的間距布局對(duì)齊時(shí)最頭疼的是間距。選中一個(gè)元素后把鼠標(biāo)懸停到另一個(gè)元素上兩者之間的距離會(huì)實(shí)時(shí)顯示出來(lái)不用再反復(fù)放大縮小畫(huà)布目測(cè)。把當(dāng)前元素導(dǎo)出成 PNG需要把某個(gè)元素單獨(dú)變成圖片時(shí)比如切圖給產(chǎn)品確認(rèn)選中它之后點(diǎn)擊 Export Activity Layer 按鈕元素會(huì)以 PNG 格式導(dǎo)出把生成的圖片拖到桌面即可保存。導(dǎo)出頁(yè)面是空的先看這三個(gè)常見(jiàn)坑文件里沒(méi)有畫(huà)板Marketch 依賴畫(huà)板收集圖層信息內(nèi)容直接放在畫(huà)布上、沒(méi)放進(jìn)畫(huà)板的話導(dǎo)出頁(yè)面會(huì)是空的。把內(nèi)容收進(jìn)畫(huà)板再試一次。右側(cè)面板缺少部分文字、形狀元素v1.0.24 為了繞過(guò) Sketch v52 的 API 變更采用了臨時(shí)方案該版本中文字和形狀元素可能不會(huì)出現(xiàn)在右側(cè)面板里但導(dǎo)出功能本身已恢復(fù)屬于已知現(xiàn)象。Sketch 版本過(guò)老插件要求 Sketch 3 及以上老版本 Sketch 無(wú)法使用。源碼結(jié)構(gòu)與相關(guān)資源插件分兩部分CocoaScript 腳本負(fù)責(zé)從 Sketch 抓取數(shù)據(jù)并打包進(jìn)每個(gè)導(dǎo)出的 zip 中index.html負(fù)責(zé)展示圖層和圖片兩者結(jié)構(gòu)和定位 bug 的分工見(jiàn) contribution.md。發(fā)現(xiàn)問(wèn)題的話建議按 issue-template.md 提供信息再提交 issue。項(xiàng)目由 tudou527 發(fā)起MForever78、noyobo、xunuo、rayps 等多位貢獻(xiàn)者也參與了維護(hù)歡迎提 PR 參與開(kāi)發(fā)?！久赓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），僅供參考