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