編輯導(dǎo)語：在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，多種產(chǎn)品設(shè)計(jì)工具可供我們使用，F(xiàn)igma便是其中一種，那么，F(xiàn)igma可以怎么利用？本篇文章里，作者結(jié)合個(gè)人經(jīng)驗(yàn)，對Figma的用途、核心能力以及學(xué)習(xí)路徑等方面進(jìn)行了總結(jié)，一起來看一下。

完成一次較為完整的設(shè)計(jì)規(guī)范后，才發(fā)現(xiàn)似乎如今對Figma越來越得心應(yīng)手，除了那些異常復(fù)雜的復(fù)制粘貼邏輯外，基本上所有功能都能順手使用了。欣喜之余，我開始反思使用Figma過程中遇到的那些坑，以及以往設(shè)計(jì)實(shí)踐中不甚合理的地方。

于是我打算簡單整理出較科學(xué)的學(xué)習(xí)路徑和使用流程，一方面供想要學(xué)習(xí)Figma的同學(xué)參考，另一方面也當(dāng)成自己的參考冊，規(guī)范自己的設(shè)計(jì)過程。

首先聲明，這篇文章對從沒有使用過原型工具的同學(xué)非常不友好，很遺憾這篇文章面向多少有點(diǎn)經(jīng)驗(yàn)的同學(xué)。

如果你之前嘗試過Photoshop（圖層）、Illustrator（矢量）、Sketch和Axure這種專業(yè)原型設(shè)計(jì)工具或者Powerpoint這類產(chǎn)品，覺得多少作圖做設(shè)計(jì)體驗(yàn)不爽，想要一款日常好用又不將其作為工作主力的工具，那它絕對值得你去學(xué)習(xí)體驗(yàn)，即便只是嘗個(gè)鮮，但多少能感受Figma帶來的設(shè)計(jì)變革氣息，對產(chǎn)品設(shè)計(jì)思維的提升是很直觀的。

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

• Figma用來干什么；
• Figma核心能力拆解；
• 學(xué)習(xí)路徑和相關(guān)資料。

一、一款A(yù)ll In One的原型設(shè)計(jì)工具

說到All In One，很多人會想到在線文檔Notion，這款集合了Google Docs、Airtable、Workflowy、RoamReaseach特色的終極筆記聲稱要把知識的全鏈路都集合在一個(gè)在線文檔中。

同為美國投資人青睞的Figma就是設(shè)計(jì)領(lǐng)域的Notion，只不過相較于一片紅海的在線協(xié)同文檔市場，F(xiàn)igma一經(jīng)推出就成為原型設(shè)計(jì)工具中最耀眼的那一個(gè)，短短幾年就已經(jīng)把Sketch、Adobe XD甩到腦后。

即便在市場接受度一直不高的國內(nèi)，F(xiàn)igma也成了專業(yè)設(shè)計(jì)師的獨(dú)家偏好，也引來一片“抄襲者”的擁蹙（比如說即時(shí)設(shè)計(jì)）。究其原因，是因?yàn)镕igma真正做到了All In One，并且足夠開放地?fù)肀鷳B(tài)擁抱設(shè)計(jì)者，不斷優(yōu)化自身的功能和使用體驗(yàn)，成為新時(shí)代設(shè)計(jì)工具的標(biāo)準(zhǔn)解法。

除此之外，F(xiàn)igma的免費(fèi)策略使得獨(dú)立開發(fā)者上手的成本近乎為0，對于規(guī)模不大的團(tuán)隊(duì)，F(xiàn)igma幾乎是現(xiàn)有的能找到唯一的免費(fèi)協(xié)作工具（連藍(lán)湖都開始無止境的收費(fèi)…）這種友好比起動輒大幾千的Adobe產(chǎn)品可稱良心。對于絕大多數(shù)的觀望者來說，F(xiàn)igma的邏輯是：通過良好的個(gè)人體驗(yàn)過渡到推薦給團(tuán)隊(duì)使用。

All In One ，F(xiàn)igma大殺四方的密器。

