15000 字乾貨！超全面的 Figma 設計指南

Figma 自 2016 年以多人實時在線協作的界面設計軟件出現，很多人在使用過後認為 Figma 是來自未來的界面設計軟件。由於 2020 年疫情原因，越來越多人在家隔離辦公。Figma 也適逢機會一舉超越了 Sketch 的地位，在 UI 設計、原型設計、頭腦風暴、用户流程、設計系統、設計交付、版本管理等名列前茅，成為當下最流行的多平台 UI 線上協同設計軟件。

在我研究使用了一番 Figma 後表示真香，藉此開發了一門免費分享課——《Figma一站式設計交付》，課程主要從4個章節簡要地講解Figma的一站式設計交付：

• Figma 的介紹、理論
• Figma 的設計系統、原型交互、審查元素
• Figma 的營地使用技巧
• Figma 社區（用户、文件、插件）

希望大家能從中深刻了解 Figma，在日常設計中進一步提升設計效率，優化設計流程。

前期的下載安裝，註冊賬號流程都相對簡單，沒有難度的就先跳過了。至於有同學終究會問有沒有中文版，當然也有漢化插件，還是建議能用英文版的就英文版，來去就那些固定的英語單詞。不廢話了，快來一起進入 Figma 的世界吧。

認識 Figma

根據 UXTools 用户體驗工具調查報吿顯示，Figma 在國外有逐漸攀升的趨勢。Figma 的用户量已經反超了 Sketch，一舉在 UI Design / Protoping / User Flow / Hand Off / Design System / Versioning 拿下排名第一 ， 在 WhiteBoard 中 FigJam 排名第二。

回看國內同類型產品的情況，已經有多家廠商開發了對標 Figma 的工具，如藍湖 MasterGo（已完成 C 輪融資）、即時設計（優化做得比較好）、Pixso 等。

另一側是 Figma 交付類的插件工具，騰訊也推出了 CoDesign 設計協作平台，覆蓋了產品經理、設計師、工程師協作需求，助力團隊提升協作效率、有效管理和使用設計資產，幫助大家更好的去完成設計交付。和 CoDesign 類似的產品還有 Moonvy、Heron、Mockplus。

Figma 於 2016 年發佈首個版本，19 年推出品牌宣傳視頻，而 2020 年的疫情讓這類雲協作的產品迅速崛起，接下來先看一下 Figma 官方是怎麼去宣傳的：

通過視頻我們大概能瞭解到一些：避免文件傳回傳、團隊多人協作、雲設計協作交互視覺、直接交付給開發、及時的評論反饋。

總的來説 Figma 實在是有太多優點了：多終端多人實時協作、從 Sketch 過渡無縫 UI 設計不卡頓、獨特的矢量網格、類 CssBox 盒子的 AutoLayout、原型交互、設計系統組件庫靈活高效、版本歷史管理、實時討論、實時分享、無需擔心插件版本，Figma 涵蓋了如此多功能，是一個設計+社區的綜合體。（社區後面介紹）

設計效率這件事很難用具象的數據來傳達，只有你親身體驗一番才叫真香。為了更好的描述 Figma 在整個過程中怎麼提升設計效率，在此簡單的舉幾個例子：

1. 對設計流程的提效統一

在使用 Figma 之前：產品策劃團隊一般用 Tapd、在線文檔、原型圖等描述需求，交互用 XD、Sketch 等梳理設計交互圖，視覺同學用 PS、Sketch 等完成設計，最終以又以效果圖、Codesign 等交付給產品策劃審閲定稿，最終 Codesign 等交付工具交付開發。

在使用 Figma 之後：情況就可以完全不同了，從交互設計到視覺設計，最後到策劃審核和設計交付都可以在 Figma 上一站式完成，多人實時協作發揮了巨大的作用，更加敏捷了。

很多團隊可能交互用一個工具，視覺用一個工具，各司其事不礙事。又如組件和設計規範等可能覺得組件是統一依賴視覺同學就好，交互稿不需要符合規範，所以交互同學不用組件，組件、規範的概念對交互不是重點。但其實可以相互作用，到後期交互可以直接套用視覺組件直接搭建頁面，效率也是有所提升。

2. 交互動效 Demo 的高效

在使用 Figma 之前，可能會由 Photoshop 轉向 After Effect、XD 等軟件製作動效，如果是 Sketch 流則會有更多的選擇可以導入 Principle、Flinto、Protopie、Framer 等工具，Protopie 和 Framer 在動效設計上都是一個不錯的選擇。

在使用 Figma 後，可以在做完視覺後直接做高保真的交互 Demo，一定程度上避免了不同軟件的學習成本，提升了圖層元素、效果、源文件等轉換效率。此外，Figma 的組件變體還支持做交互狀態的變化，大大地提升了做交互 Demo 的效率。

