想更快上手Figma？收下 9 個提高工作效率的小技巧！

編者按：使用Figma 創建設計系統，或者處理大型設計項目的時候，總會牽涉到批量修改、快速定位、自動佈局方面的問題， Marc Andrew 的這篇文章 分享了9個小技巧，這些技巧能夠在很大程度上提升設計的效率，希望對你有所幫助：

這篇文章當中，我列舉中了一些快速而簡單的方法來幫你更快使用 Figma 來製作設計系統。這裏所分享的技巧，大多非常適合處理設計系統，或者龐大的設計文件和設計項目，當然它們也適用於 Figma 處理日常設計項目。

你可能對於其中的一部分內容比較熟悉，不過可能還有一部分內容對你而言是未曾發掘過的寶藏。那麼接下來，讓我們開始吧：

1、批量修改色彩的使用 「色彩選擇面板」

當你想要針對多個組件進行快速色彩修改的時候，不要逐個選擇，這樣工作量太大了，這個時候，最快捷的方式是選擇側面的「色彩選擇面板（Selection Colors）」中的顏色，這種方式是直接調用色彩系統中的顏色，能夠達到批量修改的的目的。

2、這個快捷鍵能夠讓圖層清晰整潔

圖層面板當中的文件夾結構逐個展開能夠幫你更快搞清楚包含哪些元素，但是受限於屏幕尺寸，在複雜的設計系統當中，由於元素過多，會讓你很難對於對於整個系統有清晰的認知。

使用最簡單的快捷鍵 Alt + L ，可以將所有的圖層都摺疊起來，讓你可以更加清晰地看到整個系統的全貌，並且可以專注於當前的項目。

3、用搜索可以更快定位到文本樣式

想要更換文本樣式的時候，不用無休止地滾動圖層和選項來尋找需要的文本，這個時候，使用搜索功能能夠更快幫你定位到相應的圖層。

比如，你可以直接搜索 H2 或者 Headline2 來找到對應的文本圖層，而非去圖層面板挨個瀏覽。尤其值得一提的是，當你在搜索的時候，你如果想要搜索比如 Headline 37 ，可以直接搜索 H 37 就可以找到對應的圖層。

使用簡短的關鍵詞搜索，也可以更快提升編輯內容的效率。

4、使用列表選項更快選取色彩樣式

正如同我之前所説的，儘可能快地調整配色樣式和文本樣式，能夠更快地進行設計。所以，當你使用 「色彩指示器（Inspcetor）」 來調整色彩選項的時候，將網格佈局改成列表佈局，能夠更加輕鬆的瀏覽和使用配色的樣式，更加直觀。

5、使用鍵盤快捷鍵更快地瀏覽圖層

絕大多數用户習慣於通過鼠標滾動和點擊在圖層面板中，逐個控件逐個文件夾展開，一個一個找，這個效率是超級低的，我在很長一段時間以內也都是這樣做的。不過，鼠標點擊操作的效率遠不如鍵盤快捷鍵來的方便快捷的。

最快的方式是是使用 Tab 在圖層當中快速向下切換選取圖層，然後使用回車鍵確認，這樣的選取方式比起鼠標會快速很多，不過 Tab 只能往下滾動選取，如果要向上切換選取，使用 Shift + Tab 快捷鍵即可。

6、藉助快捷鍵更快更換和更新組件

設計系統總是不可避免會涉及到不同時間不同版本的設計系統分支之間的處理，比如説將版本 V2.2 的圖標更換到 V2.5 當中。這個時候，按住 Alt + Cmd 按鍵，選中你需要調整的組件，組件周圍會出現一層紫色的外邊界，這個時候你可以和不同的版本之間進行切換調整，非常快速。

7、使用自動佈局來迅速改變組件尺寸

當你在設計當前項目的主要的組件的時候，記得在圖層管理當中，將和主要組件無關的部分隱藏起來，保持專注，而要做到這一點，可以通過點擊圖層面板中的小眼睛圖標來實現隱藏。同時這個小圖標也可以幫你將組件根據需求進行尺寸自適應處理。（這一部分作者沒有明説，知道的同學記得在評論區留言指正）

8、使用自動佈局及時避免文本對齊混亂

在處理設計系統的時候，排版的工作量會非常大，會注意到那些文本元素總不能按照其他的已有的文本那樣整齊一致地排布。這個時候不用擔心，記得在使用自動佈局這一功能的時候，先到文字排版當中，確定排版對齊規則，接下來自動佈局功能就都會遵循這一邏輯來自動排布。

9、自動佈局縮放不正常時應該調整間距設置

在很多使用了自動佈局的組件當中，當你試圖調整某些元素大小的時候，你會出現縮放的尺寸變化可能會非常奇怪。比如，在一個 UI 控件當中加入一個標籤組件（Chips Component），插入進去的時候似乎還很好，可是當你要調整這個標籤尺寸的時候，會發現它很難控制。這個時候，在自動佈局的設置面板當中，嘗試切換一下間距設置中的「Packed」和「Space Between」選項，之後應該就正常了。

結語

希望這些技巧能夠能夠幫到你，尤其是在處理複雜的設計系統的時候。這些小技巧能夠在一定程度上幫你提升效率，緩解問題。Figma 是一款出色的工具，它有很多有效且省時的技巧，但是它們需要你花時間去探索。