10個Figma高級技巧,用好工作速度大大提升

Sponsor

Figma作為一款先進的UI設計工具，擁有眾多實用的技巧和功能，可以幫助我們更快速、更高效地完成設計任務。

用Figma工作是非常有意思的。Figma直觀、快速并且響應迅速。雖然Figma容易使用，但是Figma也有很多技巧和插件需要我們去發現，今天推薦10個插件來進一步提升我的工作流程。這些技巧非常實用，可以幫助我更快速、更高效地完成我們的UI設計任務。下面開始上方法；

技巧 1：在Figma中輕松創建 Squircles

在UI設計中，Squircle（即圓角正方形）這種形狀使用頻率是非常高的，尤其是在iOS應用程序圖標中。與標準的圓角矩形相比，Squircle具有更柔和的曲線和更友好的外觀，使圖標看起來更加現代化。

我們要在Figma中創建Squircle，可以按照以下簡單的步驟：

1.創建一個矩形形狀。

2.選擇“圓角”選項。

3.在“圓角”輸入框中輸入一個較大的數字（例如100）。

4.在“長寬比”輸入框中輸入一個較小的數字（例如1.2）。

5.根據需要調整“圓角”和“長寬比”值，直到我們獲得視覺上所需的形狀。

注意的是，這種技巧不僅適用于矩形，也適用于其他形狀，例如圓形、三角形和五邊形等。這種技巧可以幫助我們更輕松地創建出具有現代感和柔和曲線的圖形，讓我們的設計更加精美。BingO!

如果我們想在Figma中更加精確地控制每個角的半徑，可以使用右側面板中的半徑設置選項。單擊選項，就可以顯示每個角的單獨控制按鈕，就可以更細致地控制形狀的外觀。

提示 2：輸入顏色名稱而不是 HEX

在選擇顏色時，很多人更喜歡使用HSB或HSL來確定顏色的明度、飽和度和色相。但是，Figma有一個更有趣的隱藏功能可以幫助我們更快速地選擇顏色。

在Figma中，當您在輸入框中鍵入顏色的名稱時，它會自動顯示與該顏色名稱匹配的顏色。這種功能可以在通常出現HEX值輸入的地方使用。比如，我們輸入“red”，Figma就會顯示紅色的顏色示例結果。

比如，在Figma中，我們輸入“Midnight Blue”時，它將顯示出一種深藍色的顏色；輸入“Sour Lemon”時，就會顯示出一種明亮的黃綠色?？傊?，這種功能不僅可以幫助我們更快速地選擇所需的顏色。

技巧 3：重命名框架的最快方法

在Figma中，要重命名一個框架，我們可以選擇要修改的框架并使用“CMD+R”快捷鍵。這是我一貫的習慣，還有另外一種方法就是在畫布上直接雙擊要更改名稱的框架名稱，這將使該名稱處于編輯模式?，F在，您可以直接輸入新名稱并按下“Enter”鍵來更新框架的名稱。這就不需要記住快捷鍵，而且更加直觀，可以幫助您更快速地更改框架名稱。

技巧 4：根據內容調整文本層大小

在Figma中，如果我們要對文本層的大小更改為與其內容的寬度相同，有一種非常技巧的方法可以實現。

只需選擇要更改大小的文本層，并雙擊圖層右側的邊緣，文本層的寬度將自動調整為適合其內容的大小。這種方法非?？旖?，可以幫助我們更輕松地控制文本的外觀和布局。

值得注意的是，這個方法只適用于文本層。對于其他類型的圖層，我們可以使用不同的技巧來調整大小和布局。

技巧 5：調整框架大小時忽略布局約束

在Figma中，如果我們開始調整框架的大小，就會發現調整父級框架的大小時，所有元素都會展開或折疊，這會讓我們在用的時候比較麻煩。

如果要調整框架大小而不會影響框架中的元素布局，就在調整大小之前選擇“拆分元素”。這個選項可以在屏幕上的右上角找到。這樣就可以把框架中的元素與框架分離，這樣在調整框架大小時，元素的布局不會受到影響。這種方法非常有用，這樣可以幫助我們更輕松地控制設計元素的位置和大小，而不必擔心布局被打亂。

拖動框架的邊緣來調整大小時，按住“CMD”鍵，Figma就會忽略任何約束并更自由地更改框架的寬度或高度。在這種情況下，框架中的元素將保持不變，不會受到大小調整的影響。

技巧 6：在大綱模式下預覽元素

