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」