Figma似乎可以替代一切主流原型設(shè)計(jì)工具。對于產(chǎn)品經(jīng)理和交互設(shè)計(jì)師來說，簡單原型、高保真設(shè)計(jì)稿、交互說明、產(chǎn)品演示、方案講解可以直接通過一個(gè)鏈接在瀏覽器上完成，非常有g(shù)eek感。更有甚者，可以利用Figma設(shè)計(jì)簡歷和作品集（比如我）、演示文稿和腦暴白板，借助Figma的共享協(xié)作特性，用來做團(tuán)隊(duì)看板……

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

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

對于產(chǎn)品從業(yè)人員來說，無論你是獨(dú)立全棧還是團(tuán)隊(duì)配合完成一個(gè)設(shè)計(jì)任務(wù)，F(xiàn)igma總能隨你的需要完成你的需求。這便是工具的高境界，不要讓Figma教會你怎么用，而是你想怎么用，就可以使用它搭建你的生產(chǎn)鏈路。

支撐生產(chǎn)鏈路All In One的是Figma幾個(gè)優(yōu)秀特性。

1）畫框 Frame：無限制的容器，比畫布、圖層更好的設(shè)計(jì)概念

Figma里的畫框既不像傳統(tǒng)畫布，也不是一種圖層組合，某種程度上它是兩者的組合。在一個(gè)Page中，可以自由繪制畫框，也可以對一個(gè)或多個(gè)對象上建立畫框。建立之后，畫框就成為前端概念中的“容器”，具備自動布局、邊界限制和調(diào)整約束的諸多特性。同時(shí)，畫框也作為一個(gè)單獨(dú)的元件，具備大小位置曲率、圖層效果、填充描邊、效果調(diào)整、導(dǎo)出等屬性。

由于畫框沒有對上下級關(guān)系做限制，因此可以“畫框套畫框”。使用畫框，可以把它當(dāng)做畫布，在上面制作頁面；也可以將幾個(gè)元件組上畫框，用以在整體上調(diào)節(jié)。這個(gè)過程圖層將自動編組，整個(gè)過程變得有序而優(yōu)雅。對于成型的畫框，可以將其轉(zhuǎn)化為組件，通過此可以完成各類界面設(shè)計(jì)作業(yè)。

2）團(tuán)隊(duì) team：基于web，基于云，拉通設(shè)計(jì)上下流

Figma是目前市面上主打團(tuán)隊(duì)協(xié)作的設(shè)計(jì)工具，這點(diǎn)和Sketch有很大不同，即使Sketch、XD包括Axure這幾年逐漸加上了協(xié)作的功能，但這一切放在Figma身上，才顯得十分合理?？梢哉f，只有Figma做到了完完全全的協(xié)作。

基于web和云，意味著所有的設(shè)計(jì)文稿將放在安全的服務(wù)器上，所有更改都即時(shí)同步，提供完善的編輯歷史，因此無需保存為多個(gè)文件，所有內(nèi)容都在一個(gè)鏈接中完成。

PM和UX可以把創(chuàng)作中和創(chuàng)作好的設(shè)計(jì)內(nèi)容分享給開發(fā)人員，大家只要打開鏈接就可以通過Figma打點(diǎn)評論、一起操作甚至發(fā)起語音評審會議（新版本），大家可以看到團(tuán)隊(duì)共同的設(shè)計(jì)系統(tǒng)和共享組件庫，方便統(tǒng)一設(shè)計(jì)和開發(fā)。

Figma提供了實(shí)時(shí)的圖層代碼給前段預(yù)覽或復(fù)制，開發(fā)可以直接針對需要的元件導(dǎo)出切圖和代碼，極大地縮短了交付的時(shí)間。正因?yàn)榇?，F(xiàn)igma特別適合團(tuán)隊(duì)內(nèi)共同參與，各個(gè)角色可以說參與越多，F(xiàn)igma的能力就更加凸顯。

