據(jù)說(shuō)點(diǎn)擊藍(lán)色字體關(guān)注同學(xué)都升職加薪了

靜電說(shuō)：在之前我們已經(jīng)介紹過(guò)不少Figma的小技巧，隨著Figma版本的更新，我們?yōu)榇蠹艺沓隽烁嗟腇igma小技巧，幫助你讓自己的設(shè)計(jì)工作邊的更爽更方便。本次的小技巧欄目分兩期進(jìn)行，這篇文章是第一期。

順便說(shuō)一句，Mac的快捷鍵與Win的快捷鍵有一點(diǎn)差別，具體看下圖。

001.快速?gòu)?fù)制文件鏈接（cmd+L）
在您的文件中，按cmd+ L，它會(huì)將文件的鏈接復(fù)制到您的剪貼板。您現(xiàn)在可以在任何地方共享和粘貼。

分享具體的文件位置：如果您選擇了特定的頁(yè)面、框架或元素，文件將在使用鏈接打開(kāi)時(shí)跳轉(zhuǎn)到您的選擇。這一點(diǎn)非常棒~(yú)

002. 在 Figma 之外快速嵌入元素和原型
使用熱鍵cmd+L將鏈接復(fù)制到特定頁(yè)面或框架，然后將其粘貼到 Figma 之外。您可以共享整個(gè)畫(huà)布或選擇要共享的特定框架。這對(duì)于文檔、設(shè)計(jì)系統(tǒng)和樣式指南來(lái)說(shuō)絕對(duì)是驚人的。但也可以在其他網(wǎng)站上展示，比如在 Medium 中。

也就是說(shuō)，你可以直接把你的設(shè)計(jì)稿嵌入到其它支持的網(wǎng)站中去，直接展示出來(lái)。當(dāng)然，也可以直接嵌入交互原型，并且它還可以自動(dòng)更新。

003. 微調(diào)文本，顏色和數(shù)值
選擇一個(gè)彩色形狀并打開(kāi)顏色菜單，按住 shift 鍵并上下移動(dòng)方向鍵。您可以看到顏色“一點(diǎn)點(diǎn)的變化”。如果您使用鼠標(biāo)滾輪，也可以更改顏色的色調(diào)。如果在縮放時(shí)按住 alt，這也會(huì)改變不透明度。您還可以微調(diào)任何其他字段，例如行高。

?提示：在排版和行高上使用 4 或 8pt 的幅度來(lái)設(shè)置你的字體比例！順便說(shuō)一句，默認(rèn)微調(diào)是 10，要更改它，請(qǐng)按cmd+/并鍵入“nudge”來(lái)調(diào)整微調(diào)數(shù)值。

004. 快速調(diào)整字段數(shù)值
將鼠標(biāo)懸停在 Figma 中的某些屬性字段上時(shí)，會(huì)出現(xiàn)一個(gè)橫向雙箭頭。只需按下鼠標(biāo)鍵 并將箭頭從左向右移動(dòng)，數(shù)值就會(huì)發(fā)生變化。按住shift以增加調(diào)整數(shù)值的速度。這適用于任何在將鼠標(biāo)懸停在其上時(shí)顯示橫向雙箭頭的字段。

005.復(fù)制為PNG而不導(dǎo)出圖片
按cmd+ shift+ c（或通過(guò)右鍵菜單訪問(wèn)）將框架作為 png 復(fù)制到剪貼板。您現(xiàn)在可以將其粘貼到文件內(nèi)部或外部的任何位置。這樣，不用導(dǎo)出文件就可以粘貼到ppt以及任何你想粘貼的地方了。

?

006.添加左右約束的網(wǎng)格
當(dāng)您在將網(wǎng)格添加到框架（Frame）的同時(shí)設(shè)置約束時(shí)，（非嵌套）項(xiàng)目會(huì)將列作為其父容器。如果您希望您的元素與網(wǎng)格完美結(jié)合，請(qǐng)將它們?cè)O(shè)置為left-right。

?

這適用于文本和組或其他框架。它不適用于自動(dòng)布局設(shè)置。小技巧：只需將您的自動(dòng)布局打包在一個(gè)組中，然后您就可以在該組上設(shè)置約束。

007.用頁(yè)面和框架命名組件
您可能熟悉組件的“/”命名規(guī)則。但您是否知道向框架添加主組件的組織方式與使用“/”相同？它會(huì)變得更好。您還可以使用頁(yè)面來(lái)創(chuàng)建元類別。
這樣，您可以將組織與命名分離，只需將組件拖動(dòng)到新框架即可在一秒鐘內(nèi)重新組織組件。而且您的組件名稱又好又短。

