Figma這11個隱藏技巧，設計效率大幅提升！

Sponsor

今天我們為大家分享11個新的Figma隱藏技巧，我猜你可能真的不知道?？鞂W起來。

1. 快速裁剪

假設您正在設計一個網站并希望裁剪多張產品圖片以適合頁面上的特定區域。

一種選擇是使用遮罩工具創建精確的圖像裁剪。這可能很耗時。

?不過，如果你想快速裁剪圖片，只需使用鍵盤快捷鍵“option + 雙擊”即可快速裁剪圖片。這可以節省您的時間并使裁剪過程更快更容易。

這使您可以快速專注于需要處理的圖像部分，而無需花費大量時間擺弄遮罩工具。

2.無限制調整大小

在無法自由調整大小的Frame上工作非常令人沮喪。在 Figma 中使用框架時，您可能會遇到的問題之一是，當您調整框架大小時，框架內的對象可能會以意想不到的方式移動或縮放。這可能很煩人，并且很難實現您想要的布局。

但是，您可以使用一個簡單的技巧來防止這種情況發生：在調整框架大小時忽略約束。拖動和調整框架大小時，按住鍵盤上的“Command”鍵。這將允許您調整框架的大小而不影響其中對象的位置或比例。

或者您也可以按住 Command + Option，調整大小將按比例執行。

3.整理

在 Figma 中工作的挑戰之一是保持你的設計有條理和整潔。幸運的是，Figma 有一個有用的 Tidy Up 功能，可以幫助您快速輕松地清理您的設計。

使用 Tidy Up 就是使用鍵盤快捷鍵 [?] + [?] + [T]。這使您無需使用鼠標即可快速整理設計。

您還可以單擊位于對齊部分最右側的屬性面板中的整理圖標。

4.分離多個實例

在 Figma 中工作時，您可能面臨的挑戰之一是處理具有許多嵌套實例的項目。這可能會導致很難在不影響嵌套實例的情況下更改設計，這可能會令人沮喪。

但是，Figma 中的一個方便功能允許您快速輕松地從項目中分離所有嵌套實例，而不會丟失它們的設置。

要使用它，請按鍵盤上的“cmd”+“/”打開快速搜索菜單，然后搜索“instances”。這將包括您設計中所有實例的列表，包括嵌套實例。

從那里，您可以分離所有實例或僅分離嵌套實例。分離實例會將它們從父項中移除，但它們會保留它們的設置，例如框架和自動布局。這意味著您可以在不影響分離實例的情況下更改父項，從而節省您的時間和精力。

5. 手部定位

在 Figma 中設置手部位置的最佳方法之一是將拇指放在“Command”鍵上。這是 Figma 中最重要的按鈕，也是您在使用該程序時最常使用的鍵。

您可以使用“Command”鍵作為拇指的支點或樞軸點，然后使用其他手指觸及所需的其他鍵。例如，您的食指可以觸及“Y”、“H”和“N”等鍵，而您的無名指可以向下移動至“Option”鍵。您的小指可以向下移動到“Shift”或“Tab”鍵，具體取決于您需要使用什么。

可能需要一些練習才能習慣，但一旦您習慣了，您將能夠更快速、更輕松地執行快捷命令和導航程序。

6.選擇相似圖層

有時，可能需要選擇頁面上具有共享屬性（例如顏色或大?。┑乃袑ο?，以便同時更改所有這些對象。對于快速輕松地編輯頁面上的多個對象來說，這是一項很有價值的技術。

要使用此功能，請轉到“編輯”菜單并選擇“選擇所有具有相同 [屬性] 的內容?！?例如，如果您想要選擇頁面上所有具有相同顏色的對象，您可以選擇“選擇所有具有相同填充顏色的對象”。這將選擇您頁面上具有相同屬性的所有對象，從而可以輕松地一次更改所有對象。

請記住，“編輯”菜單沒有“選擇所有具有相同名稱”的選項。然而，一個名為Similayer的強大插件可以幫助您做到這一點。