可以說，F(xiàn)igma把原本產(chǎn)品設(shè)計(jì)中涉及到的線框圖、原型稿、交互說明以及標(biāo)注稿全集成在一頁上，這對開發(fā)團(tuán)隊(duì)簡直不能更友好了。

3）流暢 Fluent：一個(gè)詞形容，就是流暢

對這種主打All In的產(chǎn)品來說，流暢始終是關(guān)鍵問題。在這點(diǎn)上Figma的表現(xiàn)可以說嘆為觀止。很難想象在瀏覽器上可以體驗(yàn)到如此絲滑的設(shè)計(jì)產(chǎn)品。無論多大的設(shè)計(jì)文稿、多少個(gè)組件、各種操作，也不會造成卡頓，拖動、編輯、同時(shí)協(xié)作絲毫不會有強(qiáng)感知延遲。

相比起同類的本地產(chǎn)品各種卡死、卡頓，F(xiàn)igma的優(yōu)化實(shí)屬清流。在保證網(wǎng)絡(luò)暢通不被污染的情況下，F(xiàn)igma能做到整個(gè)網(wǎng)站高速的打開，加載速度甚至比很多本地設(shè)計(jì)軟件要快。

這種流暢不僅是使用體驗(yàn)上的，更是心理層面上的。Figma的設(shè)計(jì)區(qū)域劃分非常科學(xué)高效，界面干凈整潔。整個(gè)界面可以分為四塊：編輯切換、操作區(qū)、圖層區(qū)、屬性調(diào)整，且最大的空間都給了操作區(qū)，因此使用Figma的時(shí)候常會覺得隨心所欲，同時(shí)又總能找到需要的功能。

因此，你可以完全無壓力地開展創(chuàng)作，這便是題目所說的無需思考。因?yàn)镕igma骨子里的流暢感幾乎不能帶給你物理或心理上的打斷感，你也不用擔(dān)心它會不會突然宕機(jī)，只要網(wǎng)絡(luò)OK，一切都是OK的。

二、Figma核心能力：組件、插件

如果說以上提到的都只是小打小鬧，不能構(gòu)筑Figma的護(hù)城河，那么我認(rèn)為Figma最與眾不同的最難模仿的兩個(gè)法寶是組件、插件。前者展現(xiàn)Figma注重效率和工具性的思考，后者體現(xiàn)Figma一種難得的開放進(jìn)步心態(tài)。

1. 組件 Component

說來很奇怪，每家設(shè)計(jì)工具都具備組件功能，F(xiàn)igma的組件厲害在哪呢？

Figma的組件是集大成之作，同時(shí)也完美契合其生態(tài)。

從功能上看，組件主要提供三種能力：可復(fù)用、可繼承、可共享，背后體現(xiàn)了組件的三類關(guān)系：組件調(diào)用關(guān)系、組件父子關(guān)系、組件共享關(guān)系。

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

組件調(diào)用是組件的形成與復(fù)用。

在Figma中，點(diǎn)擊元素后，可以通過點(diǎn)擊正上方工具欄的“創(chuàng)建組件”將所選元素轉(zhuǎn)化成組件。轉(zhuǎn)化為組件后，它的邏輯和一般的Frame并無區(qū)別，但是他獨(dú)有一套復(fù)用邏輯。左側(cè)圖層區(qū)有個(gè)資產(chǎn)欄，這里會收集文件中的組件以及已發(fā)布的其他文件的組件，在設(shè)計(jì)中需要用到之前建立的組件時(shí)，只需要將組件拉出來到操作區(qū)，它會根據(jù)組件的落地位置自動編組。另外，如果你想要直接復(fù)制已有的組件的話也是可以的。

對于組件，可以選擇把復(fù)制后的組件進(jìn)行分離實(shí)例，這樣組件就轉(zhuǎn)化成了普通的frame/group/元素，方便你對其改動；也可以將多個(gè)組件合并為變體，這樣組件就能實(shí)現(xiàn)點(diǎn)擊一個(gè)組件，選擇切換到其他的形態(tài)，這樣非常方便做tab和快速切換不同狀態(tài)。

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

