使用效果

?

?

為什么要使用它？

可以幫助前端高度還原設(shè)計(jì)稿，減少設(shè)計(jì)師和前端之間不必要的溝通，比如字體大小、顏色、模塊之間的行距等。自動(dòng)生成代碼也可以提高前端生產(chǎn)率。

設(shè)計(jì)步驟1：處理設(shè)計(jì)材料

設(shè)計(jì)師可以在后臺(tái)上傳設(shè)計(jì)素材，上傳設(shè)計(jì)素材的團(tuán)隊(duì)中的設(shè)計(jì)同學(xué)可以使用插件共享一套設(shè)計(jì)素材，方便設(shè)計(jì)規(guī)范的統(tǒng)一。?

從設(shè)計(jì)稿生成代碼時(shí)，統(tǒng)一標(biāo)準(zhǔn)化的設(shè)計(jì)稿可以使生成的代碼更易于維護(hù)。

1.根據(jù)目錄命名

根據(jù)設(shè)計(jì)素材的官方文檔，命名，目錄會(huì)根據(jù)命名進(jìn)行拆分。

2. 分組調(diào)整設(shè)計(jì)稿，使用插件分組

這里使用的是組協(xié)議。文件將首先被分組，然后添加組協(xié)議。生成代碼時(shí)，會(huì)根據(jù)#group#生成嵌套結(jié)構(gòu)。生成的代碼結(jié)構(gòu)是自己定義的嵌套結(jié)構(gòu)，但也可以自動(dòng)生成更合理的嵌套結(jié)構(gòu)。?

因?yàn)樵O(shè)計(jì)者比較熟悉，所以設(shè)計(jì)者做這個(gè)操作就會(huì)更加熟練。不過(guò)有一個(gè)問(wèn)題就是他需要了解前端代碼的層次結(jié)構(gòu)。這個(gè)操作用得不多。如果沒(méi)有多余的層，自動(dòng)生成的結(jié)構(gòu)比較合理，所以一般不使用。?

使用插件合并圖像

我們?cè)谠O(shè)計(jì)視覺(jué)稿的時(shí)候，一張圖片會(huì)由很多層組成，但是在前端代碼中，卻要求使用一張圖片，比如下載這個(gè)圖標(biāo)。提供了設(shè)計(jì)稿協(xié)議，允許您在多層組成的文件夾中添加#merge#合并圖像標(biāo)簽，以便導(dǎo)出時(shí)生成單個(gè)圖像。?

3.設(shè)置類名

這是為了響應(yīng)開(kāi)發(fā)需求而添加的。向圖層添加語(yǔ)義名稱。前端可以作為類名。這對(duì)于設(shè)計(jì)師來(lái)說(shuō)更容易理解。我們的組件基本上都會(huì)添加類名，這樣在使用這些材質(zhì)進(jìn)行設(shè)計(jì)時(shí)就不需要添加更多了。?

您還可以添加類名前綴等。

4.設(shè)置導(dǎo)出圖片格式

根據(jù)設(shè)計(jì)稿的高級(jí)標(biāo)記規(guī)范設(shè)置圖像導(dǎo)出格式。這個(gè)我們?cè)O(shè)計(jì)師用的比較多，對(duì)在線頁(yè)面的圖片格式有要求。

第二步：上傳設(shè)計(jì)材料

根據(jù)文檔創(chuàng)建設(shè)計(jì)組并上傳文件。

步驟 3：使用設(shè)計(jì)材料設(shè)計(jì)頁(yè)面

上傳素材后，需要在設(shè)置中切換到自己的設(shè)計(jì)組，然后可以直接拖進(jìn)去使用。如果沒(méi)有更新sketch標(biāo)注插件，可以右鍵重新加載。?

在設(shè)計(jì)頁(yè)面時(shí)，設(shè)計(jì)稿也會(huì)按照上面處理設(shè)計(jì)素材的方式進(jìn)行處理。

第四步：使用插件生成模塊

?

設(shè)計(jì)完成后，可以解析設(shè)計(jì)稿并生成鏈接，并將鏈接發(fā)送到前端。

第五步：將模塊交付前端使用

前端打開(kāi)連接，可以查看代碼。

研發(fā)步驟

將編輯器中的代碼復(fù)制或?qū)С龅奖镜仨?xiàng)目。?

官方推薦使用cli，通過(guò)命令行直接將生成的代碼導(dǎo)入到項(xiàng)目中。

使用了哪些功能？插件設(shè)計(jì)素材管理功能

它支持用戶上傳自己的設(shè)計(jì)素材，非常適合有自己的設(shè)計(jì)規(guī)范和設(shè)計(jì)組件的團(tuán)隊(duì)。一方面方便設(shè)計(jì)協(xié)作，另一方面可以規(guī)范和統(tǒng)一團(tuán)隊(duì)的設(shè)計(jì)規(guī)范。?

在代碼生成方面，開(kāi)發(fā)者需要的圖層標(biāo)簽可以在 時(shí)添加，比如類名前綴、圖片格式等，團(tuán)隊(duì)中的多個(gè)設(shè)計(jì)者在設(shè)計(jì)UI時(shí)不需要關(guān)心這些。 UI設(shè)計(jì)完成后導(dǎo)出，生成的代碼將有統(tǒng)一規(guī)范的類名前綴和期望的圖像格式。?

也就是說(shuō)，設(shè)計(jì)素材的管理能力進(jìn)一步規(guī)范了代碼生成的設(shè)計(jì)輸入。同時(shí)，如果生成代碼有類名前端、圖片格式等定制化需求，可以在 時(shí)以最小的成本統(tǒng)一進(jìn)行圖層標(biāo)注。 。

插件設(shè)計(jì)稿標(biāo)記功能

導(dǎo)出設(shè)計(jì)稿時(shí)，默認(rèn)是png圖片，我們期望是svg格式；另外，前端同學(xué)希望導(dǎo)出的代碼類名帶有業(yè)務(wù)相關(guān)的前綴；在某些場(chǎng)景下存在無(wú)法解決的問(wèn)題，例如由多層組成的背景圖像。該層需要使用提供的#merge#協(xié)議手動(dòng)標(biāo)記，然后可以導(dǎo)出為圖像等。?

一般來(lái)說(shuō)，一些自動(dòng)生成代碼時(shí)無(wú)法滿足我們需求的場(chǎng)景，可以通過(guò)使用設(shè)計(jì)稿的高級(jí)標(biāo)記規(guī)范手動(dòng)標(biāo)記設(shè)計(jì)稿來(lái)解決，從而在這些場(chǎng)景下生成高可維護(hù)性。代碼。?

更常用的標(biāo)記協(xié)議包括：

?

?

代碼導(dǎo)出能力

從編輯器復(fù)制或?qū)С龃a。

介紹一下團(tuán)隊(duì)

如果您想讓您的團(tuán)隊(duì)使用D2C能力，但不知道如何介紹sketch標(biāo)注插件，我們?yōu)槟鷾?zhǔn)備了介紹文案和PPT，快來(lái)領(lǐng)取吧~?

?

如有侵權(quán)請(qǐng)聯(lián)系刪除！