完成了一個(gè)比較完整的設(shè)計(jì)規(guī)范后，才發(fā)現(xiàn)雖然現(xiàn)在的Figma越來越得心應(yīng)手，但不僅僅是這些極其復(fù)雜的復(fù)制粘貼邏輯，基本上所有的功能都可以流暢使用。 放下心來，我開始反思在使用Figma過程中遇到的坑，以及這些年在設(shè)計(jì)實(shí)踐中不合理的地方。

所以我打算簡單梳理一下比較科學(xué)的學(xué)習(xí)路徑和使用流程。 一方面可以作為想學(xué)習(xí)Figma的朋友參考，另一方面也可以作為自己的參考書，規(guī)范自己的設(shè)計(jì)流程。

首先，這篇文章對于沒有使用過原型制作工具的朋友來說是非常不友好的。 很遺憾，這篇文章針對的是有一定經(jīng)驗(yàn)的朋友。

如果你之前嘗試過（）、（）、Axure等專業(yè)的原型制作工具或其他此類產(chǎn)品，感覺畫圖多了，設(shè)計(jì)體驗(yàn)不好，想要一個(gè)工具方便日常使用，不作為主要工作。 工具，那么絕對是值得學(xué)習(xí)和體驗(yàn)的，哪怕只是新鮮的味道，但你可以在一定程度上感受到Figma帶來的設(shè)計(jì)變革，對于產(chǎn)品設(shè)計(jì)思維的提升是非常直觀的。

下面將從Figma的使用、學(xué)習(xí)和實(shí)操三個(gè)方面對Figma進(jìn)行介紹，主要講解學(xué)習(xí)和使用過程中的難點(diǎn)和核心思想，最后提供一個(gè)簡單的設(shè)計(jì)規(guī)范構(gòu)建思路供參考。

1. 原型設(shè)計(jì)工具

提到，很多人都會想到在線文檔。 這份結(jié)合了 Docs 和 的終極筆記聲稱可以在一個(gè)在線文檔中收集所有知識鏈接。

同樣受到韓國投資人追捧的Figma在設(shè)計(jì)領(lǐng)域。 然而，與紅海中的在線協(xié)作文檔市場相比，F(xiàn)igma自上線以來就成為了原型設(shè)計(jì)工具中最閃耀的一款。 Adobe XD 落后了。

雖然在市場接受度還不高的國外，F(xiàn)igma也成為了專業(yè)設(shè)計(jì)師的專屬偏愛，也吸引了不少“山寨”（比如實(shí)時(shí)設(shè)計(jì)）。 究其原因，F(xiàn)igma真正做到了，但又足夠開放，擁抱生態(tài)，擁抱設(shè)計(jì)師，不斷優(yōu)化自身的功能和用戶體驗(yàn)，成為新時(shí)代設(shè)計(jì)工具的標(biāo)配方案。

此外，F(xiàn)igma 的免費(fèi)策略鼓勵(lì)獨(dú)立開發(fā)者幾乎零成本上手。 對于小規(guī)模的團(tuán)隊(duì)來說，F(xiàn)igma 幾乎是唯一能找到的免費(fèi)協(xié)作工具（連 Blue Lake 都開始無限收費(fèi)了。。。）這些比 友好上千元的 Adob??e 產(chǎn)品，堪稱良心。 對于絕大多數(shù)圍觀者來說，F(xiàn)igma 的邏輯是：通過良好的個(gè)人體驗(yàn)sketch輸出規(guī)范，過渡到向團(tuán)隊(duì)推薦它。

，F(xiàn)igma 大殺四方的秘密工具。

雖然 Figma 可以替代所有主流的原型制作工具。 對于產(chǎn)品總監(jiān)和交互設(shè)計(jì)師來說，簡單的原型、高保真設(shè)計(jì)稿、交互說明、產(chǎn)品演示、解決方案講解，都可以通過鏈接直接在瀏覽器上完成，非常極客。 更重要的是，你可以使用 Figma 來設(shè)計(jì)簡歷和作品集（比如我）、演示文稿和頭腦風(fēng)暴白板，并將 Figma 的共享和協(xié)作功能用作團(tuán)隊(duì)看板......