這里的調(diào)用保證了Figma組件設(shè)計(jì)中的靈活性，將組件的特性和元件特征分開，靈活運(yùn)用到各類細(xì)節(jié)設(shè)計(jì)工作中。

2）組件父子關(guān)系

組件父子關(guān)系其實(shí)說的是組件的變化邏輯。

在Sketch中有類似組件概念的“symbol”，復(fù)制一個(gè)symbol，復(fù)制出的symbol可以根據(jù)主symbol的變化而變化。

Figma繼而加強(qiáng)了這個(gè)特性，F(xiàn)igma中父組件和子組件在圖層列表中顯示不同的icon和圖層上下級關(guān)系，相對Sketch和Axure的類似功能顯得更為直觀，同時(shí)它也代表無需專門進(jìn)入某一區(qū)域或者專門設(shè)計(jì)新文件來存放組件，你馬上設(shè)計(jì)完的一個(gè)模塊就可以轉(zhuǎn)化成組件快速用到其他地方，而無需專門在另外的頁面新建來回調(diào)整。

通過更改父組件的任何屬性，就可以同步所有子組件中，而子組件的改動則不會影響到其他子組件，如果你想單獨(dú)讓一個(gè)組件不被影響，就可以將其分離實(shí)例，這樣就可以很好地根據(jù)設(shè)計(jì)實(shí)際情況做對比方案。

父子組件關(guān)系還可以任意調(diào)整，你只需要將子組件在圖層列表中拖動至上一級，那么這個(gè)子組件就會變成新的父組件，這樣的話可以最大程度的便利設(shè)計(jì)工作。有時(shí)候在設(shè)計(jì)相似的模塊時(shí)，這個(gè)功能將發(fā)揮奇效。

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

Figma充分利用了自身特性，賦予組件自由的共享能力。這體現(xiàn)在同一文件可以任意使用其他的組件和顏色樣式（顏色樣式也被視為一種組件），其他文件可以調(diào)用本文件的組件，同一團(tuán)隊(duì)使用團(tuán)隊(duì)下諸多項(xiàng)目的組件或者團(tuán)隊(duì)公共組件庫。

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

對于項(xiàng)目的改版，我們可以先建立起組件庫，然后通過修改組件庫的方式將項(xiàng)目內(nèi)所有組件進(jìn)行調(diào)節(jié)，這樣整個(gè)設(shè)計(jì)稿就調(diào)整過來了。這在迭代工作非常實(shí)用，只需要改組件配置，無需新建頁面（往往新建項(xiàng)目會涉及到重新排版，工作量很大）。

近期Figma宣布要支持分支版本，對于需要做多套方案的PM和設(shè)計(jì)師來說，借用一個(gè)組件的不同改動就能快速搭建兩套方案進(jìn)行對比，簡直Unbelievable！

總而言之，組件是Figma中非常強(qiáng)大的功能，學(xué)習(xí)好組件是上手Figma必不可少的步驟，后文將提到怎么去學(xué)習(xí)組件使用，這里就不贅述了。

2. 插件 Plugins

插件是構(gòu)建Figma設(shè)計(jì)理念的體現(xiàn)，是我很喜歡的一點(diǎn)。

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

Figma相對于Sketch來說，插件數(shù)量確實(shí)還沒跟上，但從開發(fā)者積極性和共建資源社區(qū)的參與度來說，F(xiàn)igma Community堪稱工具社區(qū)的一大典范。

我們?yōu)槭裁匆贔igma中使用插件？想要理解插件就需要思考這個(gè)問題。

從Figma的功能上看，它屬于典型的“優(yōu)秀的偏科生”，核心優(yōu)勢很明顯，其他的樣樣都會一點(diǎn)。這決定了如果你要使用Figma用來重度生產(chǎn)的話，就必須利用廣泛的組件滿足自己某方面的訴求。

