本文將帶你近距離了解Figma的用途庭敦，并提供給你20個實用技巧匿情，讓你更快更好的使用這個著名的協(xié)作交互設(shè)計工具進行工作兰迫。
關(guān)于快捷鍵的一點說明
本文中大多數(shù)快捷鍵都提供Windows和Mac兩個版本，Windows上的Ctrl鍵對應(yīng)Mac上的Cmd鍵炬称，Alt鍵在Windows和Mac上（Option/Alt）通用逮矛。
例如：Ctrl/Cmd + Alt + C 對應(yīng) Windows上的 Ctrl + Alt + C 以及Mac上的 Cmd + Alt/Option + C。
1. 如何同時導(dǎo)入多張圖片
我們做設(shè)計的時候無時無刻不在使用圖片转砖，如果我們能夠更輕松、更直接地改變單個和多個圖像鲸伴，那將非常有用府蔗。
Figma可以導(dǎo)入多張圖片（使用快捷鍵 Ctrl/Cmd + Shift + K），并將其一一對應(yīng)到你希望它們出現(xiàn)的圖層（對象）上汞窗。這個功能非常方便姓赤，你可以看到導(dǎo)入的圖像然后進行實時放置。
[圖片上傳失敗...(image-2c49fe-1568608600577)]
2. 批量重命名
很多時候仲吏，我們在準備導(dǎo)出設(shè)計（如icon或者一組圖片）的時候不铆，或是當我們對設(shè)計文件需要執(zhí)行“深度整理”的時候，都需要重命名一組圖層裹唆。
Figma可以讓你批量重命名圖層（以及frame）誓斥，這個功能非常方便。你可以重命名整個圖層的名字许帐，也可以只是圖層名字中的一部分劳坑。你也可以查找重命名一個圖層的某個字符，添加不同的數(shù)字到圖層以方便導(dǎo)出到獨立的文件成畦。你也可以通過在“Match”字段里面輸入關(guān)鍵字后執(zhí)行查找替換距芬。
[圖片上傳失敗...(image-17f202-1568608600577)]
3. 在Frame名字中使用Emoji表情符號顯示當前工作狀態(tài)
在設(shè)計團隊中使用Figma會讓工作更加具有協(xié)作性涝开。但是通常需要在同一個設(shè)計文件上進行工作，而且有時還是同時展開的框仔。
為了知道哪個Frame正在工作中舀武，以及哪個已經(jīng)完成了，我們可以添加emoji表情符號（Windows快捷鍵: win + . 或者 win + ;离斩，Mac快捷鍵：Cmd + Ctrl + space）在frame名稱的前面银舱，這樣，每一個人就可以知道當前frame的工作狀態(tài)了捐腿。
[圖片上傳失敗...(image-915a3d-1568608600577)]
4. 重組物件
Figma最偉大的功能之一就是可以在Frame中重組物件纵朋。特別是在使用icon，列表以及標簽組的時候非常有用。
[圖片上傳失敗...(image-acf8dd-1568608600577)]
使用合適的名稱組織你的樣式（文本，顏色鲁僚，效果等）
本地樣式（Local Styles）是Figma最棒的功能之一盔夜。它可以讓你創(chuàng)建設(shè)計系統(tǒng)（design system）以方便你重復(fù)使用組件。如果你修改了母版樣式部逮，它將同時改變所有相關(guān)聯(lián)的組件。非常強大，對不藏澳？但是，如果沒有使用正確的方式進行命名和分組耀找，那么你將丟失所有的樣式翔悠。下面將分享幾個組織樣式的實用技巧。
5. 文本樣式命名
你可以通過添加“/”在子分類來組織你的文本樣式野芒。例如蓄愁，在“Heading”后面加上“/”，這樣所有的標題文本都將在“Heading”這個分類下面了狞悲。這對于有很多不同尺寸字體的情況非常有用撮抓，可以讓你更快定位到指定的文本。這個方法對于“文本”和“顏色”都適用摇锋。
[圖片上傳失敗...(image-37e624-1568608600577)]
6. 對每一個樣式添加描述作為導(dǎo)覽
對在什么地方使用不同的組件及如何使用這些組件的樣式添加快速說明是非常有用的丹拯，特別是當你與團隊或者其他設(shè)計師共同協(xié)作的時候。你可以在編輯文本樣式荸恕，顏色樣式或其他組件的同時添加說明文字乖酬。
7. 如何從側(cè)欄切換實例
很多時候我們會遇到大量的組件，圖標等融求。而通過使用下拉菜單切換實例并不是最好的做法剑刑。這里有個小技巧，就是你可以按住 Alt + Ctrl/Cmd 鍵從側(cè)欄拖動組件到你想要替換的組件上。簡單施掏，快速钮惠！
[圖片上傳失敗...(image-b5c7ad-1568608600577)]
8. 如何拷貝/粘貼所有的屬性
當復(fù)制一個元素或拷貝一個元素樣式的時候，可以快速拷貝元素屬性（Ctrl/Cmd + Alt + C）七芭，然后粘貼（Ctrl/Cmd + V）到一個新的元素上素挽。對于具有多屬性的圖像或者樣式元素，這個功能非常有用狸驳，例如：填充或者描邊等预明。
[圖片上傳失敗...(image-c23b37-1568608600577)]
9. 如何拷貝/粘貼單一屬性
另外一個有用的快捷方式就是拷貝單一屬性，也就是說你可以選擇拷貝哪個屬性耙箍。從右側(cè)面板選擇屬性撰糠，然后使用快捷鍵 Ctrl/Cmd + C 復(fù)制，再用 Ctrl/Cmd + V 進行粘貼到另外一個對象上辩昆。
[圖片上傳失敗...(image-bdb085-1568608600577)]
10. 搜索具有相同屬性阅酪、實例、樣式等等的元素
當你的設(shè)計文件非常復(fù)雜汁针，或者你想清理你的設(shè)計系統(tǒng)术辐，搜索相同的屬性（例如一個特定的顏色），然后修改顏色樣式中的顏色這個功能將會非常有用施无。特別是你正在處理設(shè)計系統(tǒng)并且需要更好的組織所有的組件的時候辉词，這個功能異常實用。
[圖片上傳失敗...(image-731ff4-1568608600577)]
11. 使用縮放工具調(diào)整對象尺寸和它們的屬性
縮放元素以及它們的屬性（描邊猾骡，對象上的效果等）是非常有用的瑞躺。在這一點上，F(xiàn)igma要比Sketch使用起來更簡單兴想，因為你無需選擇對象的尺寸幢哨。當你縮放對象的時候，對象的尺寸和它的屬性都將按比例調(diào)整大小襟企。通過按住Shift鍵，你可以在放大或縮小物體的同時保持比例狮含。
提示：如果你只想改變對象的尺寸而不修改它的屬性（描邊顽悼，效果等），使用“Select”工具選擇對象几迄，然后使用屬性面板進行尺寸修改蔚龙。如果你使用縮放工具并且調(diào)整對象的尺寸，那么對象的尺寸和屬性都會發(fā)生變化映胁。
[圖片上傳失敗...(image-d8cc74-1568608600577)]
12. 調(diào)整Frame的尺寸而不調(diào)整其內(nèi)部的圖層尺寸
當為不同的屏幕分辨率進行設(shè)計的時候木羹，你希望調(diào)整的是屏幕frame的尺寸而不調(diào)整其內(nèi)部frame所有元素的尺寸。為了實現(xiàn)這個，當你執(zhí)行調(diào)整尺寸操作的時候需要按住 Ctrl/Cmd 鍵坑填。奇跡出現(xiàn)啦抛人！
[圖片上傳失敗...(image-1146b9-1568608600577)]
13. 快速創(chuàng)建圖表/弧形
使用Figma，你可以快速創(chuàng)建圖表/弧形脐瑰。無需在圓弧上剪裁路徑來創(chuàng)建自定義的圖形妖枚。看看下圖如何創(chuàng)建一個加載圓弧苍在，并且所有的數(shù)值都可以通過右側(cè)的屬性面板進行精確的控制绝页。
14. 隨時改變邊距
Figma中改變?nèi)航M元素邊距的功能很實用。它讓你在屏幕上布置一組元素變得垂手可得寂恬。該功能不僅適用于多個元素续誉，同時也適用于單個元素。
15. 組件的關(guān)鍵字搜索功能
當你開始著手大量組件的時候初肉，在你的庫中查找指定的組件有時會變的非常困難酷鸦。而組件關(guān)鍵字（component keywords）功能讓搜索變得容易起來。你可以對任何組件添加關(guān)鍵字朴译，即使和組件的名字不同也可以井佑，這些關(guān)鍵字讓你查找組件更加容易∶呤伲看下圖的示例：
16. 還原較早的設(shè)計文件版本躬翁，或分享較早版本的鏈接
能夠回到文件的之前版本這一功能非常讓人欣喜。
無論出于什么原因（你犯了一個錯誤盯拱，或者客戶需要你切換回較早的版本等盒发。），能夠返回較早的版本這一功能都非常有用狡逢。不僅如此宁舰，F(xiàn)igma還允許你拷貝較早版本的鏈接，這樣你就不必刪除文件的近期版本了奢浑。非常聰明蛮艰！
[圖片上傳失敗...(image-f59769-1568608600577)]
17. 使用UI套件庫開始新的項目
通常需要使用UI套件庫來開始新的項目。例如雀彼，當設(shè)計一些線框模型的時候會使用Wireframy套件壤蚜。你只要激活該庫就可以使用了。另外徊哑，Bootstrap Grid 和 Figma Redlines 也是會經(jīng)常用到的套件袜刷。你可以在這里找到很多免費的資源供你使用。
[圖片上傳失敗...(image-6bd3d2-1568608600577)]
18. 在原型中使用GIF
Figma剛剛增加了將GIF文件添加到原型的功能莺丑，從而增加了在原型中添加用戶交互動畫的可能性著蟹。以下是Aris Acoba的預(yù)覽：
[圖片上傳失敗...(image-dc3953-1568608600577)]
19. Figma的整理功能
Figma的整理功能（Tidy Up）非常實用，特別是當你需要快速重排網(wǎng)格中的元素或者將元素對齊的時候。結(jié)合第4條和第14條提到的實用技巧萧豆，該功能變得非常強大奸披。此外，另一個執(zhí)行整理的方式就是鼠標懸浮在所選元素的右下角炕横，然后點擊藍色的圖標源内。
[圖片上傳失敗...(image-e269d5-1568608600577)]
20. 查看設(shè)置
Figma的查看功能也非常實用，雖然它比較難找到在哪里份殿。在窗口右上角的設(shè)置（Settings）的下拉菜單中膜钓，你可以看到工作區(qū)域的設(shè)置。不僅可以顯示標尺（Rulers）卿嘲，網(wǎng)格（Grid）颂斜，啟用/停用與網(wǎng)格對齊（Snap to Pixel Grid），而且當你需要專注不想被其他設(shè)計師干擾的時候拾枣，還可以隱藏其他參與者的光標沃疮。
[圖片上傳失敗...(image-777ec-1568608600577)]
21. 額外提示：Figma插件
Figma最近發(fā)布了它全新的插件功能 ，允許人們?yōu)樗麄兊墓ぷ髁鞒虅?chuàng)建自定義的插件擴展梅肤。
插件對于整個Figma的生態(tài)系統(tǒng)來說意義非凡司蔬，并且可以提升工作流程 ，下面推薦幾個常用的插件：
- Content Reel
- Unsplash
- Stark
- Image Palette
- Google Sheet sync
[圖片上傳失敗...(image-81ad97-1568608600577)]
英文原文：地址
原文作者：Philippe Hong
編譯作者：@iris0327
以上譯文僅代表原作者觀點姨蝴。如需轉(zhuǎn)載請遵循CC版權(quán)協(xié)議正確標明出處俊啼。
[圖片上傳失敗...(image-9ae8da-1568608600577)]
