科技改變生活 · 科技引領未來
科技改變生活 · 科技引領未來
編輯導語：在進行產品設計時，多種產品設計工具可供我們使用，Figma便是其中一種，那么，Figma可以怎么利用？本篇文章里，作者結合個人經驗，對Figma的用途、核心能力以及學習路徑等方面進行了總結，一起來看一下。完成一次較為完整的設計規范
編輯導語：在進行產品設計時，多種產品設計工具可供我們使用，Figma便是其中一種，那么，Figma可以怎么利用？本篇文章里，作者結合個人經驗，對Figma的用途、核心能力以及學習路徑等方面進行了總結，一起來看一下。
完成一次較為完整的設計規范后，才發現似乎如今對Figma越來越得心應手，除了那些異常復雜的復制粘貼邏輯外，基本上所有功能都能順手使用了。欣喜之余，我開始反思使用Figma過程中遇到的那些坑，以及以往設計實踐中不甚合理的地方。
于是我打算簡單整理出較科學的學習路徑和使用流程，一方面供想要學習Figma的同學參考，另一方面也當成自己的參考冊，規范自己的設計過程。
首先聲明，這篇文章對從沒有使用過原型工具的同學非常不友好，很遺憾這篇文章面向多少有點經驗的同學。
如果你之前嘗試過Photoshop（圖層）、Illustrator（矢量）、Sketch和Axure這種專業原型設計工具或者Powerpoint這類產品，覺得多少作圖做設計體驗不爽，想要一款日常好用又不將其作為工作主力的工具，那它絕對值得你去學習體驗，即便只是嘗個鮮，但多少能感受Figma帶來的設計變革氣息，對產品設計思維的提升是很直觀的。
以下將分成Figma的用途、學習和實操三個方面對Figma進行介紹，主要講清學習使用過程中的難點和核心思路，最后提供一個簡單的設計規范搭建思路以供參考。
一、一款All In One的原型設計工具
說到All In One，很多人會想到在線文檔Notion，這款集合了Google Docs、Airtable、Workflowy、RoamReaseach特色的終極筆記聲稱要把知識的全鏈路都集合在一個在線文檔中。
同為美國投資人青睞的Figma就是設計領域的Notion，只不過相較于一片紅海的在線協同文檔市場，Figma一經推出就成為原型設計工具中最耀眼的那一個，短短幾年就已經把Sketch、Adobe XD甩到腦后。
即便在市場接受度一直不高的國內，Figma也成了專業設計師的獨家偏好，也引來一片“抄襲者”的擁蹙（比如說即時設計）。究其原因，是因為Figma真正做到了All In One，并且足夠開放地擁抱生態擁抱設計者，不斷優化自身的功能和使用體驗，成為新時代設計工具的標準解法。
除此之外，Figma的免費策略使得獨立開發者上手的成本近乎為0，對于規模不大的團隊，Figma幾乎是現有的能找到唯一的免費協作工具（連藍湖都開始無止境的收費…）這種友好比起動輒大幾千的Adobe產品可稱良心。對于絕大多數的觀望者來說，Figma的邏輯是：通過良好的個人體驗過渡到推薦給團隊使用。
All In One ，Figma大殺四方的密器。
Figma似乎可以替代一切主流原型設計工具。對于產品經理和交互設計師來說，簡單原型、高保真設計稿、交互說明、產品演示、方案講解可以直接通過一個鏈接在瀏覽器上完成，非常有geek感。更有甚者，可以利用Figma設計簡歷和作品集（比如我）、演示文稿和腦暴白板，借助Figma的共享協作特性，用來做團隊看板……
可以說，除了設計位圖和專業級交互動畫，Figma有對應的功能可以實現。難能可貴的是，除了“能實現”，Figma在部分場景下甚至可以替代專業工具的使用。
例如簡歷，借助Figma優秀的排版能力和基于云端的特性，你可以將自己的設計簡單優化便扔給用人方，對方也不需下載龐大的壓縮包，即時查看也提升了好的作品被看到的可能性。對于團隊知識庫來說，配合語雀等工具，你可以將設計文件作為鏈接插入文檔中，直接在文檔中查看產品演示，高效且優雅。
對于產品從業人員來說，無論你是獨立全棧還是團隊配合完成一個設計任務，Figma總能隨你的需要完成你的需求。這便是工具的高境界，不要讓Figma教會你怎么用，而是你想怎么用，就可以使用它搭建你的生產鏈路。
支撐生產鏈路All In One的是Figma幾個優秀特性。
1）畫框 frame：無限制的容器，比畫布、圖層更好的設計概念
Figma里的畫框既不像傳統畫布，也不是一種圖層組合，某種程度上它是兩者的組合。在一個Page中，可以自由繪制畫框，也可以對一個或多個對象上建立畫框。建立之后，畫框就成為前端概念中的“容器”，具備自動布局、邊界限制和調整約束的諸多特性。同時，畫框也作為一個單獨的元件，具備大小位置曲率、圖層效果、填充描邊、效果調整、導出等屬性。
由于畫框沒有對上下級關系做限制，因此可以“畫框套畫框”。使用畫框，可以把它當做畫布，在上面制作頁面；也可以將幾個元件組上畫框，用以在整體上調節。這個過程圖層將自動編組，整個過程變得有序而優雅。對于成型的畫框，可以將其轉化為組件，通過此可以完成各類界面設計作業。
2）團隊 team：基于web，基于云，拉通設計上下流
Figma是目前市面上主打團隊協作的設計工具，這點和Sketch有很大不同，即使Sketch、XD包括Axure這幾年逐漸加上了協作的功能，但這一切放在Figma身上，才顯得十分合理。可以說，只有Figma做到了完完全全的協作。
基于web和云，意味著所有的設計文稿將放在安全的服務器上，所有更改都即時同步，提供完善的編輯歷史，因此無需保存為多個文件，所有內容都在一個鏈接中完成。
PM和UI可以把創作中和創作好的設計內容分享給開發人員，大家只要打開鏈接就可以通過Figma打點評論、一起操作甚至發起語音評審會議（新版本），大家可以看到團隊共同的設計系統和共享組件庫，方便統一設計和開發。
Figma提供了實時的圖層代碼給前段預覽或復制，開發可以直接針對需要的元件導出切圖和代碼，極大地縮短了交付的時間。正因為此，Figma特別適合團隊內共同參與，各個角色可以說參與越多，Figma的能力就更加凸顯。
可以說，Figma把原本產品設計中涉及到的線框圖、原型稿、交互說明以及標注稿全集成在一頁上，這對開發團隊簡直不能更友好了。
3）流暢 Fluent：一個詞形容，就是流暢
對這種主打All In的產品來說，流暢始終是關鍵問題。在這點上Figma的表現可以說嘆為觀止。很難想象在瀏覽器上可以體驗到如此絲滑的設計產品。無論多大的設計文稿、多少個組件、各種操作，也不會造成卡頓，拖動、編輯、同時協作絲毫不會有強感知延遲。
相比起同類的本地產品各種卡死、卡頓，Figma的優化實屬清流。在保證網絡暢通不被污染的情況下，Figma能做到整個網站高速的打開，加載速度甚至比很多本地設計軟件要快。
這種流暢不僅是使用體驗上的，更是心理層面上的。Figma的設計區域劃分非常科學高效，界面干凈整潔。整個界面可以分為四塊：編輯切換、操作區、圖層區、屬性調整，且最大的空間都給了操作區，因此使用Figma的時候常會覺得隨心所欲，同時又總能找到需要的功能。
因此，你可以完全無壓力地開展創作，這便是題目所說的無需思考。因為Figma骨子里的流暢感幾乎不能帶給你物理或心理上的打斷感，你也不用擔心它會不會突然宕機，只要網絡OK，一切都是OK的。
二、Figma核心能力：組件、插件
如果說以上提到的都只是小打小鬧，不能構筑Figma的護城河，那么我認為Figma最與眾不同的最難模仿的兩個法寶是組件、插件。前者展現Figma注重效率和工具性的思考，后者體現Figma一種難得的開放進步心態。
1. 組件 Component
說來很奇怪，每家設計工具都具備組件功能，Figma的組件厲害在哪呢？
Figma的組件是集大成之作，同時也完美契合其生態。
從功能上看，組件主要提供三種能力：可復用、可繼承、可共享，背后體現了組件的三類關系：組件調用關系、組件父子關系、組件共享關系。
1）組件調用關系
組件調用是組件的形成與復用。
在Figma中，點擊元素后，可以通過點擊正上方工具欄的“創建組件”將所選元素轉化成組件。轉化為組件后，它的邏輯和一般的frame并無區別，但是他獨有一套復用邏輯。左側圖層區有個資產欄，這里會收集文件中的組件以及已發布的其他文件的組件，在設計中需要用到之前建立的組件時，只需要將組件拉出來到操作區，它會根據組件的落地位置自動編組。另外，如果你想要直接復制已有的組件的話也是可以的。
對于組件，可以選擇把復制后的組件進行分離實例，這樣組件就轉化成了普通的frame/group/元素，方便你對其改動；也可以將多個組件合并為變體，這樣組件就能實現點擊一個組件，選擇切換到其他的形態，這樣非常方便做tab和快速切換不同狀態。
在任意一個子組件中，點擊屬性中的定位到父組件便可以定位到元組件中，這樣方便調整整體設計問題，同時這個功能是跨文件的，也就是說，對一些有公共組件庫的團隊來說，在從云拉取組件進行設計時，可以對某一組件的設計原型進行追溯。
這里的調用保證了Figma組件設計中的靈活性，將組件的特性和元件特征分開，靈活運用到各類細節設計工作中。
2）組件父子關系
組件父子關系其實說的是組件的變化邏輯。
在Sketch中有類似組件概念的“symbol”，復制一個symbol，復制出的symbol可以根據主symbol的變化而變化。
Figma繼而加強了這個特性，Figma中父組件和子組件在圖層列表中顯示不同的icon和圖層上下級關系，相對Sketch和Axure的類似功能顯得更為直觀，同時它也代表無需專門進入某一區域或者專門設計新文件來存放組件，你馬上設計完的一個模塊就可以轉化成組件快速用到其他地方，而無需專門在另外的頁面新建來回調整。
通過更改父組件的任何屬性，就可以同步所有子組件中，而子組件的改動則不會影響到其他子組件，如果你想單獨讓一個組件不被影響，就可以將其分離實例，這樣就可以很好地根據設計實際情況做對比方案。
父子組件關系還可以任意調整，你只需要將子組件在圖層列表中拖動至上一級，那么這個子組件就會變成新的父組件，這樣的話可以最大程度的便利設計工作。有時候在設計相似的模塊時，這個功能將發揮奇效。
3）組件共享關系
Figma充分利用了自身特性，賦予組件自由的共享能力。這體現在同一文件可以任意使用其他的組件和顏色樣式（顏色樣式也被視為一種組件），其他文件可以調用本文件的組件，同一團隊使用團隊下諸多項目的組件或者團隊公共組件庫。
我們可以設想兩種情況，對于新項目，我們可以調用老項目的基礎組件（例如導航、button、顏色樣式、卡片樣式等等），從而快速搭建新項目框架，這非常適合保證團隊內一致的設計風格和產品規范。搭建好之后，可以對調用的組件任意更改，而不會影響到公共組件庫，實屬非常方便了。
對于項目的改版，我們可以先建立起組件庫，然后通過修改組件庫的方式將項目內所有組件進行調節，這樣整個設計稿就調整過來了。這在迭代工作非常實用，只需要改組件配置，無需新建頁面（往往新建項目會涉及到重新排版，工作量很大）。
近期Figma宣布要支持分支版本，對于需要做多套方案的PM和設計師來說，借用一個組件的不同改動就能快速搭建兩套方案進行對比，簡直Unbelievable！
總而言之，組件是Figma中非常強大的功能，學習好組件是上手Figma必不可少的步驟，后文將提到怎么去學習組件使用，這里就不贅述了。
2. 插件 Plugins
插件是構建Figma設計理念的體現，是我很喜歡的一點。
插件和對應的社區代表一種開放和進步的心態。
Figma相對于Sketch來說，插件數量確實還沒跟上，但從開發者積極性和共建資源社區的參與度來說，Figma Community堪稱工具社區的一大典范。
我們為什么要在Figma中使用插件？想要理解插件就需要思考這個問題。
從Figma的功能上看，它屬于典型的“優秀的偏科生”，核心優勢很明顯，其他的樣樣都會一點。這決定了如果你要使用Figma用來重度生產的話，就必須利用廣泛的組件滿足自己某方面的訴求。
舉個例子，Figma提供了代碼查看和導出功能，但是這些并不能離線查看，如果在一個斷網的生產環境下，Figma就不能通過鏈接查看各類標注了。社區中有很多導出插件，比如國內有一款叫Heron handoff的插件，就可以把這些網頁上的標注和切圖導出為html文件查看。
目前來看，插件類型非常廣泛，涵蓋了圖標、插畫、移動端、顏色、文字、樣機演示、圖表、中文、圖像優化、代碼、3D、設計系統、動畫、角度等。通過插件，你可以定制出任何關于Figma的玩法。
尤為可貴的是，Figma的插件都是和賬號綁定的，你賬號安裝了之后，就能在任何設備同步，不像部分本地設計工具，換了設備之后一切都要重裝。這種體驗是很上癮的，你可以根據自己的需求在線安裝插件，并且在設計中隨時調用。
Figma還會顯示在此文件上運用的插件，方便隨時調用。
對我來說，我的插件主要幫助我解決標注導出、數據自動填寫、圖像調整、字體調用等問題。正因為有了這些插件，Figma就可以專注于底層能力的開發，將這些拓展定制化的需求交給開發者共建生態。
多說一句，在Figma Community中，可以上傳和復制任何作品，這意味著你可以在這里學習到很多大佬甚至行業龍頭公司的設計部門的創作，同時也可以分享自己的優秀設計。
目前國外主流互聯網公司如Spotify、Microsoft都在上面發布設計規范系統和設計思路，國內的互聯網大小廠如騰訊、即刻都將自己的設計案例放在上面更新，形成一種良好的社區氛圍。
三、如何學習Figma
學習使用Figma是一個長期的過程，Figma是典型的上手容易，精進很困難的產品。它上手極為簡單，哪怕你從未接觸過原型設計工具，你在短暫使用工具欄中的圖形工具也能大概知道怎么用。它精進需要努力，難的是設計思維的形成，是怎么盡可能運用Figma的特性提升設計效率和促進好的設計思考。
1. 入門準備階段
如果你當真要學習，先準備這些。
1）漢化
Figma 漢化 – Figma 中文社區：https://www.figma.cool/cn
2）解決調用本地字體和中文字體
下載桌面客戶端以調用本地字體或者：
Download Figma Desktop Apps, Mobile Apps, and Font Installers：https://www.figma.com/downloads/
選擇font installer下載安裝：
符合國人習慣的中文插件 – Figma 中文社區
https://www.figma.cool/plugins/%E7%AC%A6%E5%90%88%E5%9B%BD%E4%BA%BA%E4%B9%A0%E6%83%AF%E7%9A%84%E4%B8%AD%E6%96%87%E6%8F%92%E4%BB%B6
3）安裝常用的插件
Figma 插件庫 – Figma 中文社區：https://www.figma.cool/plugins
可能遇到的網絡問題（如何提升figma的加載速度？）
2. 入門階段
入門階段，關鍵要學習Figma的基本操作，并且勇敢拿起鼠標創作任何一個作品，學會操作后一定要進行實戰，或臨摹或設計一個較復雜的頁面。這個過程不需要掌握組件的復雜操作，只需要能夠按照工具指引制作出一個頁面即可。
這里建議先從官方教程開始：https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA
或者直接體驗Figma中的新手指引設計文件，按著操作來做一個頁面你就會了。
在Figma Community中也有對應的教程（認真一點你還能搜到漢化版本）。
如果更適應國內學習環境，建議瀏覽這幾個教學網站：
此外推薦查看草帽老師的B站教學（聲音很好聽）（對新手略有難度，可以看看他的基本教學視頻）：
https://space.bilibili.com/108104104/
這里有常見的問題講解：
https://figmacn.com/post/faq
這里可以查看我收集的一些常用的設計網站。
3. 精進階段
精進階段主要掌握一些Figma的快捷操作、熟悉組件和組件庫的使用、錨點編輯（學會了你就可以用來做icon了）。
這里提供幾個網站以供參考：
https://figmacn.com/post/figma-tips-tricks-superpower-your-workflow
https://figmacn.com/post/all-figma-shortcuts
https://figmacn.com/post/iconography-guide
關于組件可以先看看官方博客的講解，受益匪淺。
https://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw
https://mp.weixin.qq.com/s/iOp3aPbqbRr5vnrf0zQANw
學會這些后要多逛社區，從社區的設計和資源中學習別人的思路和亮眼設計。
https://figmacn.com/post/figma-community-guide
4. 實戰階段
最重要的無疑是要搭建一次完整的設計規范。Figma可以很好地支撐搭建設計規范，嘗試運用組件庫搭建屬于自己產品的設計規范。
搭建好設計規范后，可以讓整個設計工作效率得到快速提升，同時可以站在更高的高度審視自己的產品要怎么優化用戶體驗。
1）確定設計原則和適配原則
這里需要針對你的產品確定基本的視覺語言和整體調性，可以用一個情緒版來表示。
適配原則取決了設計規范需要做幾套，組件的位置尺寸限制規則，需要和開發溝通協調確定整體的適配方案，把機型尺寸和單位格式都確定好。
2）制定基礎樣式
3）設計基礎組件
這一塊可以參考iOS人機交互指南和Material Design官網查看詳細具體的設計方法，B端產品可以參考阿里集團的Ant design、Element以及貝殼的Ke design。
本文由 @昊昊不是耗兒 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
王楠