例如，給父組件 Close 添加一個點擊事件響應關閉浮層的操作，無論你是居中的彈窗，還是底部畫出的，乃至是右側畫出的，只要在界面的浮層中使用到 Close 的組件都可以響應關閉浮層的交互動效。

3. 更高效自由的組件修改

例如需要構建 3 個不同的按鈕組件：

Photoshop 沒有組件的概念，只好分開創建 3 個按鈕（3 種顏色、3 個文本、3 個形狀）並且三個按鈕之間 文字、顏色無規範關聯，圓角獨立設置，寬高非自適應。

Sketch 雖然有組件的概念，但是還是逃不過創建 3 個按鈕組件（3 種顏色、3 個文本、3 個形狀）並且要在 v69 版本後的文字和顏色才可以獨立設置，三個按鈕組件的圓角在設定後子組件不可獨立修改，配合 SmartLayout 的能做單向的自適應拉伸，3 個組件為獨立不關聯的組件，互不影響。

Figma 得益於原子化的樣式，只需要建立 2 種文本樣式，3 個顏色、0 個形狀，通過建立 1 個基礎組件就可以把三個按鈕關聯歸一。其中文字和背景邊框等樣式可以獨立設置，按鈕的形狀可以直接交給圓角獨立設置，配合 AutoLayout 可以做到完美寬高自適應。

當然這裏例子難免有的同學會覺得有點極端了，真正創建按鈕的組件還是應該創建成 3 個獨立的組件。只是能從這個極端例子中看見 Figma 的強大的高效自由組合。

建立一個基礎組件：圖標+文本+背景。在子組件中，可以自由的設定字體字號、填充顏色、邊框顏色、效果樣式、圓角樣式等，可根據需要決策顯示或隱藏圖標。

通過一個基礎組件控制不同的實例，不同的實例又保持高度自由的子特徵屬性。

4. AutoLayout 的高效

列表設計是 UI 界面常見的一種，常常在調整的時候會牽連很多調整操作。例如：

• 刪除第一個列表項中的圖片，文字要自動左對齊；
• 刪除第二個列表項中 3 行文本，文字需要實現基於圖片居中對齊；
• 刪除第四個列表項，並把第五個列表項提前至第三個列表項。

Photoshop：沒有組件的概念，所以只能傻傻的幹了。首先刪除圖片，左移文本，刪除 2 的文本，調整居中，刪除第 4，調整第 5 到第 3，調整第 3 到下面。主體操作就有 7 步之多。

Sketch：分別創建圖文 3 行、圖文 2 行、純文組件，框選 345，調整位置，調整第四，整體也有 6 步左右 3 個組件。

Figma：配合 AutoLayout 只需要創建 1 個組件，然後對子組件進行刪除圖片，刪除文本，調整順序即可，主體操作大概只有 4 步 1 組件。有了 AutoLayout 的加持，組件可以自由地刪除（隱藏）元素，而後會有自動佈局的效果（自動跟隨、對齊）。

Figma 在設計上是基於前端的佈局實際理念，配合 AutoLayout 使得頁面元素的堆疊排列更為自動化，可以在組件內外自由刪減隱藏元素並且自動調整佈局。

5. Figma 更透徹的原子設計

在化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。2013 年前端工程師 Brad Forst 提出的原子設計方法論作為指導。

方法的本質其實就是將頁面拆解為最小元素（原子），然後原子可以演變成分子，分子通過多維度的組合形式成為組織，再到模板，最終生成頁面。

原子（Atoms）：在界面中以「元素」的形式存在，例如文字、顏色、圖標、效果樣式等；

分子（Molecules）：原子、分子排列組合構成了組織，在界面中多以「組件」的形式存在，例如按鈕、導航、標籤、彈窗；

組織（Organisms）：原子、分子、組織排列組合構成了模板，在界面中多以「模塊」的形式存在，例如：列表組、卡片組、入口組等；

模板（Templates）：原子、分子、組織排列組合構成了模板，在界面中也稱為「原型圖」，例如資訊原型，列表原型，詳情原型等；

頁面（Pages）：將實際內容（圖片、文章等）放置在特定模板內，就成了高保真視覺稿。

Figma 和 Sketch 在踐行原子設計理論上做對比：

文本樣式

Figma 無需考慮文本對齊和顏色的組合，此外行高支持百分比設定

Sketch 則需要枚舉對齊、顏色各異的情況，過於宂餘

填充和邊框樣式

Figma 可以在文本、填充、邊框中自由調用顏色樣式

Sketch 則需要在 v69 支持 Color Variables 後才能通過顏色變量統一管理

效果樣式

Figma 可以創建圖層樣式進行復用統一管理

而 Sketch 沒有樣式統一管理的概念，只能靠複製、粘貼樣式

尺寸圓角

Figma 可以獨立的設置組件的圓角，通過自動佈局的強大功能可以做自適應、兼容性高的組件