可以說，不僅僅是設(shè)計(jì)位圖和專業(yè)級的交互動畫，F(xiàn)igma 都有相應(yīng)的功能可以實(shí)現(xiàn)。 難能可貴的是，它不僅“可實(shí)現(xiàn)”，在某些場景下Figma甚至可以替代專業(yè)工具的使用。

比如簡歷，利用Figma優(yōu)秀的排版能力和基于云端的特性，你可以簡單的優(yōu)化你的設(shè)計(jì)然后丟給用人單位，對方不需要下載龐大的壓縮包，即時(shí)查看也提升了質(zhì)量的好作品。 可能性。 對于團(tuán)隊(duì)知識庫，借助語雀等工具，可以將設(shè)計(jì)文件作為鏈接插入到文檔中，直接在文檔中查看產(chǎn)品演示，高效美觀。

對于產(chǎn)品從業(yè)者來說，無論你是獨(dú)立的全棧還是團(tuán)隊(duì)完成一個(gè)設(shè)計(jì)任務(wù)，F(xiàn)igma總能根據(jù)你的需求滿足你的需求。 這是工具的高階，不要讓Figma教你怎么用，而是你想怎么用，就可以用它來搭建你的生產(chǎn)環(huán)節(jié)。

Figma的幾個(gè)優(yōu)秀特性支持生產(chǎn)環(huán)節(jié)。

1）Frame：無限容器，比和更好的設(shè)計(jì)理念

Figma 中的畫框既不像傳統(tǒng)的畫布，也不像視口組合，某種程度上是兩者的結(jié)合。 在頁面中，您可以自由繪制相框，也可以在一個(gè)或多個(gè)對象上構(gòu)建相框。 構(gòu)建后的相框成為后端概念中的“容器”，具有手動布局、邊界限制和調(diào)整約束等諸多特點(diǎn)。 同時(shí)，相框也是一個(gè)單獨(dú)的設(shè)備，具有大小、位置、曲率、圖層效果、填充蒙版、效果調(diào)整、導(dǎo)出等屬性。

因?yàn)橄嗫虿幌拗粕舷录夑P(guān)系，可以做到“框內(nèi)框”。 使用相框，您可以將其用作畫布并在其中制作頁面； 您也可以將多個(gè)設(shè)備組合在相框上進(jìn)行整體調(diào)整。 這個(gè)流程視口會被手動分組，整個(gè)流程顯得井然有序、端莊。 對于成型的相框，可以轉(zhuǎn)化為一個(gè)組件，通過組件完成各種界面設(shè)計(jì)任務(wù)。

2) Team團(tuán)隊(duì)：基于Web，基于云，拉通設(shè)計(jì)上下游

Figma是目前市場上主要的團(tuán)隊(duì)協(xié)作設(shè)計(jì)工具。 這與 XD 和 Axure 有很大不同。 雖然這幾年 XD 和 Axure 逐漸加入了協(xié)作功能，但是把這一切放到 Figma 上就變得非常合理了。 . 可以說只有 Figma 實(shí)現(xiàn)了完全協(xié)作。

基于網(wǎng)絡(luò)和云端意味著所有的設(shè)計(jì)文檔都將放在一個(gè)安全的服務(wù)器上，所有的修改都將實(shí)時(shí)同步，提供既定的編輯歷史，因此無需保存為多個(gè)文件，所有內(nèi)容一環(huán)完成。

PM 和 UI 可以與開發(fā)人員共享進(jìn)行中和創(chuàng)建的設(shè)計(jì)內(nèi)容。 只要打開鏈接，你就可以通過 Figma 發(fā)表評論，一起操作，甚至可以發(fā)起語音評論會議（新版）。 可以看到團(tuán)隊(duì)的通用設(shè)計(jì)系統(tǒng)和共享組件庫，方便統(tǒng)一設(shè)計(jì)開發(fā)。

