Figma一站式設(shè)計(jì)交付（三）—— 營地使用&技巧、Figma社區(qū)、設(shè)計(jì)師玩轉(zhuǎn)Figma
導(dǎo)語：
本期是《Figma一站式設(shè)計(jì)交付》系列的最后一輯，作者以和平營地項(xiàng)目為例，為大家介紹了一系列 Figma 實(shí)用技巧，如何在強(qiáng)大的Figma社區(qū)中挖掘資源、和分享 Figma 的另類生產(chǎn)力。
1. 營地設(shè)計(jì)的問題和流程優(yōu)化
在第一篇的第一部分，有講述設(shè)計(jì)團(tuán)隊(duì)會(huì)遇到使用設(shè)計(jì)工具時(shí)的合作疑難：
設(shè)計(jì)工具｜Figma一站式設(shè)計(jì)交付（一）—— 什么是Figma
和平營地在使用Figma前的問題：
規(guī)范不統(tǒng)一，效率低 → 建立視覺、開發(fā)組件庫：
視覺字號(hào)顏色規(guī)范、切圖不統(tǒng)一、開發(fā)無組件化意識(shí)，協(xié)同設(shè)計(jì)效率偏低。
設(shè)計(jì)資源缺乏管理 → 推動(dòng)開發(fā)優(yōu)化資源冗余：
多個(gè)設(shè)計(jì)開發(fā)團(tuán)隊(duì)經(jīng)手，歷史遺留問題滾雪球，平臺(tái)業(yè)務(wù)資源移植冗余。
在使用 Figma 之后，情況就可以完全不同了：從交互設(shè)計(jì)到視覺設(shè)計(jì)，最后到策劃審核和設(shè)計(jì)交付，都可以在 Figma 上一站式完成。多人實(shí)時(shí)協(xié)作發(fā)揮了巨大的作用，工作流程更加敏捷了。
2. 營地使用Figma構(gòu)建字體樣式
在營地中，字體樣式主要有常規(guī)系統(tǒng)字體和品牌字體 Agency，因此分別使用了 T 和 A 作為代表，融入了 Regular、Medium、Bold 的三種字重，以R、M、B分別代表。
以 10 號(hào)作為最小基礎(chǔ)字號(hào)，以2/4/8作為遞增規(guī)律產(chǎn)生常用的 10、12、14、16、18、20、24 等字號(hào)。
統(tǒng)一以 150% 作為基礎(chǔ)行高，個(gè)別以 175% 為寬行高。字體樣式配以對(duì)應(yīng)的中文注釋，最終形成體系如T12R、T12M、T12B等見名知意的字體代號(hào)。在方便開發(fā)使用代號(hào)的同時(shí)，加快設(shè)計(jì)做統(tǒng)一判斷的選擇。
3. 營地使用Figma構(gòu)建顏色樣式
在營地中，顏色樣式圍繞品牌色，參考行業(yè)同行關(guān)于對(duì)比度可讀性的研究，進(jìn)行了一系列的色階處理。
對(duì)常用的實(shí)色、漸變、半透明漸變（蒙版）以 8 位 ARGB 提供對(duì)應(yīng)色值，形成一套深淺對(duì)應(yīng)的中性色和彩色體系。
此外對(duì)常用的頭像、素材、圖案作為填充預(yù)設(shè)，方便組件變體調(diào)整切換，避免了使用插件時(shí)會(huì)產(chǎn)生隨機(jī)的圖像填充。
4. 營地使用Figma構(gòu)建柵格樣式
在營地中，定義以 4/8 作為基礎(chǔ)網(wǎng)格標(biāo)準(zhǔn)建立常用的柵格間距、尺寸。
在圖片比例上定義常用的 16:9 / 4:3 / 3:2 / 1:1 等，在適配時(shí)保持等比縮放，以 Center Crop 模式，避免適配時(shí)被拉伸壓扁。
5. 營地使用Figma構(gòu)建圖標(biāo)組件系統(tǒng)
在營地中，此次改版對(duì)名字和資源的管理都格外重視，想要輕松剔除冗余的資源，就要有一套合理可持續(xù)的規(guī)則管控切圖資源，是通過：
【業(yè)務(wù)名_模塊_類別_功能_狀態(tài)_尺寸.格式】的命名規(guī)范來管理切圖。
此外在 icon 組件的描述中加入適當(dāng)?shù)?strong>關(guān)鍵詞，能夠有效提高圖標(biāo)搜索的準(zhǔn)確度。
6. 其他實(shí)用技巧
Selection Colors：
框選一個(gè)范圍或者一個(gè)畫板，會(huì)羅列檢查出畫板內(nèi)所有顏色，對(duì)批量替換為規(guī)范色頗有幫助。
Cilp Content：
有時(shí)候想在一個(gè)畫板內(nèi)裁剪(隱藏)超出的部分（類似蒙版，但局限于圓角矩形），直接勾選 Clip Content 就可以了。
寬度或高度為 0：
設(shè)置寬度或者高度為 0.001，可以在自適應(yīng)按鈕 AL 內(nèi)做出不占據(jù)寬高的、類似相對(duì)/絕對(duì)定位的效果。
7. 效率之王 —— 快捷鍵
Quick Action：
[MacOS]Command? + / 或 +P
[Windows]Control + / 或 + P
直接輸入就可以搜索調(diào)用菜單命令、插件等不同的快捷操作，十分方便高效。
Tide Up：
[MacOS]Control^ + option?+T
[Windows]Ctrl + Alt + T
一鍵快速整理圖層，另外還有各種對(duì)齊快捷鍵：
[MacOS] option?+ WASD 和 option? + V/H
[Windows]Alt + WASD 和 Alt + V/H
Copy As Png：
Shift + Command?/Ctrl +C
一鍵快速導(dǎo)出某個(gè)畫板圖片到剪貼板，方便復(fù)制粘貼到聊天窗口。
8. 給需求加狀態(tài)描述，分享鏈接快速定位
如果你使用 Figma 一站式設(shè)計(jì)交付，那么通過自主設(shè)計(jì)一個(gè)自定義的組件：在 Figma 中劃分區(qū)域告知開發(fā)哪些是進(jìn)行中的 ，哪些是可以進(jìn)入開發(fā)的；并且直接羅列對(duì)應(yīng)的組件，加強(qiáng)團(tuán)隊(duì)成員對(duì)組件的構(gòu)建意識(shí)。
此外 Figma 對(duì)每個(gè) Frame 都可以產(chǎn)生一個(gè)指向鏈接，只需右鍵這個(gè)框架，就可以直接拿到鏈接和分享給產(chǎn)品開發(fā)，十分方便。
Figma 的社區(qū)集合了用戶、文件和插件等內(nèi)容，在這里你可以找到很多優(yōu)秀的設(shè)計(jì)范例，優(yōu)秀的高玩用戶，還有各種出其不意的設(shè)計(jì)思路。進(jìn)了 Figma 社區(qū)，就如同站在了巨人的肩膀上。
設(shè)計(jì)師：
在社區(qū)里搜索的內(nèi)容里，官方是必不可少的，除此以外你可以搜索各類大廠，關(guān)注他們的分享。
Joey Banks 大佬分享了很多 iOS 的組件，并且也會(huì)以最新的組件集方式重新整理一次。
Rogie 應(yīng)該是 Figma 官方的成員，在 youtube 上也很活躍，分享很多不為人知的技巧。
在國內(nèi)，主要關(guān)注了草帽SMao、Mr.Biscuit、RyanJyu；這些也是在Figma at Tencent 的一次交流會(huì)上了解了更多。
可以上 Bilibili 搜到 草帽SMao 的 Figma 教程，里面分享了很多工作中的實(shí)戰(zhàn)經(jīng)驗(yàn)技巧。我也是看他的視頻入門，非常贊。
Mr.Biscuit，人稱小老虎，致力于讓 Figma 變得更好，開發(fā)了很多插件。例如 Instance Utils 能夠在不分離組件的情況下，調(diào)整組件的內(nèi)部結(jié)構(gòu)。例如 Outline to Single Stroke，能將以填充形式的線型圖標(biāo)，轉(zhuǎn)換為描邊形式的線型圖標(biāo)。
文件：
用戶可以在社區(qū)里搜索開源共享的 Figma 設(shè)計(jì)源文件，從一些源文件中就能學(xué)習(xí)到別人使用 Figma 的一些技巧和規(guī)范，并且可以基于別人的文件做二次的設(shè)計(jì)迭代。
插件：
Figma 社區(qū)里少不了各種各樣的插件分享，我們通過下載量和點(diǎn)贊量榜單，能夠發(fā)現(xiàn)更多優(yōu)秀的插件。
Figma 的插件生態(tài)也相當(dāng)豐富，再推薦一些曾經(jīng)用過的 Plugins。我在特別喜愛的插件旁標(biāo)了個(gè)??，另外也推薦一些插件網(wǎng)站：
FEATURED FIGMA PLUGINS
https://figma.tovi.fun/
每月一期，給你推薦當(dāng)月更新的、值得嘗試的 Figma 插件。
Figma 中文社區(qū)
https://www.figma.cool/
致力于在國內(nèi)推廣 Figma，這里有開發(fā)的 Figma 工具箱、設(shè)計(jì)資源精選、插件合集和 Figma 的官方文檔。
Awesome Figma Tips
https://awesomefigmatips.com/tips
除了推薦插件以外，還用動(dòng)圖形式展示了各種 Figma 的技巧。