Sketch 中組件只能嚴格遵守父組件的設定，並且只有組件才能使用 SmartLayout 屬性，對常用的響應式、兼容性上有一定的侷限性

至此，可以看出 Figma 的高效，是因為更透徹實踐原子設計體系，在一定程度上高效地自由組合，避免樣式、組件宂餘。

6. 怎麼轉 Figma？

Figma 如此之多真香的點，那從現在的工具中怎麼轉過去？想必大家都很想知道。

Photoshop：很遺憾 Figma 不能直接識別導入 PSD 格式，但是對於一些矢量路徑圖層還是可以右鍵複製 SVG 代碼，粘貼到 Figma 上的。

Photoshop 本身就很臃腫，做 APP UI 設計只是冰山一角，對整體的 APP 設計考慮來説是很欠缺的，對組件、字體樣式、顏色樣式的維護起來比較累。但是對於非扁平類的遊戲 UI 設計來説，它還是個主力軍。

XD：雖然 XD 的設計理念稍微比 Sketch 更接近 Figma，但是 Figma 也不支持直接導入 XD，常規渠道還是 XD 保存 SVG，再導入 Figma，但是轉 SVG 是相當大的折損，相當於把文字轉曲，把組件關係斷開，意義並不大。當然也可以選擇使用 XDtoSketch 這種第三方付費轉換，能夠很好地完整轉換。

Sketch：Figma 只支持導入 Sketch 文件，會自動識別換換圖片、文字、矢量組件等，但是涉及到樣式、樣式關聯、組件關聯等會丟失，需要在導入後重新關聯，整理組件。導入後還需要做這些操作，主要是因為 Figma 的設計系統理念比 Sketch 先進，所以有些組件、樣式的設計使用上，可以做一些減法優化。

整體轉換到 Figma 的情況來説可以是毫無捷徑了，怎麼樣都得修一遍為妙。

對於已有的項目可以考慮重組組件庫設計邏輯，更好的為後續打下基礎。那對新的項目或者改版的情況，可以直接使用 Figma 進行重建。

雖然前期的過程都比較累，但是後續使用起來絕對是真香。

設計

由於大部分的設計工具都差不多，常用的文本、顏色、形狀的各種操作在此就不再贅述了。Figma 中的設計主要講設計系統。

1. 構建柵格樣式

Figma 支持建立柵格樣式，現在你可以更愉快地在每個界面，每個 Frame 裏面自由地使用柵格樣式。完整的設計系統應該包含柵格系統，可以自由組合水平、垂直、網格 3 種基本網格。

例如可以根據您兩端的尺寸分別創建 Android 和 iOS 的柵格系統，圖標設計上可以建立 8×8，24×24，1024×1024，這是都是 Sketch 沒有考慮到的複用性。

2. 構建文本樣式

Figma 的文本樣式，無需考慮對齊、顏色，這也就相對於 Sketch 節省了很多不必要的樣式，在選擇上也會變得更簡潔高效。並且字距和行高可以支持百分比單位，設定更靈活。在組件的實例中，也能夠自由更換字體樣式，配合 AutoLayout 能夠做到組件的自適應。

在構建文本系統的時候，也可以藉助如 Font Scale 插件按照 1.2、1.5、1.618 等規律生成和諧的字體規範；如 Batch Styler 可以批量修改字體、顏色規範。

3. 構建顏色樣式

Figma 的顏色樣式，可以自由應用在顏色、描邊、字色上，描邊屬性可以在實例上自由的設定粗細，類型，線頭線尾樣式等。

但是圖層樣式 Effect 中的顏色還沒有納入樣式管理，可能是因為單獨有圖層樣式管理，所以沒有和顏色樣式關聯起來，但還是期待 Figma 能完善吧。

在構建色彩系統的時候，我們常常需要使用一些規則方法去生成顏色樣式。在這裏可以藉助如 ColorKit 插件，可以生成一組自定義顏色的深淺色階。

構建圖層效果樣式

Figma 可以創建內陰影、投影、圖層模糊、背景模糊等效果樣式，能夠比 Sketch 更方便統一的管理圖層效果樣式。

注意：

Figma 可以渲染陰影類型最多 8 個，內投影最多 1 個，每個模糊類型最多 1 個。但請記住，這些效果所使用的模糊可能導致性能不佳，背景模糊通常是最耗性能的圖層效果。圖層效果適用於圖層和組，使用組模糊和陰影可以提高性能。

在構建圖層效果樣式的時候，可以藉助如 Neumorphism 創建漂亮的新擬態投影、SmoothShadow 創建平滑的分層陰影、oblique 創建長投影等。

4. 構建圖標系統