在Figma中，如果想要確保組件或框架的結構被正確地完成，大綱模式是一個非常有用的工具。這種視圖可以讓我們輕松地查看元素的布局和放置的精度。

大綱模式用直觀的方式查看設計元素的結構和關系。在大綱模式中，就可以看到所有的層級關系，包括組件、框架和圖層之間的關系。這樣就可以使用大綱模式來檢查設計元素的對齊、間距和布局。

不管在設計一個復雜的UI界面還是一個簡單的圖標，大綱模式都是一個非常有用的工具，可以幫助我們更加準確地完成您的設計項目。

在Figma中，要激活大綱模式，使用快捷鍵“CMD+Y”。，使您可以輕松地查看設計元素的結構和關系。

技巧 7：復制和粘貼效果

在Figma中，如果要只想復制特定效果或樣式，而不是創建一個共享樣式，有一個非常簡單的方法。

首先，選擇要復制效果或樣式的元素。然后，單擊該元素的屬性行的邊緣（這些屬性行包含要復制的樣式或效果）。在選擇要復制的行后，按下“CMD+C”進行復制。

接下來，選擇要應用樣式或效果的目標元素，并按下“CMD+V”進行粘貼。這樣看到復制的樣式或效果就應用到選擇的目標元素上。

通過使用這種方法，可以更加輕松地復制特定效果或樣式，而不必創建共享樣式或重新創建整個樣式或效果。這是個實用的方法。

技巧 8：用框架分組

在Figma中，如果要對一個框架內的元素進行更高級別的分組，而不僅僅是一個標準組，有一個非常實用的快捷鍵。

按下“CMD+OPTION+G”快捷鍵，Figma將創建一個新的更高級別的組，將所選的元素包含在內。這種方法可以更好地組織和管理您的設計元素，并將它們放在更高級別的組中，以便更好地控制和調整它們的布局和外觀。

在Figma中，使用框架而不是標準組的好處是非常多的。首先，將元素放入框架中可以使其更容易地轉換為組件，這樣會讓工作流程更加高效和便捷。

其次，使用框架也可以更輕松地使用自動布局和響應式設計?？蚣苤械脑乜梢噪S著框架的大小調整而自動調整其布局和位置，從而確保設計元素始終保持在正確的位置和比例。

另外，使用框架還可以更加輕松地控制和調整設計元素的外觀和樣式。這樣就可以把框架作為一個整體來調整其填充、邊框和其他樣式屬性，從而確保整個框架的外觀和感覺一致。

綜上所述，使用框架而不是標準組可以帶來更多的可能性和靈活性，可以幫助我們更加高效地進行設計工作，并創建出令人驚嘆的設計作品。

技巧 9：用箭頭替換組件

在Figma中，如果要更換組件，就可以使用鍵盤上的箭頭鍵來輕松地操作和導航組件，而不必使用鼠標光標。

使用左右箭頭鍵可以在組件庫中切換不同的組件，而使用上下箭頭鍵可以在不同的變體之間進行導航。這種方法非常實用，可以幫助我們更加快速和高效地使用組件庫，并更好地管理和調整設計元素。這個比鼠標點擊沒個菜單位置要方便的多。

技巧 10：變體中的開關

在Figma中，組件的變體通常會顯示為下拉列表，但如果想讓它們看起來像 switch 切換，您可以使用一個非常有用的技巧。

首先，選擇想要創建 switch 切換的組件，并在變體面板中創建兩個屬性，一個是“是”、“真”或“開”，另一個是“否”、“假”或“關”。然后，將這兩個屬性分別與兩個不同的組件變體相關聯。

完成了這些步驟操作，Figma自動的把兩個變體轉換為一個 switch 切換，使您可以更快速和更方便地交互和調整這些變體。

另外，在文檔之間移動組件

Figma已經添加了一個非常實用的功能，可以幫助我們輕松地將組件從一個庫移動到另一個庫。

只需要選擇要移動的組件，然后從原始文件中剪切它們，粘貼到新目標庫中即可。如果目標庫是一個文檔庫，則使用該庫的文檔將更新組件，并通知我們哪些組件已棄用。只需要確認更改，并指向新庫即可。

總結

以上這些技巧都是在Figma中可以使用的一些實用技巧和功能，它們可以幫助您更加高效地進行設計工作。如果您能夠熟練地掌握這些技巧，您可以節省很多時間，并使您的工作流程更加流暢和高效。

作者：李波來源：CLD設計研習社（ID：HelloCloud789）

贊助商鏈接

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