提示：更多資源文章可以訪問我的 Figma 中文網(wǎng)：https://figmacn.com

3…2…1！我整理了一些最新和最方便的 Figma 快捷方式和技巧，幫助你節(jié)省時間，讓你設(shè)計快如閃電（譯者注：不是《瘋狂動物城[1]》里的閃電）。

復(fù)制圖層

要復(fù)制圖層，只需要選擇圖層并按住 Option（Windows 下是 Alt，下同） 拖動就可以復(fù)制一個出來。之后，你就可以使用 Cmd + D 進行更多的復(fù)制。

重置圖層名稱

如果您想重置文本層的名稱，只需刪除舊名稱并按回車——該圖層將自動使用文本內(nèi)容為圖層名。

有趣的的圓形

畫一個圓形，用 Arc 工具把它變成一些很酷的環(huán)形進度條。

快速設(shè)置不透明度

選中圖層，使用鍵盤上的數(shù)字來快速更改所選對象的不透明度，快速按下兩個數(shù)字可以設(shè)置更精確的值。

復(fù)制樣式

使用 Option + Shift + C 復(fù)制所選圖層的樣式，然后 Option + Shift + V 將其粘貼到另一個對象上。

復(fù)制選定的屬性

你只需在右側(cè)屬性面板中點擊選中某個屬性（按下 Shift 可以選中多個），然后用 Cmd + C 復(fù)制，再用 Cmd + V 粘貼到另一個對象上，想復(fù)制任何屬性都可以這樣做。

拖拽改變屬性值

將鼠標懸停在屬性面板中的屬性名（按住 Option 也可以放在輸入框之上）上，按下鼠標并左右拖動可以平滑地更改屬性值。此時如果鼠標往上滑動，光標變寬，滑動很少則屬性值變化很大；鼠標往下滑動，光標變窄，滑動很多屬性值變化很小。你可以上下移動鼠標來調(diào)整精度。

智能選擇

一次選擇多個元素，并拖拽它們之間的線來調(diào)整間距，你還可以單擊對象中心的圓圈并拖動它來重新定位元素。

移動選擇區(qū)域

用鼠標在畫布上拖動選中一塊區(qū)域，此時不要松手，按住空格鍵并拖動鼠標以在畫布中重新定位選擇區(qū)域。

Figma 性能

在菜單中(可以使用 Cmd + / 訪問)，搜索“Resource Use”，查看 Figma 的資源使用狀態(tài)。

你用了哪些快捷鍵？

我們來玩一個快捷鍵游戲！按下快捷鍵 Ctrl + Shift + ? 看看你最近使用了哪些快捷方式。那些沒有變藍色的就是還沒用過的，快一個個都試一遍吧。

設(shè)置彈出層過渡效果

在原型功能中將兩個 Frame 連接起來，將一個作為另一個的彈出層，你還可以調(diào)整彈出層遮罩的透明度，或者設(shè)置過渡動效，比如從下方漸顯移入。

精準定位彈出層

當你選擇彈出層位置為手動（Manual）時，可以輕松地將其拖到目標位置。如果你將鼠標懸停在它的外面，但此時仍處于選中狀態(tài)，你仍然可以使用方向鍵精準地移動它。

多狀態(tài)的彈出層

給彈出層創(chuàng)多個版本，并添加它們之間的交互以使其具有多個狀態(tài)。然后為不同狀態(tài)之間創(chuàng)建交換（Swap）連接，這樣就可以實現(xiàn)多狀態(tài)切換效果。

隱形點擊目標

你可以一個創(chuàng)建不透明度為 0% 的矩形，將它作為一個點擊區(qū)域。

特殊的動作和觸發(fā)器

在創(chuàng)建原型連接時，你可以選中一個 Frame 作為鏈接目標，也可以選中一些特殊的動作和觸發(fā)器，比如上一個頁面或者關(guān)閉彈出層。

Shift 位移的大小

在菜單（Cmd + /）中搜索“Nudge”，我們可以看到它的值默認為 10px，這就是我們按住 Shift 時屬性變化的大小，你可以將它設(shè)置為自己習慣的值，比如你在使用以 4px 為基準的柵格，就可以將其設(shè)置為 4px。

快速選擇圖層

按住 Ctrl 并右擊，可獲得光標下的元素列表，這樣就可以快速選中需要的圖層，包括鎖定的層。

批量解鎖/隱藏對象

在 Figma 的菜單（Cmd + /）中搜索“Unlock”或“Unhide”，就可以批量操作所選項。

批量導入的圖片

按下 Cmd + Shift + K 開始選中并導入多張圖像，然后你就可以點擊單獨的形狀來一個個填充這些圖像。

導入圖片和 Gif

直接將圖片拖拽至“屬性”面板的“圖像填充層”上，就可以用圖像填充形狀。如果您正在使用 Gif，單擊縮略圖還可以調(diào)節(jié)畫布上顯示的幀。當你在原型中預(yù)覽時，Gif 會播放。

復(fù)制粘貼小技巧

使用 Cmd + C 復(fù)制圖層，然后按下 Cmd + Shift + V 可以將其粘貼并對齊到另一個圖層的左上角。