Figma 的圖標繪製在獨有的矢量網格技術上，可以用一筆畫完整個路徑圖標，可以在不同的方向直接分叉而不需要創建單獨的路徑對象。此外還可以使用橢圓工具創建形狀如餅圖、環狀圖等，極大地提高圖標繪製的效率。

在構建圖標系統的時候，可以藉助如 Iconify、Icon8 等插件，直接搜索關鍵詞，直接以 SVG 格式導入 Figma，當然也可以從 iconfinder、iconfont 等網站複製 SVG 代碼，直接粘貼到 Figma。

Figma 中的幾個重要概念

具體的介紹就不一一贅述了，和 Sketch 最大的區別主要是 Autolayout，可以説是 SmartLayout 的超級升級，無論文本、形狀、畫板等都可以添加 AL 達到堆疊的效果，自動堆疊、調整內邊距和內間距，類似 Css FlexBox（但目前 AL 沒有 Margin，但可以嵌套 AL 達到 Margin 效果）。

使用了 Autolayout 後，內裏的元素由 Constraints 變成 Resizing，可以使用 Fixed 固定、HugContents 適應內容、Fill Container 填充容器來自由控制約束佈局，可以輕鬆創建響應式、等分效果。

其次 Variants 變體可以把多個組件狀態歸集為一個組件，通過屬性創建不同的選擇開關，能讓組件在不同狀態間自由切換。

AutoLayout

AutoLayout 是 Figma 類似 CSS 中盒子模型的功能，可以應用在 Frame 框架和 Component 組件上，可以自由分別設定四邊 Padding、嵌套 AL 為 Margin、描邊樣式、並對內容產生如 FlexBox 的均分對齊。如果選擇不在框架內的對象（Group、Text、Vector、Images 等），Figma 將在它們周圍創建一個自動佈局框架。

1.在創建進度條組件的時候，一般創建了就不能控制進度的長度。其實可以通過 AL 一個 Frame 填充，在 Instance 實例中可以通過改變 AL 的內邊距，從而實現填充的長度（當然也可以放一個透明的元素控制間距實現）。如果是有拖拽點，還可以配合 Frame 寬度為 0 的 Hack 方式，保持不裁剪內容以顯示拖拽點，實現相對定位的效果。除了長條進度，常用的圓環進度，可以直接通過上面提到的扇形工具，即便是組件後也能調節長度、粗細（真是強大）。

2.在創建列表的時候，可以通過調整 AL 中的內邊距，輕鬆實現縮進效果。

3.在創建按鈕結構時，一個文本添加 AL 就可完成自適應按鈕（Sketch 要文字和背景分開 2 層），也可以通過 AL 輕鬆實現隱藏顯示圖標，自適應寬高達到自由組合的效果（希望下一代的 AutoLayout 即將支持相對、絕對定位）。當然 Component Variants 出來之後，結構的事情可以交給它來處理。

4.通過設定為 Spaces Between 可以實現 AL 內的元素均分排列，還可以通過減少父級 Frame 的寬高 來實現重疊的效果。（希望下一代的 AutoLayout 即將支持負間距）

5.在表格製作中，通過建立行級、列級 AL，極大的方便調整不同單元格的位置、排序。

以上交互表現是基於 Beta 的交互組件功能，目前已經正式發佈，無需申請體驗。

Component Variants

Component Variants 可以説是對不同的組件狀態進行了一個很好的規整，而組件設計中的 Property 和 Value 可以和 Web 前端的組件的命名對應起來，這樣在 Figma 的 Inspect 面板就可以直接提供複製，更好地打通前端交付。

注意：官方不建議使用變體來分組不同的圖標。如果你有同一圖標的不同尺寸、狀態，那麼你可以將這些圖標合併為變體。

例如常用的開關，可以分成 iOS 和 Android 的兩個樣式，每個樣式裏面有開和關，又包含了默認、按下、禁用三種狀態，將這 2x2x3=12 種狀態一一羅列就形成了一個開關完整的 Component Variants。

AutoLayout + Component Variants

在做 APPUI 的時候經常會遇到 Feeds 流設計。除了使用基礎的 AutoLayout 佈局，還可以對不同的內容區域如橫圖、豎圖、視頻、1~9 圖等進行 Component Variants 的組合。這樣就可以即是一個自動佈局又能切換不同的內容狀態，減少生成宂餘的組件組合。

這個也類似於 Slot 插槽的概念，中間部分可以切換不同的個數、佈局。

原型交互

Figma 的原型交互除了最最最基礎的水平和垂直滾動，還可以由觸發器配合響應的動作，動作可以調整使用不同的預設動畫，動畫可以具體設定緩動曲線。

「組件集內部交互」此外 Figma 加強了組件交互的功能，配合 Component Variant 可以設置組件集內的交互，可以實現例如按鈕常態、按下、鬆開等不同的交互狀態。

