編者按：使用 Figma 創建設計系統，或者處理大型設計項目的時候，總會牽涉到批量修改、快速定位、自動布局方面的問題，Marc Andrew 的這篇文章分享了9個小技巧，這些技巧能夠在很大程度上提升設計的效率，希望對你有所幫助。
這些文章同樣來自 Marc Andrew：
這篇文章當中，我列舉中了一些快速而簡單的方法來幫你更快使用 Figma 來制作設計系統。這里所分享的技巧，大多非常適合處理設計系統，或者龐大的設計文件和設計項目，當然它們也適用于 Figma 處理日常設計項目。
你可能對于其中的一部分內容比較熟悉，不過可能還有一部分內容對你而言是未曾發掘過的寶藏。那么接下來，讓我們開始吧：
當你想要針對多個組件進行快速色彩修改的時候，不要逐個選擇，這樣工作量太大了，這個時候，最快捷的方式是選擇側面的「色彩選擇面板（Selection Colors）」中的顏色，這種方式是直接調用色彩系統中的顏色，能夠達到批量修改的的目的。
圖層面板當中的文件夾結構逐個展開能夠幫你更快搞清楚包含哪些元素，但是受限于屏幕尺寸，在復雜的設計系統當中，由于元素過多，會讓你很難對于對于整個系統有清晰的認知。
使用最簡單的快捷鍵 Alt + L ，可以將所有的圖層都折疊起來，讓你可以更加清晰地看到整個系統的全貌，并且可以專注于當前的項目。
想要更換文本樣式的時候，不用無休止地滾動圖層和選項來尋找需要的文本，這個時候，使用搜索功能能夠更快幫你定位到相應的圖層。
比如，你可以直接搜索 H2 或者 Headline2 來找到對應的文本圖層，而非去圖層面板挨個瀏覽。尤其值得一提的是，當你在搜索的時候，你如果想要搜索比如 Headline 37 ，可以直接搜索 H 37 就可以找到對應的圖層。
使用簡短的關鍵詞搜索，也可以更快提升編輯內容的效率。
正如同我之前所說的，盡可能快地調整配色樣式和文本樣式，能夠更快地進行設計。所以，當你使用 「色彩指示器（Inspcetor）」 來調整色彩選項的時候，將網格布局改成列表布局，能夠更加輕松的瀏覽和使用配色的樣式，更加直觀。
絕大多數用戶習慣于通過鼠標滾動和點擊在圖層面板中，逐個控件逐個文件夾展開，一個一個找，這個效率是超級低的，我在很長一段時間以內也都是這樣做的。不過，鼠標點擊操作的效率遠不如鍵盤快捷鍵來的方便快捷的。
最快的方式是是使用 Tab 在圖層當中快速向下切換選取圖層，然后使用回車鍵確認，這樣的選取方式比起鼠標會快速很多，不過 Tab 只能往下滾動選取，如果要向上切換選取，使用 Shift + Tab 快捷鍵即可。
設計系統總是不可避免會涉及到不同時間不同版本的設計系統分支之間的處理，比如說將版本 V2.2 的圖標更換到 V2.5 當中。這個時候，按住 Alt + Cmd 按鍵，選中你需要調整的組件，組件周圍會出現一層紫色的外邊界，這個時候你可以和不同的版本之間進行切換調整，非?？焖佟?/p>
當你在設計當前項目的主要的組件的時候，記得在圖層管理當中，將和主要組件無關的部分隱藏起來，保持專注，而要做到這一點，可以通過點擊圖層面板中的小眼睛圖標來實現隱藏。同時這個小圖標也可以幫你將組件根據需求進行尺寸自適應處理。（這一部分作者沒有明說，知道的同學記得在評論區留言指正）
在處理設計系統的時候，排版的工作量會非常大，會注意到那些文本元素總不能按照其他的已有的文本那樣整齊一致地排布。這個時候不用擔心，記得在使用自動布局這一功能的時候，先到文字排版當中，確定排版對齊規則，接下來自動布局功能就都會遵循這一邏輯來自動排布。
在很多使用了自動布局的組件當中，當你試圖調整某些元素大小的時候，你會出現縮放的尺寸變化可能會非常奇怪。比如，在一個 UI 控件當中加入一個標簽組件（Chips Component），插入進去的時候似乎還很好，可是當你要調整這個標簽尺寸的時候，會發現它很難控制。這個時候，在自動布局的設置面板當中，嘗試切換一下間距設置中的「Packed」和「Space Between」選項，之后應該就正常了。
希望這些技巧能夠能夠幫到你，尤其是在處理復雜的設計系統的時候。這些小技巧能夠在一定程度上幫你提升效率，緩解問題。Figma 是一款出色的工具，它有很多有效且省時的技巧，但是它們需要你花時間去探索。
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 黑本