計(jì)稿并提取 CSS)
Marketch 快速上手用 Sketch 插件測量設(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/marketch當(dāng)一份設(shè)計(jì)稿交付給前端時(shí)尺寸、間距、色值這些細(xì)節(jié)往往要靠人工反復(fù)核對稍不留神就會(huì)記錯(cuò)一個(gè)圓角。Marketch 把這部分核對工作挪到了瀏覽器里它是一個(gè) Sketch 插件能把當(dāng)前 Sketch 文件轉(zhuǎn)成一個(gè) HTML 測量頁面頁面上可以直接讀取每個(gè)圖層的位置、尺寸和 CSS 樣式。項(xiàng)目定位與適用人群Marketch 是一個(gè)面向 Sketch 文件的自動(dòng)化測量插件適合需要對照設(shè)計(jì)稿取尺寸、取樣式的開發(fā)者以及希望減少交付反復(fù)確認(rèn)的設(shè)計(jì)師。生成的測量頁面是標(biāo)準(zhǔn) HTML/CSS 文件用 Chrome、Safari 等現(xiàn)代瀏覽器打開即可使用。安裝并載入 Marketch 插件整個(gè)過程分三步。第一步把項(xiàng)目拉到本地git clone https://gitcode.com/gh_mirrors/ma/marketch第二步在克隆出來的目錄里找到marketch.sketchplugin文件夾它就是插件本體內(nèi)含頁面模板 index.html 與導(dǎo)出、更新等 Cocoascript 腳本命令與快捷鍵在marketch.sketchplugin/Contents/Sketch/manifest.json中注冊。第三步雙擊marketch.sketchplugin把它載入 Sketch之后在 Sketch 的插件菜單里會(huì)出現(xiàn) Marketch 菜單含 Export as zipFile 與 Get New Version 兩條命令前者可綁定 Command Shift M 直接觸發(fā)。按任務(wù)走查四個(gè)常用操作導(dǎo)出完成后會(huì)得到一個(gè) zip 包解壓后打開其中的 index.html數(shù)據(jù)保存在同目錄的 data.js 里即可開始使用。頁面把能力組織在幾件具體事情上 測量元素的尺寸與位置在頁面左上角選擇要載入的頁面與畫板然后在中間預(yù)覽區(qū)點(diǎn)擊任意圖層。右側(cè)面板會(huì)列出該圖層的 X/Y 坐標(biāo)與寬高數(shù)值精確到像素?zé)o需再回 Sketch 里用標(biāo)尺比劃。提取圖層的 CSS 樣式選中圖層后右側(cè)面板的 Code 區(qū)域會(huì)按該圖層的填充色、圓角、寬高生成一段可直接復(fù)制的 CSS 代碼例如background: #4cd964; border-radius: 4px;。取色、記圓角這類手工活可以省掉。核對相鄰元素的間距先選中一個(gè)圖層再把鼠標(biāo)懸停到另一個(gè)圖層上頁面會(huì)以紅綠標(biāo)注實(shí)時(shí)顯示兩者之間的距離并用加號(hào)、減號(hào)區(qū)分方向。列表行距、圖標(biāo)與文字間距這類問題用這個(gè)方式核對最省事。 以 1x/2x/3x 倍率導(dǎo)出圖層右側(cè)面板底部是 Export 區(qū)域選擇倍率1x、2x、3x與格式如 png點(diǎn)擊 Export Active Layer 即可導(dǎo)出當(dāng)前選中圖層。若生成頁面時(shí)勾選了導(dǎo)出所有圖層包內(nèi)會(huì)為常用圖層附帶 0.5x 到 3x 的成套圖片圖層名以 svg 開頭的還會(huì)額外導(dǎo)出 SVG 文件。逐圖層的導(dǎo)出細(xì)節(jié)見marketch.sketchplugin/Contents/Sketch/export.cocoascript。生成的頁面長什么樣三欄布局頁面分為三欄左欄羅列頁面與畫板用來切換要查看的設(shè)計(jì)內(nèi)容中欄是設(shè)計(jì)預(yù)覽區(qū)可直接點(diǎn)擊其中圖層右欄是屬性面板集中展示位置尺寸、CSS 代碼與導(dǎo)出控件。頂部工具條另有 Show slices 開關(guān)控制切片圖層的顯示和 Unit 單位下拉框。?? 使用前需要留意的幾個(gè)坑點(diǎn)插件依賴畫板。導(dǎo)出邏輯會(huì)先檢查文件里是否存在畫板沒有畫板就無法生成測量頁面建議每個(gè)頁面或模塊都落在獨(dú)立畫板里。用命名約定控制導(dǎo)出范圍。名稱以連字符 - 開頭的頁面或畫板會(huì)被默認(rèn)跳過把草稿和參考稿這樣命名一次導(dǎo)出全部畫板時(shí)不會(huì)帶入多余內(nèi)容。先確認(rèn)單位與倍率再動(dòng)手。頁面右上角的 Unit 決定測量數(shù)值展示的單位導(dǎo)出對話框里還能選擇畫板截圖是否按 2x 出圖與團(tuán)隊(duì)約定保持一致可避免返工。快速問答支持哪些 Sketch 版本插件為 Sketch 3 及以上版本設(shè)計(jì)更高版本的兼容情況可查倉庫根目錄的CHANGELOG.md。導(dǎo)出后頁面是空的怎么辦優(yōu)先檢查當(dāng)前文件是否包含畫板這是插件運(yùn)行前提。如何導(dǎo)出 SVG將圖層重命名為以 svg 開頭導(dǎo)出圖層時(shí)會(huì)附帶輸出同名 SVG 文件。下一步在 Sketch 中載入 Marketch導(dǎo)出當(dāng)前文件先完成一次測量與一次圖層導(dǎo)出。發(fā)現(xiàn)問題或想?yún)⑴c開發(fā)時(shí)可參考倉庫根目錄的issue-template.md與contribution.md?！久赓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
Marketch 快速上手用 Sketch 插件測量設(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/marketch當(dāng)一份設(shè)計(jì)稿交付給前端時(shí)尺寸、間距、色值這些細(xì)節(jié)往往要靠人工反復(fù)核對稍不留神就會(huì)記錯(cuò)一個(gè)圓角。Marketch 把這部分核對工作挪到了瀏覽器里它是一個(gè) Sketch 插件能把當(dāng)前 Sketch 文件轉(zhuǎn)成一個(gè) HTML 測量頁面頁面上可以直接讀取每個(gè)圖層的位置、尺寸和 CSS 樣式。項(xiàng)目定位與適用人群Marketch 是一個(gè)面向 Sketch 文件的自動(dòng)化測量插件適合需要對照設(shè)計(jì)稿取尺寸、取樣式的開發(fā)者以及希望減少交付反復(fù)確認(rèn)的設(shè)計(jì)師。生成的測量頁面是標(biāo)準(zhǔn) HTML/CSS 文件用 Chrome、Safari 等現(xiàn)代瀏覽器打開即可使用。安裝并載入 Marketch 插件整個(gè)過程分三步。第一步把項(xiàng)目拉到本地git clone https://gitcode.com/gh_mirrors/ma/marketch第二步在克隆出來的目錄里找到marketch.sketchplugin文件夾它就是插件本體內(nèi)含頁面模板 index.html 與導(dǎo)出、更新等 Cocoascript 腳本命令與快捷鍵在marketch.sketchplugin/Contents/Sketch/manifest.json中注冊。第三步雙擊marketch.sketchplugin把它載入 Sketch之后在 Sketch 的插件菜單里會(huì)出現(xiàn) Marketch 菜單含 Export as zipFile 與 Get New Version 兩條命令前者可綁定 Command Shift M 直接觸發(fā)。按任務(wù)走查四個(gè)常用操作導(dǎo)出完成后會(huì)得到一個(gè) zip 包解壓后打開其中的 index.html數(shù)據(jù)保存在同目錄的 data.js 里即可開始使用。頁面把能力組織在幾件具體事情上 測量元素的尺寸與位置在頁面左上角選擇要載入的頁面與畫板然后在中間預(yù)覽區(qū)點(diǎn)擊任意圖層。右側(cè)面板會(huì)列出該圖層的 X/Y 坐標(biāo)與寬高數(shù)值精確到像素?zé)o需再回 Sketch 里用標(biāo)尺比劃。提取圖層的 CSS 樣式選中圖層后右側(cè)面板的 Code 區(qū)域會(huì)按該圖層的填充色、圓角、寬高生成一段可直接復(fù)制的 CSS 代碼例如background: #4cd964; border-radius: 4px;。取色、記圓角這類手工活可以省掉。核對相鄰元素的間距先選中一個(gè)圖層再把鼠標(biāo)懸停到另一個(gè)圖層上頁面會(huì)以紅綠標(biāo)注實(shí)時(shí)顯示兩者之間的距離并用加號(hào)、減號(hào)區(qū)分方向。列表行距、圖標(biāo)與文字間距這類問題用這個(gè)方式核對最省事。 以 1x/2x/3x 倍率導(dǎo)出圖層右側(cè)面板底部是 Export 區(qū)域選擇倍率1x、2x、3x與格式如 png點(diǎn)擊 Export Active Layer 即可導(dǎo)出當(dāng)前選中圖層。若生成頁面時(shí)勾選了導(dǎo)出所有圖層包內(nèi)會(huì)為常用圖層附帶 0.5x 到 3x 的成套圖片圖層名以 svg 開頭的還會(huì)額外導(dǎo)出 SVG 文件。逐圖層的導(dǎo)出細(xì)節(jié)見marketch.sketchplugin/Contents/Sketch/export.cocoascript。生成的頁面長什么樣三欄布局頁面分為三欄左欄羅列頁面與畫板用來切換要查看的設(shè)計(jì)內(nèi)容中欄是設(shè)計(jì)預(yù)覽區(qū)可直接點(diǎn)擊其中圖層右欄是屬性面板集中展示位置尺寸、CSS 代碼與導(dǎo)出控件。頂部工具條另有 Show slices 開關(guān)控制切片圖層的顯示和 Unit 單位下拉框。?? 使用前需要留意的幾個(gè)坑點(diǎn)插件依賴畫板。導(dǎo)出邏輯會(huì)先檢查文件里是否存在畫板沒有畫板就無法生成測量頁面建議每個(gè)頁面或模塊都落在獨(dú)立畫板里。用命名約定控制導(dǎo)出范圍。名稱以連字符 - 開頭的頁面或畫板會(huì)被默認(rèn)跳過把草稿和參考稿這樣命名一次導(dǎo)出全部畫板時(shí)不會(huì)帶入多余內(nèi)容。先確認(rèn)單位與倍率再動(dòng)手。頁面右上角的 Unit 決定測量數(shù)值展示的單位導(dǎo)出對話框里還能選擇畫板截圖是否按 2x 出圖與團(tuán)隊(duì)約定保持一致可避免返工。快速問答支持哪些 Sketch 版本插件為 Sketch 3 及以上版本設(shè)計(jì)更高版本的兼容情況可查倉庫根目錄的CHANGELOG.md。導(dǎo)出后頁面是空的怎么辦優(yōu)先檢查當(dāng)前文件是否包含畫板這是插件運(yùn)行前提。如何導(dǎo)出 SVG將圖層重命名為以 svg 開頭導(dǎo)出圖層時(shí)會(huì)附帶輸出同名 SVG 文件。下一步在 Sketch 中載入 Marketch導(dǎo)出當(dāng)前文件先完成一次測量與一次圖層導(dǎo)出。發(fā)現(xiàn)問題或想?yún)⑴c開發(fā)時(shí)可參考倉庫根目錄的issue-template.md與contribution.md?！久赓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），僅供參考