Figma 為前端預(yù)覽或復(fù)制提供了實(shí)時(shí)視口代碼，開發(fā)者可以直接導(dǎo)入所需設(shè)備的截圖和代碼，大大縮短了交付時(shí)間。 正因?yàn)槿绱?strong>sketch輸出規(guī)范，F(xiàn)igma 非常適合團(tuán)隊(duì)共同參與。 可以說，每個(gè)角色參與的越多，F(xiàn)igma的能力就越能發(fā)揮出來。

可以說，F(xiàn)igma 將原產(chǎn)品設(shè)計(jì)中涉及的線框圖、原型、交互說明、標(biāo)簽草稿等全部整合在一個(gè)頁面上，對開發(fā)團(tuán)隊(duì)來說再友好不過了。

3）流利度：用一個(gè)詞來形容就是流利

流暢性仍然是這些專注于 AllIn 的產(chǎn)品的關(guān)鍵問題。 在這一點(diǎn)上，F(xiàn)igma 的表現(xiàn)可以說是驚艷了。 很難想象在瀏覽器上可以體驗(yàn)到如此絲滑的設(shè)計(jì)產(chǎn)品。 無論設(shè)計(jì)文檔有多大，組件有多少，操作繁多，都不會造成卡頓，在拖拽、編輯、同步協(xié)作時(shí)不會有強(qiáng)烈的感知延遲。

對比其他本土同類產(chǎn)品的卡頓卡頓，F(xiàn)igma的優(yōu)化真的干凈利落。 在保證網(wǎng)絡(luò)不受污染的情況下，F(xiàn)igma 可以高速打開整個(gè)網(wǎng)站，加載速度甚至比很多本地設(shè)計(jì)軟件還要快。

這些順暢不僅是用戶體驗(yàn)上的，更是心理層面上的。 Figma的設(shè)計(jì)區(qū)域特別科學(xué)高效，界面干凈整潔。 整個(gè)界面可以分為編輯開關(guān)、操作區(qū)、圖層區(qū)、屬性調(diào)整四個(gè)部分，其中最大的空間給了操作區(qū)，所以在使用Figma的時(shí)候常常會覺得隨心所欲，同時(shí)，您總能找到您需要的功能。

為此，你可以完全沒有壓力地創(chuàng)作，這就是標(biāo)題所說的不假思索。 由于Figma骨子里的流暢度幾乎不會給你帶來化學(xué)或心理上的中斷感，所以你不用擔(dān)心它會不會突然關(guān)機(jī)。 只要網(wǎng)絡(luò)沒問題，一切都OK。

2. Figma核心能力：組件、插件

如果說以上這些只是小毛病，不能為Figma筑起護(hù)城河，那么我覺得Figma最有特色、最難模仿的兩大法寶就是組件和插件。 后者詮釋了 Figma 對效率和工具性思維的重視，而前者則彰顯了 Figma 難得的開放和進(jìn)取態(tài)度。

1. 組件

奇怪的是每個(gè)設(shè)計(jì)工具都有組件功能，那么Figma的組件有什么好呢？

Figma 的組件堪稱杰作，也完美契合其生態(tài)。

從功能上看，組件主要提供三種能力：可重用、可繼承、可共享。 它們的背后是組件間的三種關(guān)系：組件調(diào)用關(guān)系、組件父子關(guān)系、組件共享關(guān)系。

1）組件調(diào)用關(guān)系

組件調(diào)用是組件的生成和重用。

在 Figma 中，點(diǎn)擊一個(gè)元素后，可以通過點(diǎn)擊正上方工具欄上的“ ”將選中的元素轉(zhuǎn)換為一個(gè)組件。 轉(zhuǎn)換為組件后，其邏輯與普通Frame無異，具有獨(dú)特的一套復(fù)用邏輯。 兩側(cè)的視口區(qū)都有一個(gè)資源欄，會收集文件中的組件和其他已發(fā)布文件的組件。 當(dāng)你在設(shè)計(jì)中需要使用之前構(gòu)建好的組件時(shí)，只需要將組件下拉到操作區(qū)，它會根據(jù)組件落地位置手動進(jìn)行分組。 另外，如果想直接復(fù)制已有的組件，也是可以的。

