sketch設(shè)計(jì)稿轉(zhuǎn)代碼插件imgcook

imgcook是阿里的程序員提供的一款開源sketch插件，這款插件可以幫助設(shè)計(jì)師們將自己的設(shè)計(jì)稿一鍵生成可維護(hù)的 UI 視圖代碼。這款插件的誕生真的讓很多前端都沒活路了，imgcook能切實(shí)提高開發(fā)的開發(fā)效率，并助力開發(fā)、設(shè)計(jì)師、測試的高效協(xié)作。

插件介紹：

使用圖像生成代碼的時(shí)候，我們關(guān)心的不僅僅是生成 UI 的還原度，也關(guān)心生成的代碼是否合理、可維護(hù)，如果生成的代碼屬于不可讀不可維護(hù)的快餐代碼，開發(fā)使用上再對其進(jìn)行二次開發(fā)就會(huì)顯得極為艱難，而往往后者的難度相比前者更甚，如果需要在生產(chǎn)環(huán)境中使用，這個(gè)問題就無法避免。

對此，imgcook 的定位就在于解決 UI 還原以及生成可維護(hù)代碼的問題。

對于可維護(hù)性代碼的問題，imgcook 會(huì)對還原后的 UI 在代碼層面上生成目前使用比較廣泛的 Flexbox 布局以及相對定位布局，在一些自定義的命名上（比如樣式命名），imgcook 也會(huì)根據(jù)開發(fā)者的習(xí)慣生成更加人性化的命名。

imgcook特色：

所見即所得

一鍵還原，上手即用，只有妙不可言

智能化

全鏈路采用計(jì)算機(jī)視覺、深度學(xué)習(xí)等智能化手段依次去除對設(shè)計(jì)稿的約束，智能生成代碼。

精度還原

一鍵智能還原與豐富的操作面板

實(shí)時(shí)保證代碼和視覺的高度還原

DSL多樣

自定義編寫代碼模板支持小程序、React、H5、Weex Rax 等，外部暫時(shí)不支持自定義代碼模板。

高可維護(hù)性

DOM 嵌套合理、相對定位布局、文本自適應(yīng)

ClassName語義化、循環(huán)可自動(dòng)識別

使用流程：

1. 下載并安裝 Sketch 插件

在網(wǎng)站首頁下載 Sketch 版插件，解壓文件后會(huì)得到 imgcook.sketchplugin 插件以及試驗(yàn)田試玩文件，雙擊安裝 Sketch 插件，點(diǎn)擊“OK”即可。需要注意的是以往 Sketch 軟件官方的升級會(huì)有一些不兼容舊版本設(shè)計(jì)稿的情況出現(xiàn)，相應(yīng)得部分API也會(huì)發(fā)生變化，imgcook 也會(huì)只支持最新版本的 Sketch，請確保你的 Sketch 版本是最新的。

阿里內(nèi)部用戶登錄后可直接使用 alicdn 圖片空間。

2. 導(dǎo)出數(shù)據(jù)

2.1 打開要還原的 Sketch 設(shè)計(jì)稿，如果無設(shè)計(jì)稿，可以在 網(wǎng)站首頁 下載試用文件。

2.2 一般前端都是模塊化方式開發(fā)，強(qiáng)烈推薦 一個(gè)模塊一個(gè)模塊 進(jìn)行還原生成代碼，所以期望要還原的模塊在一個(gè)分組內(nèi)即可，對分組名沒有要求。更多設(shè)計(jì)稿注意點(diǎn)請看這里。

2.3  前端判斷如果實(shí)現(xiàn)代碼中有多圖層需要合并成一個(gè)圖片的，在分組名后添加 '合并' 即可。比如 這里的 “GOOD” 、 “！”、“—”、“專屬美味”， 雖然設(shè)計(jì)上是 多個(gè)目錄的圖層，但前端實(shí)現(xiàn)上可以直接合成一張圖片。

2.4  選中某分組 -> sketch 的 Plugins -> imgcook -> 導(dǎo)出數(shù)據(jù) ；或者 選中某分組 + 快捷鍵 ⇧⌘C

ps: 內(nèi)部用戶請使用域賬號登錄，好處是生成的圖片可直接上 alicdn

2.5 然后出現(xiàn)彈窗，點(diǎn)擊“去粘貼” -> 自動(dòng)打開瀏覽器 -> command + V 粘貼即可。

更新日志：

2019-03-08

Sketch 插件 v1.6.8

修復(fù)圖層坐標(biāo)溢出截圖不準(zhǔn)問題

修復(fù)部分情況 Mask 圖層規(guī)則失效問題

修復(fù)部分情況下圖層 Rect 精度問題