用好藍湖，提升團隊協作效率，藍湖指北，教你如何用好藍湖。本期【藍湖指北】如約而至～
Sketch 作為一款輕量級的矢量設計工具，憑借其強大的界面設計功能，被大多數 UI 設計師所使用，日漸成為產品研發團隊中不可或缺的一款重要生產工具。
這個工具有多重要呢，可以說：只要設計師不加班，整個團隊都能早下班。

加班，是整個互聯網行業會呼吸的痛，以提升產品設計協作效率為己任的藍湖，為使用 Sketch 的設計師們出品了【藍湖 Sketch 插件】。有人說，它為創意插上翅膀，有人說，它讓設計效率原地起飛。
怎么用好【藍湖 Sketch 插件】呢，且聽湖湖為您分解：
設計圖一鍵上傳
支持多種界面
設計圖樹狀連線
設計圖自動標注
切圖一鍵下載
藍湖【設計規范云】
>
設計圖一鍵上傳，【項目/團隊】要拎清
下載【藍湖 Sketch 插件】，安裝之后重啟 Sketch，即可在 Sketch【Plugins】中通過【藍湖】上傳設計圖。
下載地址：https://lanhuapp.com/mac（建議在 PC 端打開）
設計圖上傳之前需要選擇設計圖對應的團隊和項目，這一步看似簡單的操作，背后卻是團隊管理的學問。

Tips：
上傳設計圖之前請梳理好工作的內容，以【項目】區分，按不同內容創建不同項目。比如 Banner 設計、官網設計、活動物料設計等，不僅能高效管理自己的工作內容，也便于團隊中的其它成員查看。
根據整個團隊的工作流程，創建不同的團隊和項目，以收錄相關的設計圖，及時更新，整個團隊的工作進度一目了然。

支持多種界面，【當前設計】要看清
選擇要上傳的設計圖，或者一鍵上傳所有設計圖；插件內 【當前設計】是指當前設計圖的大小，根據設計圖大小選擇對應倍數。
確定當前設計基于的設備是 iOS、 Android 還是 Web，再確定現在的設計圖是基于幾倍設計的，最后選擇和設計圖匹配的設備和倍數。

Tips：
iPhone、iPad、iWatch 這三種設備的界面設計 屬于 —— iOS；安卓系統的界面設計 屬于 —— Android；網頁類型的界面設計 屬于 —— Web。
375 x 667， 屬于 iOS 1x；750 x 1334，屬于 iOS 2x；1920 x 1080, 手機建議選 Android-xxhdpi；網頁選 Web-1x。
Web 類型：1x , 是常用尺寸，大家做的網頁一般都是選 1x ；2x 是指為特定的屏幕（4k 屏）設計的尺寸，通常該尺寸會是正常網頁的 2 倍。

設計圖樹狀連線，【連線 L 】要標清
很多 UI 設計師的設計圖做好之后，標注說明圖片和產品的邏輯，需要耗費大量時間，每一次修改都意味著需要再次耗費同樣的時間做圖片說明。
用【藍湖 Sketch 插件】將設計圖上傳之后，進入藍湖的【設計】頁，點擊上方的【連線 L 】圖標，進入設計圖連線模式，可將設計圖隨意拖動擺放，繪制頁面間跳轉邏輯連線，輕松、直觀展現產品邏輯。

自動標注，設計元素和代碼時時更新
設計元素設計圖通過【藍湖 Sketch 插件】上傳之后，即可在設計圖詳情頁查看設計圖每一個元素的顏色、大小、間距、字號等信息，團隊內的成員可以隨時查看，并可直接復制相關代碼；
如果設計圖有修改、更新，藍湖也能自動添加最新版本。

切圖一鍵下載，【切圖類型】要搞清
通過【藍湖 Sketch 插件】標記需要生成的切圖，上傳設計圖后，在設計圖詳情頁，工程師即可一鍵下載多倍數切圖文件，支持 JPG、PNG、SVG、WebP 格式。
Step1：標記切圖

以眾多設計師推薦的【 B.切片類型切圖】為例，選中需要標記為切圖的圖標，點擊 Sketch 右下角的 【 Make Exportable 】，然后再點擊 Sketch 右下角的【切刀】圖標，即可標記切圖。
或者使用快捷鍵【S】，鼠標會顯示成切刀工具，此時鼠標右鍵需要標記為切圖的圖標，即可標記切圖。

Step2：自定義切圖尺寸
當設計圖上的切圖尺寸不合適的時候，可以自定義切圖尺寸。
選中需要自定義尺寸的圖標，在右上角的圖標尺寸欄中，輸入合適的尺寸，然后再將該圖標的切圖圖層跟原始圖層合并成一個分組，即可成功自定義切圖。
Step3：切圖導出 SVG 格式
插件右下角【切圖導出 SVG 】，勾選后上傳的切圖會自動生成 SVG 格式。
需要被切圖層是矢量圖層, 如形狀圖層和文本圖層，則不能輸出 SVG 格式。
個別情況下有描邊的矢量圖標會導致導出錯誤，請把描邊轉為路徑后上傳。
如果不需要使用 SVG 資源的時候，建議關閉 SVG 導出。
Tip：
如果你標記的切圖有背景圖層，而此時你需要切圖是透明背景，此時選中 Slice 層后，再在右側菜單中勾選【 Export group contents> 】這個選項，即可得到是透明背景的切圖。

藍湖【設計規范云】，帶你起飛
除了【藍湖 Sketch 插件】 ，我們還針對 Sketch 推出了藍湖【設計規范云】。
下載地址：https://lanhuapp.com/dsm（建議在 PC 端打開）
在藍湖【設計規范云】添加顏色、文本樣式、圖層樣式、圖標、組件等元素之后，團隊成員即可直接使用添加好的元素。

藍湖還提供下載 Element、Ant-Design 組件庫，無須上傳，就能直接使用。

藍湖【設計規范云】幫助互聯網團隊同步設計規范，保持設計一致性，提高設計效率。
設計師們做圖有了參考、元素有了出處、稿件有了歸屬，大大提升設計效率，設計師不加班，團隊早回家。

有人說設計是一門藝術，有人說設計是一門技術，湖湖認為，設計是用嫻熟的技術成就藝術。
【藍湖 Sketch 插件】?藍湖【設計規范云】，正努力成為設計師們那一對隱形的翅膀，帶你飛過絕望、走出迷茫，天天都能一稿過！
?
用藍湖，不加班~
藍湖網址：http://LanhuApp.com
藍湖，高效的產品設計協作平臺

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的怎么用class引入svg_【蓝湖指北】走向设计巅峰，从蓝湖 Sketch 插件开始，用它！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。