對于組件，你可以選擇將復(fù)制的組件實(shí)例分開，這樣組件就變成了普通的frame/group/，方便你更改； 還可以將多個(gè)組件合并成變體，這樣組件可以點(diǎn)擊一個(gè)組件，選擇切換到其他形式，這樣做tab很方便，可以快速切換不同狀態(tài)。

在任何一個(gè)子組件中，都可以在屬性中點(diǎn)擊父組件定位到元組件中，方便調(diào)整整體設(shè)計(jì)問題。 同時(shí)，這個(gè)功能是跨文件的，也就是說，對于一些擁有公共組件庫的團(tuán)隊(duì)來說，從云端拉取組件進(jìn)行設(shè)計(jì)時(shí)，可以追溯某個(gè)組件的設(shè)計(jì)原型。

這里的調(diào)用保證了Figma組件設(shè)計(jì)的靈活性，將組件的特性與設(shè)備的特性分離，靈活地應(yīng)用到各種詳細(xì)的設(shè)計(jì)工作中。

2) 構(gòu)成母女關(guān)系

雖然組件的母女關(guān)系指的是組件的變化邏輯。

《》中有類似的組件概念，復(fù)制一個(gè)，復(fù)制的一個(gè)可以根據(jù)的變化而變化。

因此，F(xiàn)igma 增強(qiáng)了此功能。 在 Figma 中，父組件和子組件在視口列表中顯示不同的圖標(biāo)和遮罩從屬關(guān)系。 與Axure類似的功能相比，變得更加直觀，也意味著不需要特地踏入某個(gè)區(qū)域，專門新建一個(gè)文件來存放組件。 一個(gè)你馬上設(shè)計(jì)好的模塊，可以快速的轉(zhuǎn)換成一個(gè)組件，用在別處，而不需要新建一個(gè)頁面，來回調(diào)整。

通過修改父組件的任意一個(gè)屬性，可以同步所有的子組件，子組件的改變不會影響到其他子組件。 如果要讓一個(gè)組件單獨(dú)不受影響，可以把分離出來，這樣根據(jù)設(shè)計(jì)的實(shí)際情況做一個(gè)比較方案會比較好。

兄弟組件之間的關(guān)系也可以任意調(diào)整。 只需要將子組件拖到視口列表的上層，子組件就會成為新的父組件，可以最大程度的方便設(shè)計(jì)工作。 有時(shí)，此功能在設(shè)計(jì)類似模塊時(shí)會產(chǎn)生奇跡。

3）組件共享關(guān)系

Figma充分利用自身的特點(diǎn)，賦予組件自由共享的能力。 這說明在同一個(gè)文件中可以任意使用其他組件和顏色樣式（顏色樣式也算是一個(gè)組件），其他文件可以調(diào)用這個(gè)文件的組件，同一個(gè)團(tuán)隊(duì)使用團(tuán)隊(duì)下很多項(xiàng)目的組件或者團(tuán)隊(duì)的公共組件庫。

我們可以想象兩種情況。 對于新項(xiàng)目，我們可以調(diào)用老項(xiàng)目的基礎(chǔ)組件（如導(dǎo)航、顏色樣式、卡片樣式等），從而可以快速搭建一個(gè)新的項(xiàng)目框架，特別適合保證內(nèi)部設(shè)計(jì)風(fēng)格一致的情況。團(tuán)隊(duì)和產(chǎn)品規(guī)格。 構(gòu)建完成后，可以任意修改調(diào)用的組件，不會影響公共組件庫，非常方便。

對于工程的修改，我們可以先建立元件庫，然后通過改變元件庫的形式來調(diào)整工程中的所有元件，從而調(diào)整整個(gè)設(shè)計(jì)稿。 這在迭代工作中非常實(shí)用，只需要更改組件配置，無需新建頁面（往往新建一個(gè)項(xiàng)目會涉及到重新排版，工作量很大）。