「子組件繼承交互」對母組件 Component 添加了交互行為的，Instance 同樣也會生效。比如對母組件的返回按鈕，添加了一個 OnClick = Back，那隻要是在界面中有引用到這個返回組件的界面，點擊返回的時候 ，都會自動返回上一層界面。

「多條交互流」在此之前 一個頁面只能有一條交互流作為展示，增強之後可以在同一頁面下中添加不同的交互流，比如信息流程、支付流程。

接下來用一些比較有意思的案例講述一下：

Smart Animate：類似 Keynote 的神奇移動，兩個 Frame 中，命名相同的圖層會生效，命名不同的則通過淡入淡出過渡。通過 SmartAnimate 可以實現兩個關鍵幀之間的位移、旋轉、不透明、形狀變化、字號變化等的自動補間動畫。

Open Overlay：可以很方便地添加彈窗的動效，提供不同的位置和手動定位、是否啟用蒙層外點擊作為關閉、以及自動產生的蒙層顏色，還可以通過 Swap Overlay 切換不同的彈窗。

Scroll To：常見於網頁的錨點定位，可以在詳情頁點擊評論按鈕 自動滑動到評論區，可以點擊按鈕返回到內容區頂部。

After Delay：常用於做一些自動循環的動畫效果，比如此次封面的彩虹條動畫就是使用了 AfterDelay 來完成的。

基本上基礎的交互操作、動效轉場 Figma 都能輕鬆實現，但是還有一些進階的變量邏輯判斷、重力感應、時間軸動畫等還是需要通過專業的工具去實現。

大家也儘可能評估好動畫的製作成本，也不是非得使用 Figma 去硬尬製作不擅長的動效，Figma 同樣可以用 AEUX 導入到 Ae 去製作。

1. 案例-Smart Animate

類似簡化版 MD 卡片的懸停漣漪效果，通過 Frame+Radius 設定好兩個關鍵幀，把淺藍色的 Frame 層 放大填充至整個卡片（卡片打開 ClipContent 內容裁剪），在淺藍色同一層級複製一份作為白色圈圈，從小放大 代替原來的淺藍色圈圈。

另一個經典案例是簡化版 MD 的 Float Btn，通過 Frame+Radius+ClipContent 設定好兩個關鍵幀，先設計展開後的效果，再縮減成按鈕會好製作一些。主要是設定好 Frame 內元素的約束，把內容設為 Left Top，把圖標設定為 Bottom Right。縮減成按鈕只需調整 Frame 的尺寸和調整內容的透明度為 0。同理也可以去實現類似 iOS AppStore 卡片點擊後的轉場。

2. 案例-Open Overlay

OpenOverlay 可以很方便地添加彈窗的動效，提供不同的位置和手動定位、是否啟用蒙層外點擊作為關閉、以及自動產生的蒙層顏色，還可以通過 Swap With overlay 切換不同的彈窗。

此外在真實的案例中，你可以給 X 母組件添加一個 Close Overlay 的交互，這樣只要有彈窗層的地方都可以用 X 自動關閉。這也是子組件繼承母組件交互的一種高效方式。

3. 案例-ScrollTo

簡單實用的滑動動畫，可以製作快速返回頂部、或者滑動到指定區域。在指定內容區域 Frame 為 Horizontal / Vertical Scrolling 橫向或者豎向滑動後，給按鈕新增一個 ScrollTo 的動作直接拖拽到剛才的內容區域 Frame，保持 X、Y 的偏移量為 0 即可，如果你需要滑動到內容區的第二個區塊也可以，在此之上還能設定偏移量，避開如頂部導航條的遮擋。

在一些橫滑的交互上，一般會對滑動卡片做一層 AutoLayout，左對齊並給一個 PaddingLeft（如綠色左邊的間距），那麼在 ScrollTo 上需要設定偏移量避免貼邊顯示（如淡紅色塊的間距）

注意，在滑動到最右時，即便 AutoLayout 設定了 PaddingRight，但 ScrollTo 並不會生效，需要添加一個額外的色塊，設置為 0 透明度代替右邊邊距。

4. 案例-After Delay

課後有很多同學都提及這個騷氣的小彩虹條怎麼做，其實原理很簡單想明白了就好。可以分兩步實現：

彩虹條的自循環動畫：創建三個並列的彩虹條（Constraints 約束調整為 Scale 縮放，便於後續做拉伸變形），設定組件 Frame 只顯示一個的寬度，讓這三個彩虹條不斷地發生位移變化，並且讓位置變化得到一個循環。

在這個過程中，通過 AfterDelay （1ms，即 1 毫秒無延遲），ChangeTo（Frame） 組件集內的切換動畫切換不同的關鍵幀，SmartAnimate（Liner，2000ms）通過智能動畫自動補間位移動畫。

注意這裏使用 Liner 勻速可以有無縫循環的感覺，如果使用其他緩動曲線也行，但會有一些頓挫感。2000ms 這個可以自行調試設定。