在我的示例中，我為移動(dòng)設(shè)備創(chuàng)建了一個(gè)頁(yè)面，為通用創(chuàng)建了一個(gè)頁(yè)面（我可以為每個(gè)斷點(diǎn)設(shè)置一個(gè)，或者為 web 和應(yīng)用程序、android 或 iOS 設(shè)置一個(gè)庫(kù)，你懂的）。在頁(yè)面內(nèi)部，我只是在放置組件的位置放置框架。它可以是單個(gè)組件或具有變體的組件集。
如果你是從 Sketch 或舊的 Figma 庫(kù)導(dǎo)入，并且有常規(guī)的“button/primary/active/”等等的命名，你可以設(shè)置頁(yè)面和框架，然后簡(jiǎn)單地使用 Figma 中的批量重命名功能并刪除所有帶有正則表達(dá)式的前綴。

008.截圖直接粘貼到Figma
你可以選擇任何你想用的截圖工具，比如微信，或者操作系統(tǒng)自帶的截圖功能，然后直接復(fù)制到Figma中即可。

小提示：Figma中，按住Alt鍵雙擊位圖可以直接裁切圖片。


009.從瀏覽器復(fù)制可以編輯的SVG代碼
您可以直接從頁(yè)面的代碼中復(fù)制 SVG，而不是下載 SVG 并將它們導(dǎo)入回 Figma 。選擇 SVG 圖像并右鍵單擊以選擇檢查模式。再次單擊圖像源。然后在圖像視圖中，再次右鍵單擊檢查模式，然后在整個(gè) SVG 元素上，右鍵單擊并選擇“復(fù)制元素”。你現(xiàn)在可以將它粘貼到你的 Figma 文件中，它仍然是一個(gè)可擴(kuò)展和可編輯的SVG，它的所有圖層都包含在內(nèi)。
試試阿里巴巴圖標(biāo)庫(kù)中的復(fù)制SVG功能，那個(gè)更方便。

010.徹底分解多個(gè)實(shí)例
如果您有一個(gè)包含許多要分離的嵌套實(shí)例的項(xiàng)目，請(qǐng)使用+搜索打開(kāi)快速搜索菜單，輸入關(guān)鍵字Instances，您現(xiàn)在可以選擇“detach all instances”或“detach all nested instances”，但它們會(huì)保留其設(shè)置，例如框架和自動(dòng)布局。

011.快速選擇所需圖層
有時(shí)候圖層太多，你會(huì)無(wú)法找到所需的圖層，這個(gè)時(shí)候只要在這個(gè)圖層或者組的位置點(diǎn)擊右鍵選擇“Select Layer”，就可以快速找到你想要的圖層了。

012.為布爾運(yùn)算后的圖形添加屬性
如果你做一個(gè)布爾運(yùn)算操作后，現(xiàn)在可以使用半徑之類的東西來(lái)平滑邊緣。您仍然可以操作布爾運(yùn)算的的單個(gè)元素。順便說(shuō)一句，您還可以使用您的組件并將它們進(jìn)行布爾運(yùn)算，它們將遵循設(shè)置的顏色和屬性樣式。

013.為樣式進(jìn)行分組
你可以在色彩樣式面板中，對(duì)你的顏色樣式進(jìn)行組合分組，這樣更方便管理。

選擇樣式并按cmd+G進(jìn)行分組，然后命名。您現(xiàn)在可以在文件夾內(nèi)和文件夾之間對(duì)樣式進(jìn)行排序和拖動(dòng)。
第二期，敬請(qǐng)期待。

原文：https://uxdesign.cc/advanced-figma-tips-tricks-2022-20cbf9fdda45

▼更多精彩文章▼我預(yù)判了你的預(yù)判？！如何設(shè)計(jì)更貼心的交互
【案例解析】“看理想”-別致的人文應(yīng)用UI設(shè)計(jì)鑒賞
超詳細(xì)教程來(lái)啦！教你繪制輕擬物風(fēng)格指南針圖標(biāo)
必裝！推薦幾個(gè)在Figma中做扭曲和3D效果的插件
本周精選優(yōu)秀UI賞析-No.59(Behance長(zhǎng)頁(yè)面)
UI表單確認(rèn)框如何設(shè)計(jì)？掌握這個(gè)訣竅直接搞定！本周精選優(yōu)秀UI作品賞析-No.57(Behance篇)
【案例分析】薄荷健康A(chǔ)PP設(shè)計(jì)思路深入解析

《靜電的UI設(shè)計(jì)教室-4月新課》來(lái)啦！

廣受好評(píng)的全鏈路UI一對(duì)一小班課程

《靜電的UI設(shè)計(jì)教室》已經(jīng)舉辦了40多期

我們新的4月課程會(huì)在下個(gè)月中下旬開(kāi)課

趁著大好春光 好好提升自己吧

↓↓長(zhǎng)按二維碼加靜電老師咨詢↓↓

? ? ? ? ? ?