最近，F(xiàn)igma 宣布將支持分支版本。 對于需要做空方案的PM和設(shè)計(jì)師，可以通過借用一個(gè)組件的不同變化，快速搭建兩套方案進(jìn)行對比。

總而言之，組件是 Figma 中一個(gè)非常強(qiáng)大的功能。 學(xué)好組件是入門 Figma 必不可少的一步。 后面會講到如何學(xué)習(xí)如何使用組件，這里就不贅述了。

2.插件

插件是構(gòu)建 Figma 的設(shè)計(jì)理念的一種表達(dá)，這是我非常喜歡的。

插件和相應(yīng)的社區(qū)代表了一種開放和進(jìn)步的態(tài)度。

與Figma相比，插件的數(shù)量并沒有跟上，但從開發(fā)者的積極性和資源社區(qū)的參與度來看，F(xiàn)igma堪稱工具社區(qū)中的標(biāo)桿。

為什么我們在 Figma 中使用插件？ 如果你想了解插件，你需要思考這個(gè)問題。

從Figma的功能來看，是典型的“優(yōu)生厭學(xué)”，核心優(yōu)勢明顯，其他什么的都有點(diǎn)。 這就決定了如果你想使用 Figma 進(jìn)行光制作，你必須使用范圍廣泛的組件來滿足你的某些需求。

比如Figma提供了代碼查看和導(dǎo)入功能，這個(gè)不能離線查看。 如果在斷網(wǎng)的生產(chǎn)環(huán)境中，F(xiàn)igma 無法通過鏈接查看各種指標(biāo)。 社區(qū)里有很多導(dǎo)入插件。 比如國外有一個(gè)插件叫做Heron，可以將這類網(wǎng)頁上的標(biāo)記和剪切圖片導(dǎo)入到html文件中進(jìn)行查看。

目前插件的種類非常廣泛，包括圖標(biāo)、插畫、移動端、顏色、文字、 demo、圖表、中文、圖片優(yōu)化、代碼、3D、設(shè)計(jì)系統(tǒng)、動畫、角度等。通過插件-ins，你可以自定義任何關(guān)于Figma的玩法。

更可貴的是，F(xiàn)igma的插件都是和賬號綁定的。 安裝您的帳戶后，它可以在任何設(shè)備上同步。 與某些本地設(shè)計(jì)工具不同，您必須在更改設(shè)備后重新安裝所有內(nèi)容。 這些體驗(yàn)很容易上癮，你可以根據(jù)需要在線安裝插件，在設(shè)計(jì)中隨時(shí)調(diào)用。

Figma會顯示這個(gè)文件上使用的插件，方便隨時(shí)調(diào)用。

對于我來說，我的插件主要是幫我解決標(biāo)簽導(dǎo)入、手動數(shù)據(jù)填充、圖片調(diào)整、字體調(diào)用等問題。 得益于這種插件，F(xiàn)igma 可以專注于底層能力的開發(fā)，將擴(kuò)展和多樣化的需求交給開發(fā)者，共同構(gòu)建生態(tài)。

還有一點(diǎn)，在Figma中，任何作品都可以上傳復(fù)制，這意味著你可以借鑒眾多大鱷甚至行業(yè)領(lǐng)先公司的設(shè)計(jì)部門的創(chuàng)作，同時(shí)分享你的優(yōu)秀設(shè)計(jì)。

目前，國內(nèi)主流互聯(lián)網(wǎng)公司，如，在其中發(fā)布設(shè)計(jì)規(guī)范體系和設(shè)計(jì)思路，國外大大小小的互聯(lián)網(wǎng)公司，如騰訊，第一時(shí)間將自己的設(shè)計(jì)案例擺在面前并不斷更新，創(chuàng)造了一個(gè)良好的社區(qū)氛圍。

3.如何學(xué)習(xí)Figma