變形拉伸或改變角度：得到自循環的動畫後，其實已經能夠隨意拉伸了。此時可以創建一個新的組件 Frame，拉伸填滿並調整填充，即可得到一個自適應帶角度的彩虹條了。如果還需要添加圓角，直接在組件 Frame 層設置圓角並勾選 ClipContent 即可。

同樣，常用的 loading 也可以簡單地通過旋轉 3 次 120 度實現。

以上都只是冰山一角，更多需要你切身地去操作和了解交互功能，才能更好的理解它們。

審查元素

1. 分享鏈接和權限管理

當我們在 Figma 設計完後，就可以把 Figma 鏈接分享給上下游的同事，這時候我們首先需要謹慎的設置一下 Figma 文件的權限。Figma 可以從 Organization（公司組織）>Team（團隊）>Project（項目）>File（文件）>Prototype（原型）都可以獨立設置權限邀請。

但是，任何一個編輯者都可以邀請另一個人作為編輯者或者調整另一個編輯者的權限，並且無需管理員同意。相當於一個羣聊管理員，能邀請另一個人作為管理員，而不需要經過羣主。（也許是因為 Figma 多人編輯的理念造成的？對於付費團隊按編輯者人數計算來説，要謹慎注意）

權限的設置主要集中在團隊，對於個人草稿 Drafts 和免費團隊的設置則只有更少選項（也就是付費才有更安全的權限設置）。

Organization（公司組織）：獨享最全的管理安全權限，登錄管理、插件管理、字體管理、組件管理等。

Team（團隊）：團隊級別主要管理具體成員權限，如果處在公司級的團隊，可以設置為需要邀請才可以加入團隊，或者設為私密團隊。

Project（項目）：對項目層級，如果想有某個項目作為保密項目，可以設置 Remove team access，這樣團隊成員就無法訪問這個項目了，只有受邀請的人（Only People Invited to this file）可以訪問。

File（文件）：在文件層面，右下角有一個隱藏的功能 Alllow Viewers to Copy、Share、And export from this file，默認是勾選啟用的。

關閉後可以避免設計文件被惡意複製、分享和導出，但是需要注意如果通過 Figma 交付給開發的話，開發一般都是 Viewer 權限則不能導出切圖了。

Prototype（原型）：除了常規的 can view，還有一個更細緻的 can view prototypes only，如果設置為 can view，是可以從原型交互直接 open in editor 變相打開了對應的文件，也就是 can view 相當於是得到了文件的查看權，不僅僅是可訪問原型。

注意：

如果你處於公司級下，默認是開啟 Anyone at Organization with the link 公司內任何知道鏈接的人都能訪問，這就導致同公司但不在團隊內的其他同事，是可以通過分享的鏈接，在不加入團隊的情況下直接訪問到這個文件。如果文件上需要保密性，建議設置為 Only People Invited to this file 只有邀請的人才能訪問，這樣就可以限定為團隊內的成員+邀請的成員才能訪問到。

由於組織版不限團隊、項目、文件梳理，所以建議可以一個項目作為 Team，這樣一來要創建一個保密項目，就可以把 Team-Setting-Acess 設置為 Close（成員加入需要本團隊管理員同意）或者 Secret（保密，組織團隊列表無法搜索，需本團隊管理員邀請加入）。針對 Project 項目下的每個文件，打開 Team Access（團隊成員可訪問），文件設置為 Only People Invited to this file。

一般來説説使用付費團隊就已經夠用了，但是由於付費團隊的每個成員都是可以使用個人賬號登錄，因為也會對管理帶來一定的困難，因此也建議統計好團隊成員的賬號，及時警惕移除有問題或臨時協作的用户。在設置編輯權限的時候，做到最小化權限分配，及時回收權限，避免因權限問題導致項目資源風險。

2. 審查元素

作為雲協作的 Figma，自帶了標註功能已經蠻完善的了。能夠很直觀的對尺寸、圓角、文字、填充、邊框、效果、動效等進行標註註釋：

對組件的解析：能夠明確顯示組件的名字，和上層組件的名字，並且提供定位源。同時顯示組件的描述和文檔鏈接（如有的話），進一步對組件的寬高、定位、圓角、混合模式、約束參考進行解析。

對文本、顏色的解析：提供文本的複製、字體規範代號，字體、字重、字號、行高的解析，對顏色提供色號、不同的色彩模式、線框等（對自定義虛線沒有直接實現的值，但是也能以 SVG 形式解析對應的 Join、Cap、Dash pattern）

對代碼解析：提供 CSS、iOS、Android xml 等解析，與同類產品一樣僅作參考。

對動效的解析：提供觸發器、目的地、動畫、緩動曲線、時長等描述。

對切圖資源輸出：提供多倍率、多格式的導出。