回車快速選擇

選中一個形狀后，你可以按下回車來進入矢量編輯狀態(tài)。而當你選中一個組并按下回車時，會自動選中組里面的圖層。如果按住 Shift 再按回車，則可以選中其父圖層（組）。

使用方向鍵調(diào)整顏色值

在調(diào)整顏色時，可以使用方向鍵來調(diào)節(jié)，按下 Shift 可以更大跨度地調(diào)整，一般在調(diào)整不同程度的灰色時很有用。

從 CSS 粘貼顏色值

從 CSS 中復(fù)制任何包含顏色值的代碼，無論是 rgba、hex 還是 hsla，都可以將其粘貼到 Figma 中的 hex 輸入框中——它將會自動設(shè)置該色值。

實時預(yù)覽顏色

如果要預(yù)覽形狀的最終顏色，在使用顏色選擇器時單擊并拖動，可自動實時預(yù)覽所選顏色效果。

更改文本排布方式

雙擊文本框的邊框以更改文本排布方式（寬度固定、高度固定或?qū)捀叨脊潭ǎ?/p>

批量更改文本圖層屬性

在菜單（Cmd+/）中搜索“Select All the Same Fonts”來選中具有相同文字屬性的圖層，然后在面板中批量更改其屬性。

滾動調(diào)整顏色的 hue 和 alpha 值

當您在顏色選擇器之中時，使用鼠標滾動來調(diào)整顏色 hue 值，或者按下 Option 滾動來更改 alpha 值。

同時創(chuàng)建多個組件

你可以同時選中多個 Frame，再把鼠標移動到頂部組件圖標上，在下拉菜單中選擇“create multiple components”就可以創(chuàng)建多個組件了。

批量給名稱添加前綴

在“重命名圖層”對話框（右擊->Rename）中給選定的元素批量添加前綴。

快速切換組件實例

如果你使用了統(tǒng)一前綴命名一些組件，則可以在右鍵菜單中選中（swap instance）來快速切換實例。

快速回到 master 組件

選擇一個組件實例，在右側(cè)屬性面板中選擇 go to the Master Component 來快速切回到 master 組件。

將實例組件更改同步到 master 組件

選擇一個實例組件，更改其一些屬性，然后可以在右側(cè)屬性面板中將這些改動同步到 master 組件。

更好的預(yù)覽背景

如果您想在 Assets 面板中為組件預(yù)覽添加一些背景色，只需要將該組件移動到帶有黑色背景的 Frame 中。

設(shè)置文件封面

現(xiàn)在 Figma 文件列表中會使用設(shè)計截圖作為封面，如果你想讓這些封面更加整齊好看，可以在文檔的第一頁只畫一個 Frame 封面，并將畫布背景色和其設(shè)置相同，再將設(shè)計的其他部分放在第二頁。

高級批量圖層重命名

在選擇要重命名的層之后使用 Cmd + R 調(diào)出圖層重命名面板，并使用正則表達式進行復(fù)雜的圖層匹配和重命名。

批量刪除圖層命名的共同部分

在上述圖層重命名窗口中刪除圖層名稱的公共部分，比如，你可以刪除斜杠之間的一段以更好地組織圖層。

快速定位圖層

如果你想在畫布上快速找到一個圖層——只需要在左側(cè)圖層面板中找到它，雙擊左邊的圖層縮略圖，就可以自動定位到圖層啦！

給共享樣式分組

類似于可以用斜杠對圖層名稱進行分組，你也可以使用相同的方法對顏色樣式中的顏色進行分組。

給組件添加描述

你可以給任何 master 組件添加描述，這些描述在切換過程中會以 CSS 注釋的形式出現(xiàn)，因此向組件添加一些給開發(fā)人員的注釋是一種很好的方法（譯者注：比如夸他兩句）。

存儲時增加額外信息

當你希望在保存文件時添加一些額外信息到版本歷史記錄中，請使用 Cmd + Option + S 快捷鍵。

分享文檔的特定版本

你可以在歷史記錄中查看每一個保存過的版本，還可以右擊來分享某一特定版本。

在客戶端復(fù)制鏈接

當你使用客戶端時想要復(fù)制文檔鏈接，請右鍵單擊頂部的文檔 tab 并選擇 Copy link 選項。

從剪貼板打開文件

如果你已經(jīng)復(fù)制了一個 Figma 文件鏈接，并且你想直接在桌面應(yīng)用程序中打開它，只需選擇 file→open URL From Clipboard 就可以了。

以上就是所有的小技巧啦，如果你想學到更多，還可以去查看作者的課程：https://learnux.io/course/figma?autoplay=1

更清晰的講解請查看視頻：https://www.youtube.com/watch?v=Vo0sEPqArRQ

References

[1]?瘋狂動物城:?https://movie.douban.com/subject/25662329/

?原文：https://blog.prototypr.io/figma-tips-tricks-superpower-your-workflow-%EF%B8%8F-d03f418d1db3?作者：Greg Rog?翻譯：Juuun

本文使用 文章同步助手 同步