學(xué)習(xí)使用 Figma 是一個(gè)長期的過程。 Figma是典型的易學(xué)難精的產(chǎn)品。 上手非常簡單，即使你從未接觸過原型制作工具，簡單使用一下也能大致了解工具欄中的圖形工具的使用方法。 需要努力去提升，難點(diǎn)在于設(shè)計(jì)思維的產(chǎn)生，如何盡可能的利用Figma的特性來提高設(shè)計(jì)效率，促進(jìn)好的設(shè)計(jì)思維。

1. 入駐策劃階段

如果您真的想學(xué)習(xí)，請先計(jì)劃一下。

1）漢化

Figma漢化 – Figma英文社區(qū)：

2）解決調(diào)用本地字體和英文字體的問題

下載桌面客戶端以加載本地字體或：

Figma 應(yīng)用程序、應(yīng)用程序和字體：

選擇要下載并安裝的字體：

符合國人習(xí)慣的英文插件 – Figma 中文社區(qū)

%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ū)：

可能的網(wǎng)絡(luò)問題（如何提高figma的加載速度？）

2.入門階段

入門階段，重點(diǎn)學(xué)習(xí)Figma的基本操作，勇敢拿起鍵盤創(chuàng)作任何作品。 學(xué)會操作后，就要進(jìn)行實(shí)戰(zhàn)，或者復(fù)制、設(shè)計(jì)更復(fù)雜的頁面。 這個(gè)過程不需要掌握組件的復(fù)雜操作，只需要能夠根據(jù)工具指南制作一個(gè)頁面即可。

這里推薦從官方教程入手：

或者直接體驗(yàn)Figma中的菜鳥指南設(shè)計(jì)文件，按照操作做一個(gè)頁面就大功告成了。

Figma中也有相應(yīng)的教程（注意可以找到中文版）。

如果你比較適應(yīng)國外的學(xué)習(xí)環(huán)境，推薦瀏覽這些教學(xué)網(wǎng)站：

據(jù)悉，推薦查看草帽先生的B站教學(xué)（聲音很好聽）（新手略難，可以看他的基礎(chǔ)教學(xué)視頻）：

以下是常見問題：

在這里你可以看看我收集的一些常用的設(shè)計(jì)網(wǎng)站。

3.高級階段

進(jìn)階階段主要是掌握Figma的一些快捷操作，熟悉組件和組件庫的使用，編輯錨點(diǎn)（學(xué)完可以用來制作圖標(biāo)）。

這里有幾個(gè)網(wǎng)站供參考：

關(guān)于組件，可以先看看官博上的解釋，受益匪淺。

學(xué)會這些以后，你應(yīng)該多去社區(qū)看看，從社區(qū)的設(shè)計(jì)和資源中學(xué)習(xí)別人的想法和吸引眼球的設(shè)計(jì)。

4.實(shí)戰(zhàn)階段

最重要的無疑是建立完整的設(shè)計(jì)規(guī)范。 Figma可以很好地支持設(shè)計(jì)規(guī)范的構(gòu)建，并嘗試使用組件庫為自己的產(chǎn)品構(gòu)建設(shè)計(jì)規(guī)范。

設(shè)計(jì)規(guī)范建立后，可以快速提升整個(gè)設(shè)計(jì)工作的效率，同時(shí)可以從更高的角度考慮如何優(yōu)化產(chǎn)品的用戶體驗(yàn)。

1）確定設(shè)計(jì)原則和適配原則

在這里，您需要確定產(chǎn)品的基本視覺語言和整體色調(diào)，可以用情感板來表示。

適配的原則取決于需要制定多少套設(shè)計(jì)規(guī)范，以及元器件的位置和規(guī)范限制規(guī)則。 需要與開發(fā)進(jìn)行溝通協(xié)調(diào)，確定總體適配方案，確定機(jī)型規(guī)格和單元格式。

2）制定基本風(fēng)格

3）設(shè)計(jì)基本組??件

這部分詳細(xì)具體的設(shè)計(jì)方法可以參考《iOS人機(jī)交互手冊》和官網(wǎng)。 B端產(chǎn)品可以參考阿里集團(tuán)的螞蟻和殼牌的柯。

如有侵權(quán)請聯(lián)系刪除！