基於 Figma 原生支持這麼多的解析已經足夠在開發階段幫助開發查看設計稿具體的標註，而更多的期待可能是對 DSL 的理解和解析。

如果能對字體預設和顏色預設等 DesignToken 提供一鍵導出到 plist/Xml 的形式（具體類似 Zeplin 的 DSL），那對傳達整體的原子設計理念有更完善地執行落地。

3. 編輯者和審查者的一個小差異

編輯者（你的視角）和查看者（開發視角）的 Inspect 模式有略微區別，如一個 icon 輸出尺寸 192×192，內部路徑可能 120×120。編輯者點擊時是 192×192，查看者點擊時會直接穿透，點到 120×120 的路徑，導致開發大小不一致。

解決方法：

1. 在圖標組件上面設置一層黑色 0.001%-Screen 混合模式（避免顏色顯示和導出有影響）
2. 在圖標組件上面設置一層白色 0.001%-Dark 混合模式（避免顏色顯示和導出有影響）
3. 和開發約定切圖都是整數，如遇穿透問題，使用按 command+點擊 捕捉顯示 Frame 的大小。

總的來説，懶得解釋就通過一層障眼法蒙在上面，也可以事先和開發做約定培訓。

4. 切圖輸出交付

雖然市面上的很多交付插件都可以一鍵導出切圖，但是往往實際開發的時候，不同的開發對同一個資源的命名方式不同，會導致重複引入不同名字但缺失相同的資源造成宂餘，因此這塊還是建議自行 通過 SVN、GIT 等進行版本管控資源和命名。

比較高級的方法可以參照《高效協作 I 資源庫的協作方式》「1」、《使用 Figma + GitHub Actions 完成 SVG 圖標的完全自動化交付》「2」。

和平營地的使用&技巧

1. 和平營地使用 Figma 前的問題

規範不統一，效率低 → 建立視覺、開發組件庫

視覺字號顏色規範、切圖不統一、開發無組件化意識，協同設計效率偏低

設計資源缺乏管理 → 推動開發優化資源宂餘

多個設計開發團隊經手，歷史遺留問題滾雪球 平台業務資源宂餘

在使用 Figma 之後：情況就可以完全不同了，從交互設計到視覺設計，最後到策劃審核和設計交付都可以在 Figma 上一站式完成，多人實時協作發揮了巨大的作用，更加敏捷了。

2. 營地的柵格樣式

在營地中，定義以 4/8 作為基礎網格標準建立常用的柵格間距、尺寸。

在圖片比例上定義常用的 16 比 9、4 比 3、3 比 2、1 比 1 等在適配時保持等比縮放，以 CenterCrop 模式，避免適配時被拉伸壓扁。

3. 營地的字體樣式

在營地中，字體樣式主要有常規系統字體和品牌字體 Agency，因此分別使用了 T 和 A 作為代表，融入了 Regular、Medium、Bold 三種字重，以 R、M、B 分別代表；

以 10 號作為最小基礎，以 2/4/8 作為遞增規律產生常用的 10、12、14、16、18、20、24 等字號；統一以 150%作為基礎行高，個別 175%為寬行高；

字體樣式配以對應的中文註釋，最終形成體系如 T12R、T12M、T12B 等見名知意的字體代號。在方便開發使用代號的同時，加快設計的統一判斷選擇。

4. 營地的顏色樣式

在營地中，顏色樣式圍繞品牌色，參考行業同行對對比度可讀性的研究，進行一系列的 色階處理。對常用的實色、漸變、半透明漸變（蒙版）以 8 位 ARGB 提供對應色值。形成一套深淺對應的中性色和彩色體系。

此外對常用的頭像、素材、圖案作為填充預設，方便組件變體調整切換，避免使用插件產生隨機的圖像填充。

5. 營地的圖標組件系統

在營地中，此次改版對名字和資源的管理都格外重視，想要輕鬆剔除宂餘的資源，就要有一套合理可持續的規則管控切圖資源，通過業務名_模塊_類別_功能_狀態_尺寸.格式規範管理切圖。此外在組件的描述中加入適當的關鍵詞，能夠有效提高搜索圖標的準確度。

6. 其他實用技巧

Selection Colors：

框選一個範圍或者一個畫板，會羅列檢查出畫板內所有顏色，對批量替換為規範色頗有幫助。

ClipContent：

有時候想在一個畫板內裁剪（隱藏）超出的部分（類似蒙版，但侷限於圓角侷限），直接勾選 ClipContent 就可以啦！

寬度或者高度為 0：

設置寬度或者高度為 0.001，可以在自適應的按鈕 AL 做出不佔據寬高的，類似相對/絕對定位的效果。

7. 效率之王——快捷鍵

QuickAction：

「Mac」Command⌘ + / 或 +P

「Win」Control + / 或 + P

