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