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