7. 一屏=一個框架（Frame）

在 Figma 中工作時要記住的最重要的事情之一是使用框架（Frame）來組織屏幕內容。這意味著您設計中的每個屏幕都應包含在其自己的框架（Frame）內，并且該屏幕上的所有元素都應放置在該框架內。

這種方法的好處很多。首先，它使您的畫布保持整潔有序，這使得四處移動、調整元素大小和導出屏幕變得更加容易。其次，它允許您快速檢查設計的響應能力，因為您可以看到框架內的元素如何適應不同的屏幕尺寸。第三，它更容易知道什么是什么，因為您可以清楚地看到每個屏幕的邊界和其中的元素。

要在 Figma 中創建框架，請在屏幕上選擇要包含在框架中的元素，單擊鼠標右鍵，然后從菜單中選擇“框架選擇”?；蛘?，您可以使用鍵盤快捷鍵 CMD+Option+G 在您的選擇周圍創建一個框架。

當您想要復制屏幕時，重要的是選擇整個框架（通過單擊其名稱）然后復制它。這將確保該屏幕上的所有元素都包含在復制的框架中。

8.如何將Frame重新附加到組件上？

如果您正在處理“死frame”（不再附加到組件的frame）。無需手動重新附加每個實例，您可以使用“Master”插件快速輕松地重新附加所有“死frame”。

Master Figma 插件

要使用該插件，請先單擊提供的鏈接進行安裝。然后，按照下列步驟操作：

001. 選擇要用于死frame的組件實例。不要選擇死frame。

002. 使用“保存或附加到已保存的母版”選項運行“母版”插件。

003. 選擇要重新附加的框架。

004. 使用“保存或附加到已保存的母版”選項再次運行“母版”插件。

就是這樣！您的死frame現在將重新附加到所選組件，以便根據需要輕松編輯和更新它們。

9.選擇嵌套對象

這使您可以快速輕松地選擇畫布上的對象，而不管它們在層次結構中的位置如何。

要使用此功能，請將光標懸停在要選擇的對象上。如果對象是框架或組，您可以通過單擊對象名稱周圍的空白區域來選擇它。如果對象在框架或組內，您可以通過將光標懸停在它上面并單擊它來選擇它。

此功能的另一個優點是它可以多選對象。為此，請按住鍵盤上的“命令”鍵并在要選擇的對象上單擊并拖動（或單擊“Shift”）。

10.為圖像創建樣式

要在 Figma 中保存圖像，請在畫布上選擇圖像，然后單擊右側面板中的“樣式”選項卡。從那里，單擊“創建新樣式”按鈕并為您的圖像命名。這會將圖像保存為您可以在需要時隨時訪問和使用的樣式。

使用此功能時要記住的一件事是，當您在設計中使用圖像時，圖像的分辨率會對圖像的外觀產生影響。例如，如果您將低分辨率圖像保存為樣式，然后在設計的大面積區域中使用它，它可能看起來像素化或模糊。

11.設置行高時，使用%

眾所周知，行高以 px 或 pt 為單位，這對于喜歡使用更通用的單位（如 CSS 中使用的單位）的設計師來說可能會令人沮喪。

假設你想使用像“2.5”這樣的行高值，而你不能使用 CSS 單位來設置它。但是，您可以改用百分比 (%)。這也允許您在不影響行高的情況下更改字體大小。

例如，如果要使用 2.5 的行高和 10 的字體大小，則應按如下方式計算：10 * 250% = 25px/pt。

值得注意的是，即使您可以在 Figma 中使用百分比設置行高，但當您使用檢查模式時，它仍將以像素為單位顯示。但是，這不應影響您設計的外觀或行為方式。

原文：https://uxplanet.org/11-advanced-figma-tips-tricks-i-bet-you-didnt-know-about-a3323d213dc1

作者：Shantanu Kumar

來源：靜Design（ID：JingDesign91）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。