直接輸入就可以搜索調用菜單命令、插件等不同的快捷操作，十分方便高效。

TidyUp：

「Mac」Control^ + option⌥+T

「Win」Ctrl + Alt + T

一鍵快速整理圖層，另外還有各種對齊快捷鍵

「Mac」option⌥+ WASD 和 option⌥ + V/H

「Win」Alt + WASD 和 Alt + V/H

Copy As PNG：

「Mac」Command⌘ +Shift + C

「Win」Ctrl +Shift + C

一鍵快速導出某個畫板圖片到剪貼板，方便複製粘貼到聊天窗口。

8. 給需求加狀態描述，分享鏈接快速定位

如果你使用 Figma 一站式設計交付，那麼通過自主設計一個自定義的組件，在 Figma 中劃分區域吿知開發哪些是進行中 ，哪些是可以進入開發的，並且直接羅列對應的組件，加強對組件的構建意識。

此外 Figma 對每個 Frame 都可以生成一個指向鏈接，那麼右鍵這個框架就可以直接拿到鏈接，分享給產品開發，十分方便。

Figma 社區

Figma 的社區集合了文件、用户、插件，在這裏你可以找到很多優秀的設計範例，優秀的高玩用户，通過高玩關注 去看他關注了誰，站在巨人的肩膀上。

1. 用户

Figma 官方是必不可少的，除此以外你可以搜索各類大廠，關注他們的分享。

JoeyBanks：分享了很多 iOS 的組件，並且也會用最新的組件集方式重新整理一次。

Rogie：Figma 官方的成員，在 youtube 上也很活躍，分享很多不為人知的技巧。

在國內，主要關注了草帽 SMao、Mr.Biscuit、RyanJyu，這些也是在 Figma at Tencent 的一次交流會上了解了更多。

草帽 SMao：可以上 Bilibili 搜到他的 Figma 教程，分享了很多工作中的實戰經驗技巧，我也是看他的視頻入門，非常贊。

Mr.Biscuit：人稱小老虎，致力於讓 Figma 變得更好，開發了很多插件，例如 Instance Utils 能夠在不分離組件的情況下 調整組件內部結構。例如 Outline to Single Stroke，把以填充形式線型的圖標轉換以描邊形式的線型圖標。

2. 文件

你可以在社區裏搜索開源共享的 Figma 設計源文件，從一些源文件中你能學習到別人使用 Figma 的一些技巧、規範，並且你也可以基於別人的文件做二次設計迭代。

3. 插件

Figma 的社區裏少不了優秀的插件，通過下載和點贊數量，能夠發現很多優秀的插件。

Figma 的插件你生態非常豐富，再此也推薦一些用過的，特別喜愛的插件我標了個心：

太多的插件介紹就不一一贅述了，也可以到一些插件網站了解。

FEATURED FIGMA PLUGINS

網站鏈接： http://figma.tovi.fun/

每月一期，給你推薦當月更新的、值得嘗試的 Figma 插件。

Figma 中文社區

網站鏈接： http://www.figma.cool/

致力於在國內推廣 Figma，這裏有開發的 Figma 工具箱、設計資源精選、插件合集和 Figma 官方文檔。

Awesome Figma Tips

網站鏈接： http://awesomefigmatips.com/tips

除了推薦插件以外，還用動圖形式展示了各種 Figma 的技巧。

語雀-Figma 交流專欄

網站鏈接： http://www.yuque.com/annray/csoz4r/zsn8mi

除了插件推薦以外，從各類方向總結了一些經驗。

Figma 還能這麼玩

從來不敢想象能在一個生產力工具上，如此玩出花。

在基於雲協作的理念上，可以在上面製作一些小遊戲，多人互動。

也可以在上面發佈名片交友信息

又或者是做好設計簡歷簡歷個人網站和作品集

又或者像我現在用 figma 直接做 ppt 演示文檔，還能當會議投屏給大家演示，非常好用。

當然 Figma 也向前衍生出 FigJam 致力於前期的一些想法收集，會議，用研等等，像白板一樣簡單好用。

最後

附上整個 PPT-Figma 的分享鏈接： http://www.figma.com/community/file/993179495306722989 ，大家可以 duplicate 複製一份以後，點擊右上角播放原型，查看 ppt 裏的動效製作，自制了循環動效（頂部、封面封底的彩虹循環）、PPT 備註交互（按 P 可以顯示當前頁的備註）。覺得好的話記得點贊喲~歡迎隨撩~

文中相關鏈接

• 《高效協作 I 資源庫的協作方式》
  http://isux.tencent.com/articles/tencentdocs-efficient-methods.html
• 《使用 Figma + GitHub Actions 完成 SVG 圖標的完全自動化交付》
  http://mp.weixin.qq.com/s/mRtHMo6P8cLzKtnDjpd4Hw

歡迎關注作者微信公眾號：「JeasonDesign」