舉個(gè)例子，F(xiàn)igma提供了代碼查看和導(dǎo)出功能，但是這些并不能離線查看，如果在一個(gè)斷網(wǎng)的生產(chǎn)環(huán)境下，F(xiàn)igma就不能通過鏈接查看各類標(biāo)注了。社區(qū)中有很多導(dǎo)出插件，比如國內(nèi)有一款叫Heron handoff的插件，就可以把這些網(wǎng)頁上的標(biāo)注和切圖導(dǎo)出為html文件查看。

目前來看，插件類型非常廣泛，涵蓋了圖標(biāo)、插畫、移動端、顏色、文字、樣機(jī)演示、圖表、中文、圖像優(yōu)化、代碼、3D、設(shè)計(jì)系統(tǒng)、動畫、角度等。通過插件，你可以定制出任何關(guān)于Figma的玩法。

尤為可貴的是，F(xiàn)igma的插件都是和賬號綁定的，你賬號安裝了之后，就能在任何設(shè)備同步，不像部分本地設(shè)計(jì)工具，換了設(shè)備之后一切都要重裝。這種體驗(yàn)是很上癮的，你可以根據(jù)自己的需求在線安裝插件，并且在設(shè)計(jì)中隨時(shí)調(diào)用。

Figma還會顯示在此文件上運(yùn)用的插件，方便隨時(shí)調(diào)用。

對我來說，我的插件主要幫助我解決標(biāo)注導(dǎo)出、數(shù)據(jù)自動填寫、圖像調(diào)整、字體調(diào)用等問題。正因?yàn)橛辛诉@些插件，F(xiàn)igma就可以專注于底層能力的開發(fā)，將這些拓展定制化的需求交給開發(fā)者共建生態(tài)。

多說一句，在Figma Community中，可以上傳和復(fù)制任何作品，這意味著你可以在這里學(xué)習(xí)到很多大佬甚至行業(yè)龍頭公司的設(shè)計(jì)部門的創(chuàng)作，同時(shí)也可以分享自己的優(yōu)秀設(shè)計(jì)。

目前國外主流互聯(lián)網(wǎng)公司如Spotify、Microsoft都在上面發(fā)布設(shè)計(jì)規(guī)范系統(tǒng)和設(shè)計(jì)思路，國內(nèi)的互聯(lián)網(wǎng)大小廠如騰訊、即刻都將自己的設(shè)計(jì)案例放在上面更新，形成一種良好的社區(qū)氛圍。

三、如何學(xué)習(xí)Figma

學(xué)習(xí)使用Figma是一個(gè)長期的過程，F(xiàn)igma是典型的上手容易，精進(jìn)很困難的產(chǎn)品。它上手極為簡單，哪怕你從未接觸過原型設(shè)計(jì)工具，你在短暫使用工具欄中的圖形工具也能大概知道怎么用。它精進(jìn)需要努力，難的是設(shè)計(jì)思維的形成，是怎么盡可能運(yùn)用Figma的特性提升設(shè)計(jì)效率和促進(jìn)好的設(shè)計(jì)思考。

1. 入門準(zhǔn)備階段

如果你當(dāng)真要學(xué)習(xí)，先準(zhǔn)備這些。

1）漢化

Figma 漢化：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下載安裝：

符合國人習(xí)慣的中文插件 – 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 插件庫：https://www.figma.cool/plugins

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

• 選擇Moonvy團(tuán)隊(duì)開發(fā)的dns測試工具：
• https://github.com/Moonvy/Figma-Net-OK/releases
• 測試環(huán)境下所有Figma服務(wù)地址的真實(shí)速度（不是ping而是真實(shí)連接速度），這樣你就可以通過修改Hosts的辦法指定一個(gè)最快的Figma服務(wù)地址；
• 使用?「SwitchHosts」修改和管理本地 Hosts。

2. 入門階段

入門階段，關(guān)鍵要學(xué)習(xí)Figma的基本操作，并且勇敢拿起鼠標(biāo)創(chuàng)作任何一個(gè)作品，學(xué)會操作后一定要進(jìn)行實(shí)戰(zhàn)，或臨摹或設(shè)計(jì)一個(gè)較復(fù)雜的頁面。這個(gè)過程不需要掌握組件的復(fù)雜操作，只需要能夠按照工具指引制作出一個(gè)頁面即可。

