使用Figma在創(chuàng)建設(shè)計系統(tǒng)或處理大型設(shè)計項目時，總會涉及批量修改.快速定位.自動布局問題，MarcAndrew這篇文章分享了技巧，可以大大提高設(shè)計效率，希望對大家有所幫助:

在這篇文章中，我列出了一些快速簡單的方法來幫助你更快地使用它Figma制作設(shè)計系統(tǒng)。這里分享的大部分技能都非常適合處理設(shè)計系統(tǒng)，或者龐大的設(shè)計文件和設(shè)計項目，當(dāng)然也適合Figma處理日常設(shè)計項目。

你可能熟悉一些內(nèi)容，但也可能有一些內(nèi)容是你從未發(fā)現(xiàn)過的寶藏。接下來，讓我們開始：

1.批量修改顏色的使用「顏色選擇面板」

當(dāng)你想快速修改多個組件的顏色時，不要一個接一個地選擇，所以工作量太大了。此時，最快的方法是選擇側(cè)面「顏色選擇面板（SelectionColors）」這種方法是直接調(diào)用色彩系統(tǒng)中的色彩，可以達(dá)到批量修改的目的。

2.這個快捷鍵可以使圖層清晰整潔

圖層面板中的文件夾結(jié)構(gòu)可以幫助您更快地找出包含哪些元素，但由于屏幕尺寸的限制，在復(fù)雜的設(shè)計系統(tǒng)中，由于元素太多，你很難清楚地了解整個系統(tǒng)。

使用最簡單的快捷鍵Alt+L，所有的層都可以折疊起來，這樣你就可以更清楚地看到整個系統(tǒng)的全貌，并專注于當(dāng)前的項目。

3.搜索可以更快地定位文本樣式

當(dāng)你想改變文本風(fēng)格時，你不需要無休止地滾動圖層和選項來找到你需要的文本。此時，使用搜索功能可以幫助您更快地定位到相應(yīng)的層。

例如，您可以直接搜索H2或者Headline2找到相應(yīng)的文本層，而不是逐個瀏覽層面板。特別值得一提的是，當(dāng)你在搜索時，如果你想搜索，比如Headline37、可直接搜索H37可以找到相應(yīng)的圖層。

使用簡短的關(guān)鍵詞搜索也能更快地提高編輯內(nèi)容的效率。

4.使用列表選項更快選擇顏色樣式

正如我之前所說，盡快調(diào)整配色風(fēng)格和文本風(fēng)格，以便更快地設(shè)計。所以，當(dāng)你使用它的時候?！干手甘酒鳎↖nspcetor）」在調(diào)整顏色選項時，將網(wǎng)格布局改為列表布局，可以更容易地瀏覽和使用配色風(fēng)格，更直觀。

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

絕大多數(shù)用戶習(xí)慣于通過鼠標(biāo)滾動和點(diǎn)擊圖層面板，逐個控制，逐個文件夾，一個接一個地找到，這個效率超低，我也這樣做了很長一段時間。然而，鼠標(biāo)點(diǎn)擊的效率遠(yuǎn)不如鍵盤快捷鍵方便快捷。

最快的方法就是使用Tab在圖層中快速向下切換選擇圖層，然后使用車鍵確認(rèn)。這種選擇比鼠標(biāo)快很多，但是Tab只能向下滾動選擇，如果要向上切換選擇，使用，Shift+Tab快捷鍵就可以了。

6.使用快捷鍵更換和更新組件

設(shè)計系統(tǒng)總是不可避免地涉及到不同時間、不同版本的設(shè)計系統(tǒng)分支之間的處理，比如版本V2.更換圖標(biāo)2V2.5.這時，按住。Alt+Cmd按鈕，選擇需要調(diào)整的組件，組件周圍會有一層紫色的外界。此時，您可以在不同的版本之間切換和調(diào)整，非?？?。

7.使用自動布局快速改變組件尺寸

當(dāng)您設(shè)計當(dāng)前項目的主要組件時，記得隱藏與主要組件無關(guān)的部分，并在層管理中保持此，您可以點(diǎn)擊圖層面板中的小眼睛圖標(biāo)來隱藏它們。同時，這個小圖標(biāo)也可以幫助您根據(jù)需要適應(yīng)組件的大小。（這部分作者沒有說清楚，知道學(xué)生記得在評論區(qū)留言糾正）

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

在處理設(shè)計系統(tǒng)時，排版工作量會很大，會注意到這些文本元素不能像其他現(xiàn)有文本那樣整齊一致地排列。此時，不要擔(dān)心，記住在使用自動布局功能時，首先到文本排版，確定排版對齊規(guī)則，然后自動布局功能將遵循這個邏輯自動布局。

9.自動布局縮放異常時，應(yīng)調(diào)整間距設(shè)置

在許多使用自動布局的組件中，當(dāng)你試圖調(diào)整某些元素的大小時，縮放的大小可能會發(fā)生變化。例如，在一個組件中UI在控制中添加標(biāo)簽組件（ChipsComponent），插入似乎很好，但當(dāng)你想調(diào)整標(biāo)簽尺寸時，你會發(fā)現(xiàn)它很難控制。此時，在自動布局的設(shè)置面板中，嘗試切換間距設(shè)置中的面板「Packed」和「SpaceBetween」選項，之后應(yīng)該正常。更多figma內(nèi)容：https://js.design/special/figma/

結(jié)語

我希望這些技能能幫助你，尤其是在處理復(fù)雜的設(shè)計系統(tǒng)時。這些技巧可以幫助你提高效率，在一定程度上緩解問題。Figma這是一個很好的工具，它有很多有效和省時的技巧，但它們需要你花時間去探索。