sketch設計稿轉代碼插件imgcook

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

插件介紹：

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

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

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

imgcook特色：

所見即所得

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

智能化

全鏈路采用計算機視覺、深度學習等智能化手段依次去除對設計稿的約束，智能生成代碼。

精度還原

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

實時保證代碼和視覺的高度還原

DSL多樣

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

高可維護性

DOM 嵌套合理、相對定位布局、文本自適應

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

使用流程：

1. 下載并安裝 Sketch 插件

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

阿里內部用戶登錄后可直接使用 alicdn 圖片空間。

2. 導出數(shù)據(jù)

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

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

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

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

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

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

更新日志：

2019-03-08

Sketch 插件 v1.6.8

修復圖層坐標溢出截圖不準問題

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

修復部分情況下圖層 Rect 精度問題