今天分享的figma在日常工作中經(jīng)常使用，簡單干燥的總結(jié)，希望我們的效率能大大提高。https://js.design/special/figma/

01.圖標(biāo)繪制中的小技巧

我們拿「V」icon舉個例子，先來看看常規(guī)繪制步驟

第一步：先畫矩形；第二步：然后旋轉(zhuǎn)角度.再復(fù)制一個.水平旋轉(zhuǎn)；第三步:對齊后給圓角

此時發(fā)現(xiàn)有點太大，需要調(diào)整高度

問題很明顯，調(diào)整高度(H)學(xué)位結(jié)束后，我們必須進行對齊調(diào)整。如果我們?nèi)匀挥X得不夠精致，我們必須重復(fù)前面的步驟

效率不高，特別煩人，就這么簡單icon來回調(diào)整幾分鐘

如果你像我一樣做3755@圖1倍，圖標(biāo)厚度為1.5像素，這種情況下來回對齊真的會考驗?zāi)愕南袼匮劬?/p>

事實上，這個問題是我們在繪制之前沒有考慮過，比如圖標(biāo)的適應(yīng)場景，以及是否會調(diào)整尺寸

然后我們來看看橙心是如何避免這種情況的

第一步：先畫矩形；第二步：復(fù)制向上旋轉(zhuǎn)；第三步：整體向上旋轉(zhuǎn)，給圓角

或者上面的問題，需要調(diào)整高度

對比兩步，前者向上縮放，后者向下縮放

以下操作步驟不手動調(diào)整對齊，除了隨意調(diào)整高度也可以隨意調(diào)整寬度，自由度會更高

已經(jīng)畫完了，想避免不調(diào)整對齊怎么操作？

假設(shè)第一種繪制問題現(xiàn)在很高，我們可以水平翻轉(zhuǎn).垂直翻轉(zhuǎn)，此時你調(diào)整高度沒有問題，但要調(diào)整寬度你必須（水）+垂)調(diào)回去

問題就像一個洞，一旦出現(xiàn)就要找到補救的方法，所以一開始就要考慮如何避免

綜上所述，在繪制圖標(biāo)之前，我們需要考慮三個問題

1.繪制步驟的順序

2.使用場景

3.是否需要高度.寬度調(diào)整

如何提高效率，就在這些不經(jīng)意的小細(xì)節(jié)中

02.對齊

還是375@在1倍圖下，經(jīng)常會遇到0.5px，比如下面的情況

點擊底部對齊是不確定的。你覺得我手動調(diào)整對齊有點傻嗎？

這里只需要把手「對齊像素」關(guān)閉，使用快捷鍵：S+C+逗號，然后點擊底部對齊，速度更快

例如，在這種情況下，實際間距為1.5px，但是你看操作面板是顯示2px，數(shù)據(jù)對不起怎么辦？手動調(diào)整也是不確定的。

這里也是一把「對齊像素」關(guān)閉，然后手動輸入一個值進去，再去看看是一致的。

例如：0.5px的分割線

一開始沒怎么注意，直接畫完就在劇中.底部對齊，如果不放大仔細(xì)看，根本找不到?jīng)]有對齊

方法也是如此「對齊像素」關(guān)閉它，然后去底部對齊它。你會發(fā)現(xiàn)它這次靠近底部。

上面提到的圖標(biāo)技巧與這種方法相匹配nice

如何提高效率意味著每一個細(xì)節(jié)都不容忽視

圖標(biāo)分類命名規(guī)范03

組件命名的方式就像一個子，一圈一圈，也許這里每個人的習(xí)慣都會不一樣，所以命名方式也會不一樣

這里簡單分享一下橙心的命名方法

當(dāng)我們建立規(guī)范時，我們通常有一個習(xí)慣，就是先歸類，顏色.圖標(biāo).等等，比如騰訊的這種方式

讓人看起來很實用.干凈.規(guī)范

這里拿語雀APP命名使用場景的圖標(biāo)

確定大類后，根據(jù)大類，Tab欄目分為小類，如語雀的Tab欄：小記.文檔.消息.我的

這一步的命名，如：小記/搜索.小記/消息

繼續(xù)下去可以分為功能模塊和子頁面進行延伸，小記/搜索/刪除

看完之后，我發(fā)現(xiàn)我不知道如何命名組件，所以記住標(biāo)題中的兩個字「歸類」

思考一個問題：如何對組件進行分類，然后為自己提供方便？如果你想理解這個問題，試試吧

不一定說規(guī)范要做多完整.多么驚艷，能給你多么驚艷，能給你多么驚艷。.給團隊帶來效率是一個很好的標(biāo)準(zhǔn)

當(dāng)然，橙心并不一定適合所有人.所有的項目團隊都能給我?guī)硇?/p>

如何提高效率，做事要形成自己的方式方法