這里建議先從官方教程開始：https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA

或者直接體驗(yàn)Figma中的新手指引設(shè)計(jì)文件，按著操作來做一個(gè)頁面你就會了。

在Figma Community中也有對應(yīng)的教程（認(rèn)真一點(diǎn)你還能搜到漢化版本）。

如果更適應(yīng)國內(nèi)學(xué)習(xí)環(huán)境，建議瀏覽這幾個(gè)教學(xué)網(wǎng)站：

• https://www.figma.cool/learning-paths
• https://figmacn.com/
• https://figmachina.com/

此外推薦查看草帽老師的B站教學(xué)（聲音很好聽）（對新手略有難度，可以看看他的基本教學(xué)視頻）：

https://space.bilibili.com/108104104/

這里有常見的問題講解：

https://figmacn.com/post/faq

3. 精進(jìn)階段

精進(jìn)階段主要掌握一些Figma的快捷操作、熟悉組件和組件庫的使用、錨點(diǎn)編輯（學(xué)會了你就可以用來做icon了）。

這里提供幾個(gè)網(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

以下是畫icon的一些注意事項(xiàng)

• 把圖標(biāo)畫在相同大小的Frame中；
• 注意調(diào)整icon的視覺平衡；
• 圖標(biāo)做成組件，方便快速替換；
• 設(shè)置好constraints，保證拉伸不變形；
• 內(nèi)部圖形記得布爾合并，以便替換時(shí)能夠自動保持顏色，導(dǎo)出的svg代碼更干凈。

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

https://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw

https://mp.weixin.qq.com/s/iOp3aPbqbRr5vnrf0zQANw

學(xué)會這些后要多逛社區(qū)，從社區(qū)的設(shè)計(jì)和資源中學(xué)習(xí)別人的思路和亮眼設(shè)計(jì)。

https://figmacn.com/post/figma-community-guide

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

最重要的無疑是要搭建一次完整的設(shè)計(jì)規(guī)范。Figma可以很好地支撐搭建設(shè)計(jì)規(guī)范，嘗試運(yùn)用組件庫搭建屬于自己產(chǎn)品的設(shè)計(jì)規(guī)范。

搭建好設(shè)計(jì)規(guī)范后，可以讓整個(gè)設(shè)計(jì)工作效率得到快速提升，同時(shí)可以站在更高的高度審視自己的產(chǎn)品要怎么優(yōu)化用戶體驗(yàn)。

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

這里需要針對你的產(chǎn)品確定基本的視覺語言和整體調(diào)性，可以用一個(gè)情緒版來表示。

適配原則取決了設(shè)計(jì)規(guī)范需要做幾套，組件的位置尺寸限制規(guī)則，需要和開發(fā)溝通協(xié)調(diào)確定整體的適配方案，把機(jī)型尺寸和單位格式都確定好。

2）制定基礎(chǔ)樣式

• 色彩：利用色相板確定主色調(diào)和輔助色、對比色。確定灰階字體的色值和透明度。
• 字體和文本格式：確定字體字號字重和文本對齊、間距等。
• 圖片系統(tǒng)：確定圖片大小、交互形式。
• 柵格和間距系統(tǒng)：確定度量基準(zhǔn)、左右邊距、垂直邊距、橫向邊距、內(nèi)容卡片邊距。
• 圖層命名規(guī)范：和開發(fā)溝通，使用一個(gè)規(guī)范的圖層命名格式。

3）設(shè)計(jì)基礎(chǔ)組件

• 導(dǎo)航系統(tǒng)；
• 卡片和列表系統(tǒng)；
• 浮層；
• 按鈕和控件。

這一塊可以參考iOS人機(jī)交互指南和Material Design官網(wǎng)查看詳細(xì)具體的設(shè)計(jì)方法，B端產(chǎn)品可以參考阿里集團(tuán)的Ant design、Element以及貝殼的Ke design。

部分配圖引自FigmaChina

本文由 @昊昊不是耗兒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議