sketch設(shè)計(jì)規(guī)范框架插件FusionCool

FusionCool是阿里推出的前端設(shè)計(jì)規(guī)范框架配套的sketch插件，設(shè)計(jì)師可以通過這款插件在標(biāo)準(zhǔn)框架內(nèi)設(shè)計(jì)界面。這款插件可以直接托用組件，插件整合了設(shè)計(jì)資源，具備組件魔法編輯器、圖表編輯、導(dǎo)入Token樣式、導(dǎo)出標(biāo)注等能力，徹底提升團(tuán)隊(duì)設(shè)計(jì)效能。

安裝方法：

下載FusionCool應(yīng)用插件進(jìn)行安裝

在Sketch中運(yùn)行插件并重啟Sketch

在Sketch右側(cè)面板中將Tab切換至FusionCool，就可以開始使用了。

使用教程：

Design System的選擇

組件魔法編輯器（Magical Editor）的使用

魔法編輯器的功能介紹

魔法編輯器有三個(gè)重要的功能點(diǎn)：1，修改組件狀態(tài)    2，修改組件內(nèi)容    3，修改組件結(jié)構(gòu)

1.修改組件狀態(tài)

可通過操控狀態(tài)按鈕，或者在編輯區(qū)域直接輸入半角符號(hào)來修改組件狀態(tài)。

內(nèi)容中有浮層的組件，需要在選中狀態(tài)下，才會(huì)展開浮層內(nèi)容，如圖例：

2.修改組件內(nèi)容

在編輯區(qū)直接輸入內(nèi)容，并可插入ICON。

3.修改組件結(jié)構(gòu)

并列結(jié)構(gòu)：通過換行“enter”鍵實(shí)現(xiàn)組件的并列結(jié)構(gòu)。

樹形結(jié)構(gòu)：通過空格“tab”實(shí)現(xiàn)組件的樹形結(jié)構(gòu)。

分組：輸入符號(hào)“#”或點(diǎn)擊按鈕添加組標(biāo)簽，通過輸入半角中劃線“---”實(shí)現(xiàn)分組。

圖表編輯器的使用

1.修改圖表模版內(nèi)容

Step： 1.把Sketch編輯區(qū)上方tab切換為Fusion Cool，打開Fusion Cool 編輯器；2.選擇Charts列表；3.選擇一個(gè)圖表模版拖入Sketch畫板；4.點(diǎn)擊畫板中的圖表，右側(cè)Fusion Cool編輯區(qū)會(huì)出現(xiàn)“高級(jí)屬性配置”按鈕，單擊后在高級(jí)屬性配置彈窗中即可修改圖表模版。

2.添加/修改/刪除圖表數(shù)據(jù)

Step： 1.在Fusion Cool 編輯器高級(jí)屬性配置彈窗中，右下角是圖表數(shù)據(jù)編輯區(qū)，模版展示的是默認(rèn)數(shù)據(jù)內(nèi)容，單擊表格單元格即可修改；2.在數(shù)據(jù)行右鍵單擊，即會(huì)出現(xiàn)數(shù)據(jù)修改菜單，可以增加/刪除數(shù)據(jù)條目。

3.添加圖表輔助信息

添加參照線

Step： 1. 在Fusion Cool 編輯器高級(jí)屬性配置彈窗中，展開右側(cè)“參照線”菜單；2.在下拉列表中選擇要添加的參照線類型，編輯配置信息即可。

添加文字標(biāo)注

Step： 1. 在Fusion Cool 編輯器高級(jí)屬性配置彈窗中，展開右側(cè)“文字標(biāo)注”菜單；2.有單點(diǎn)/區(qū)間文字標(biāo)注可以選擇，單擊加號(hào)添加標(biāo)注后編輯配置信息即可。

4.對(duì)圖表進(jìn)行區(qū)域著色

坐標(biāo)系區(qū)域著色

坐標(biāo)系區(qū)域著色是對(duì)坐標(biāo)系背景進(jìn)行著色，來標(biāo)示特定坐標(biāo)系區(qū)域。

Step： 1. 在Fusion Cool編輯器高級(jí)屬性配置彈窗中，展開右側(cè)“區(qū)域著色”菜單；2. 在“坐標(biāo)系區(qū)域著色”中單擊加號(hào)后編輯配置信息即可。

數(shù)據(jù)圖形區(qū)域著色

數(shù)據(jù)圖形區(qū)域著色是對(duì)折線圖中的線、柱狀圖中的柱進(jìn)行著色，來標(biāo)示特定數(shù)據(jù)內(nèi)容。

Step： 1. 在Fusion Cool編輯器高級(jí)屬性配置彈窗中，展開右側(cè)“區(qū)域著色”菜單；2. 在“數(shù)據(jù)圖形區(qū)域著色”中單擊加號(hào)后編輯配置信息即可。