Figma 這款設(shè)計(jì)工具進(jìn)步真的超級(jí)快，在 Sketch 當(dāng)中很多進(jìn)階的、復(fù)雜的功能，在 Figma 當(dāng)中實(shí)現(xiàn)起來(lái)像呼吸一樣簡(jiǎn)單。以下 Figma 使用技巧來(lái)自UI設(shè)計(jì)師 Danny Sapio 分享，希望能幫到大家。
1、環(huán)形進(jìn)度條設(shè)計(jì)方法
不清楚是不是所有人都知道這個(gè)方法，但是 這應(yīng)該是我這輩子最快的環(huán)形進(jìn)度條的設(shè)計(jì)體驗(yàn)，只要使用弧形工具，就可以快速拖拽出美觀而均勻合理的效果。
2、使用縮放工具避免出現(xiàn)變形
縮放工具在設(shè)計(jì) UI 的時(shí)候也相當(dāng)實(shí)用，只需要選擇你要縮放的元素和內(nèi)容，然后在鍵盤(pán)上單擊「k」 鍵，就可以快速拖動(dòng)縮放，并且確保被縮放的元素是像素完美的。
在以往我總是不愿意使用縮放功能，因?yàn)榭倳?huì)因?yàn)榉N種原因?qū)е虏糠挚s放出問(wèn)題并為之進(jìn)行調(diào)整。在 Figma 中使用縮放功能則可以完全保證比例，無(wú)需返工。
3、將對(duì)象拖出框架外并讓它還在容器中
當(dāng)你按住空格鍵并且將某個(gè)對(duì)象拖出框架外的時(shí)候，能夠讓它依然處于這個(gè)容器內(nèi)只是不可見(jiàn)，當(dāng)然， 你還可以關(guān)閉「Clip contents」 選項(xiàng)，那么你就能夠讓它在容器外也可見(jiàn)。出來(lái)這種方法之外，你還可以使用 「cmd/ctrl + Y」 在不可見(jiàn)的情況預(yù)覽到它的外輪廓。
4、快速整理、調(diào)整并管理表格元素
當(dāng)你選擇一組陣列中多個(gè)元素之后，通過(guò)單擊角落的網(wǎng)格圖標(biāo)，就能對(duì)他們進(jìn)行快速的整理，比如讓元素之間的距離相等，還可以通過(guò)拖動(dòng)快速地調(diào)整間距。
5、快速重復(fù)執(zhí)行上一個(gè)操作
可以使用 「cmd/ctrl + D」 復(fù)制你的上一個(gè)操作，并且 「cmd/ctrl + D」 這個(gè)操作還將會(huì)復(fù)制相關(guān)的對(duì)象/框架和任何操作中涉及到的元素。
6、使用吸色工具快速預(yù)覽顏色
當(dāng)你點(diǎn)擊吸色工具「i」之后，就可以吸取特定的顏色，但是如果你按住 i 按鍵不動(dòng)的時(shí)候，并且移動(dòng)光標(biāo)，就能夠預(yù)覽顏色而不是取色。
7、快速解鎖所有對(duì)象
使用 「cmd/ctrl + /」是一個(gè)可以幫你節(jié)省大量時(shí)間的快捷鍵，它可以調(diào)用多個(gè)不同的快捷操作，而我用的最多的，是用它一次解鎖所有的對(duì)象和元素，以及修改字體。
8、快速為占位符圖形添加圖片
使用 「cmd/ctrl + shift + k」的組合鍵，能夠快速為占位符或者框架之類(lèi)的元素添加一堆圖片。
9、空格鍵的各種騷操作
當(dāng)你在進(jìn)行選中多個(gè)元素的操作的時(shí)候，你可以用光標(biāo)拉出一塊區(qū)域，這個(gè)時(shí)候按住空格鍵就能拖動(dòng)你的選中區(qū)塊，這個(gè)時(shí)候就能帶著這個(gè)區(qū)域來(lái)選中文件，移動(dòng)過(guò)程中選中一大堆元素。
當(dāng)你拉出一個(gè)圖形之后，這個(gè)時(shí)候按住空格鍵，就能夠順便移動(dòng)這個(gè)元素了。
除此之外，你還可以在拖動(dòng)元素的時(shí)候按住空格鍵，防止元素在框架或者自動(dòng)布局當(dāng)中自動(dòng)嵌套到其中！
10、Content Reel + Unsplash
Content Reel + Unsplash 是兩個(gè)必備的插件，使用 Content Reel 能夠快速幫你生成各種占位符，而不是讓你的 UI 界面中每個(gè)用戶(hù)都是「無(wú)名氏」，當(dāng)然，它能生成的占位符有很多類(lèi)型，名字、頭像、ID、文本段落等等全都有。Unspalsh 則是著名的免費(fèi)圖庫(kù)的插件，能夠?yàn)槟闾峁└哔|(zhì)量的圖庫(kù)。
11、超好用的自動(dòng)行高
如果你的文本行高看起來(lái)參差不齊，而你也本身也暫時(shí)沒(méi)打算設(shè)置某個(gè)特別的行高參數(shù)，那么你只需要在行高中輸入 auto 或者刪除其中的參數(shù)并且點(diǎn)擊回車(chē)，就能夠設(shè)置成為自動(dòng)行高了！
12、好用的斷點(diǎn)控制
使用這個(gè) Breakpoints 插件，你可以像 CSS Flexbox 一樣在你的設(shè)計(jì)文檔當(dāng)中控制樣式和斷點(diǎn)，可以輕松地將它們插入到自適應(yīng)框架當(dāng)中，并且在你拖動(dòng)邊緣的時(shí)候，讓元素樣式靈活自然地自適應(yīng)。
13、將狀態(tài)標(biāo)簽添加到框架中
當(dāng)你同客戶(hù)、其他設(shè)計(jì)師或者團(tuán)隊(duì)中其他的相關(guān)者在 Figma 當(dāng)中協(xié)同合作的時(shí)候，你可能在溝通過(guò)程中，很難表述不同設(shè)計(jì)狀態(tài)。而 Figma Tags 這個(gè)插件能夠幫你為界面元素快速添加狀態(tài)，并且更新，因?yàn)橛凶銐蚯逦臓顟B(tài)標(biāo)注，確保你無(wú)需向其他人進(jìn)行復(fù)雜的解釋?zhuān)疫@款插件本身就有非常完善的預(yù)設(shè)狀態(tài)。
14、設(shè)計(jì)時(shí)「隱身」的方法
設(shè)計(jì)師通常都會(huì)有這樣的一種焦慮，就是不希望別人看到你的設(shè)計(jì)過(guò)程。當(dāng)你在 Figma 中設(shè)計(jì)的時(shí)候，保持在線(xiàn)協(xié)作狀態(tài)下，別人是可以實(shí)時(shí)看到你的設(shè)計(jì)過(guò)程和狀態(tài)的，如果你想「隱身」，斷開(kāi) Wifi 即可。
我知道這聽(tīng)起來(lái)很奇怪，但是作為一款強(qiáng)調(diào)協(xié)同的 UI 設(shè)計(jì)工具，只有當(dāng)你斷網(wǎng)脫機(jī)的時(shí)候，才不會(huì)在設(shè)計(jì)的時(shí)候，看到別人的鼠標(biāo)光標(biāo)在旁邊瞎晃，同樣這樣才能讓你不會(huì)被 Youtube 或者其他的信息來(lái)干擾你。
只要保證在關(guān)閉文檔之前聯(lián)網(wǎng)，就不會(huì)丟失你的設(shè)計(jì)進(jìn)度，此外你還可以將文檔保存成離線(xiàn)脫機(jī)格式 (.fig)，因?yàn)?Figma 一般不會(huì)保存本地副本。
15、一鍵刪除背景
這幾乎是目前設(shè)計(jì)軟件中的標(biāo)配功能了。之前我會(huì)把圖片拖到 PS 中用鋼筆或者魔棒工具來(lái)刪除背景，不過(guò)我后來(lái)發(fā)現(xiàn)在 Figma 當(dāng)中使用這個(gè) RemoveBG 插件 就能幫你一鍵搞定問(wèn)題。
16、創(chuàng)建私人樣式和組件
為了防止 Figma 直接覆蓋你創(chuàng)建的樣式和組件，你可以在命名的時(shí)候加入一些前綴標(biāo)識(shí)，將這些樣式變?yōu)樗饺说臉邮健?/p>
在組件名稱(chēng)前添加 「 . 」和 「 _ 」這樣的符號(hào)，就能做到這一點(diǎn)，比如「 _Component Name 」這樣，在發(fā)布過(guò)程中，系統(tǒng)就會(huì)跳過(guò)這些樣式和組件，并且在「Assets」面板和「庫(kù)」當(dāng)中，將這些樣式和文件標(biāo)注為「Private to this file」，也就是專(zhuān)用于這個(gè)文檔的樣式和組件。
17、在 Figma 當(dāng)中聊天
雖然有時(shí)候你通過(guò)別的實(shí)時(shí)溝通工具（比如微信群）會(huì)更加習(xí)慣，但是你的信息可能會(huì)被別人的信息給埋沒(méi)掉，這個(gè)時(shí)候不妨使用 Figma Chat 這個(gè)插件，直接實(shí)現(xiàn)在 Figma 當(dāng)中直接同你的協(xié)作設(shè)計(jì)師進(jìn)行溝通。
18、一鍵獲得同色系的所有顏色
我通常會(huì)使用 Material Color Tool 來(lái)獲得可訪(fǎng)問(wèn)性良好的同色系配色，不過(guò)最近我發(fā)現(xiàn) Color Shades 插件也可以做到這個(gè)事情，效果也同樣不錯(cuò)。
19、為組件的一側(cè)增加筆觸投影
令人沮喪的是，在 Figma 當(dāng)中似乎無(wú)法為元素特定的一側(cè)增加筆觸，這個(gè)時(shí)候我會(huì)使用投影來(lái)實(shí)現(xiàn)這個(gè)效果，關(guān)閉模糊，然后按照下方的參數(shù)進(jìn)行設(shè)置：
-
y: 1 (bottom)
-
y: -1 (top)
-
x: 1 (right)
-
x: -1 (left)
當(dāng)然，你還可以調(diào)整參數(shù)讓筆觸出現(xiàn)在另外一邊，如果你希望效果更明顯一點(diǎn)，可以讓參數(shù)大于1即可。
20、四舍五入到最接近的整數(shù)
Round >> All 是一個(gè)最近才出現(xiàn)的一個(gè)插件，當(dāng)你在按照比例縮放（快捷鍵 k）某些組件的時(shí)候，最后會(huì)發(fā)現(xiàn)它的實(shí)際尺寸是小數(shù)而非整數(shù)，這個(gè)時(shí)候你需要做的，就是使用「cmd/ctrl + A」全選所有畫(huà)板，然后運(yùn)行 Round >> All 這個(gè)插件，就能讓所有的組件參數(shù)四舍五入，確保像素完美。
21、一鍵實(shí)現(xiàn)等軸測(cè)效果
如今在展示 UI 的時(shí)候，使用等軸測(cè)效果是一個(gè)非常流行的方式，但是真正去調(diào)整可能會(huì)非常費(fèi)時(shí)費(fèi)力，這個(gè)時(shí)候，如果你使用 Isometric 插件，簡(jiǎn)單設(shè)置參數(shù)，就可以一鍵實(shí)現(xiàn)效果。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。