設(shè)計工具｜Figma一站式設(shè)計交付（一）—— 什么是Figma

▲點擊"三分設(shè)"關(guān)注，回復"社群"加入我們

歡迎來到專業(yè)設(shè)計師學習交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)自：光子設(shè)計中心  作者：Jeason

編輯：章欣怡

共 2030 字 20 圖  預計閱讀 6 分鐘

導語：

Figma 自 2016 年發(fā)布以來，作為“來自未來的多人實時在線協(xié)作界面設(shè)計軟件” 獲得了許多用戶的優(yōu)質(zhì)評級。由于2020 年疫情的原因，越來越多人在家隔離和辦公。Figma 也適逢其時地一舉超越了 Sketch 的地位，在 UI 設(shè)計、原型設(shè)計、頭腦風暴、用戶流程、設(shè)計系統(tǒng)、設(shè)計交付、版本管理等方面名列前茅，成為當下最流行的多平臺 UI 線上協(xié)同設(shè)計軟件。《Figma一站式設(shè)計交付》系列內(nèi)容將會從這三個章節(jié)介紹：

• Figma 的介紹、理論和實踐

• Figma 的設(shè)計系統(tǒng)，交互原型和審查元素

• Figma 的營地使用，實用技巧和 Figma 社區(qū)

希望大家從中有滿足的收獲，在日常設(shè)計中進一步提升設(shè)計效率，優(yōu)化設(shè)計流程。

根據(jù) UXTools 用戶體驗工具調(diào)查報告顯示，F(xiàn)igma 在國外的人氣有逐漸攀升的趨勢 —— 用戶量已經(jīng)反超 Sketch，一舉在 UI Design / Protoping / User Flow / Hand Off / Design System / Versioning 等方向拿下排名第一 ， 而且在 WhiteBoard 中 FigJam 排名第二。

回看國內(nèi)同類型產(chǎn)品的情況，已經(jīng)有多家廠商開發(fā)了對標 Figma 的工具，如藍湖 MasterGo、即時設(shè)計（聯(lián)合優(yōu)設(shè)推廣，優(yōu)化做得比較好）、Pixso 等。

另一側(cè)是 Figma 交付類插件工具，騰訊推出了 CoDesign 設(shè)計協(xié)作平臺，覆蓋了產(chǎn)品經(jīng)理、設(shè)計師、工程師協(xié)作需求，助力團隊提升協(xié)作效率、有效管理和使用設(shè)計資產(chǎn)，幫助大家更好的去完成設(shè)計交付。和 CoDesign 類似的產(chǎn)品還有 Moonvy 與 Heron 等。

國內(nèi)類 Figma 工具

Figma 于 2016 年發(fā)布首個版本，19 年推出品牌宣傳視頻，20 年的疫情讓這類云協(xié)作的產(chǎn)品迅速崛起。接下來先看看 Figma 的官方宣傳視頻：

Figma 官方視頻

通過視頻我們大概能了解到一些 Figma 的特色 ：

• 避免文件傳回傳
• 團隊多人協(xié)作
• 云設(shè)計協(xié)作交互視覺
• 直接交付給開發(fā)
• 及時的評論反饋
  
  

總的來說 Figma 也實在是有太多優(yōu)點了：

• 多終端多人實時協(xié)作

• 從 Sketch 過渡無縫 UI 設(shè)計不卡頓

• 獨特的適量網(wǎng)格

• 類 CssBox 盒子的 AutoLayout

• 原型交付

• 設(shè)計系統(tǒng)組件庫靈活高效

• 版本歷史管理

• 實時討論、實時分享，無需擔心插件版本

Figma 既作為一個涵蓋了如此多功能的工具，同時也是一個設(shè)計 + 社區(qū)的綜合體。（社區(qū)在后面續(xù)篇有介紹）

比起用具象數(shù)據(jù)來傳達產(chǎn)品效率的高低，親身體驗后才會真正知道它的厲害之處。Figma 在整個過程中是怎么提升設(shè)計效率的，接下來我們從五個方面來看看。

1. 提效統(tǒng)一的設(shè)計流程

在使用 Figma 之前：

• 產(chǎn)品策劃團隊一般用 Tapd、在線文檔、原型圖 等工具描述需求；
• 交互團隊用 XD、Sketch 等梳理設(shè)計交互圖；
• 視覺團隊用 PS、Sketch 等完成設(shè)計，用效果圖、Codesign 等交付給產(chǎn)品策劃審閱，定稿；
• 最終以 Codesign 等交付工具來交付開發(fā)。
  
  

在使用 Figma 之后，團隊工作地情況就可以完全不同了：

從交互設(shè)計到視覺設(shè)計，最后到策劃審核和設(shè)計交付都可以在 Figma 上一站式完成。多人實時協(xié)作發(fā)揮了巨大的作用，團隊行動更加敏捷了。

在許多團隊里，可能是交互用一個工具，視覺用一個工具，各司其事不礙事。

如組件和設(shè)計規(guī)范等工作，團隊可能覺得組件是統(tǒng)一依賴視覺設(shè)計同學就好，因為交互稿不需要符合規(guī)范。

交互設(shè)計同學也不用組件，更何況組件、規(guī)范的概念對交互設(shè)計同學來說也不是重點內(nèi)容。

但其實兩者是可以相互作用，到后期交互可以直接套用視覺組件后直接搭建頁面，效率也是有所提升。

2. 高效的交互動效Demo

在使用 Figma 之前，設(shè)計師可能是從 Photoshop 轉(zhuǎn)向到 After Effect、XD 等軟件里制作動效。

如果是 Sketch 流，則會有更多的選擇，可以導入 Principle、Flinto、Protopie、Framer 等工具。（Protopie 和 Framer 在動效設(shè)計上都是一個不錯的選擇）

在使用 Figma 之后，可以在做完視覺設(shè)計后直接做高保真的交互 Demo。這樣從一定程度上減少了不同軟件的學習成本，提升了圖層元素、效果、源文件等的轉(zhuǎn)換效率。

此外，F(xiàn)igma 的組件變體還支持做交互狀態(tài)的變化，大大地提升了做交互 Demo 的效率。

例如，給父組件 Close 添加一個點擊事件響應(yīng)關(guān)閉浮層的操作，無論你是居中的彈窗，還是底部畫出的，乃至是右側(cè)畫出的，只要在界面的浮層中使用到 Close 的組件都可以響應(yīng)關(guān)閉浮層的交互動效。

3. 自由的組件修改

例如用這三個工具來構(gòu)建三個不同的按鈕組件：

Photoshop 沒有組件的概念，只好分開創(chuàng)建 3 個按鈕（3 種顏色、3 個文本、3 個形狀）并且三個按鈕之間的文字、顏色無規(guī)范關(guān)聯(lián)、圓角獨立設(shè)置，寬高非自適應(yīng)。

Sketch 雖然有組件的概念，但是也逃不過創(chuàng)建 3 個按鈕組件（3 種顏色、3 個文本、3 個形狀），并且要在 v69 版本后的文字和顏色才可以獨立設(shè)置。三個按鈕組件的圓角在設(shè)定后子組件后不可獨立修改，配合 Smart Layout 做單向的自適應(yīng)拉伸，3 個組件為獨立不關(guān)聯(lián)的組件，互不影響。

在 Figma 中，得益于原子化的樣式：只需要建立 2 種文本樣式，3 個顏色、0 個形狀，通過建立 1 個基礎(chǔ)組件就可以把三個按鈕關(guān)聯(lián)歸一。

其中文字和背景邊框等樣式可以獨立設(shè)置，按鈕的形狀可以直接交給圓角獨立設(shè)置，配合 Auto Layout 可以做到完美的寬高自適應(yīng)。

這里例子難免使有的同學會覺得有點極端了，真正創(chuàng)建按鈕的組件還是應(yīng)該創(chuàng)建成 3 個獨立的組件。

只是我們能從這個極端例子中看見 Figma 強大的高效自由組合功能：通過建立一個基礎(chǔ)組件，圖標+文本+背景，即可完成基本需求。

在 Fimga 子組件中，可以自由的設(shè)定字體字號、填充顏色、邊框顏色、效果樣式、圓角樣式等，根據(jù)決策需要顯示或隱藏圖標。

一個基礎(chǔ)組件控制不同的實例，不同的實例又可以保持高度自由的子特征屬性。

4. Auto Layout的智能布局

列表設(shè)計是 UI 界面中常見的一種，常常在調(diào)整的時候會牽連很多調(diào)整操作。例如在這個例子中，有：

• 刪除第一個列表項中的圖片，文字要自動左對齊
• 刪除第二個列表項中 3 行文本，文字需要實現(xiàn)基于圖片居中對齊
• 刪除第四個列表項，并把第五個列表項提前至第三個列表項
  
  

Photoshop 沒有組件的概念，就需要按照一般步驟來設(shè)計列表：首先刪除圖片，左移文本，刪除 第 2 行的文本，調(diào)整居中；刪除第 4 行，調(diào)整第 5 行到第 3 行，調(diào)整第 3 行 到下面；主體操作就有 7 步之多。

在 Sketch 中：分別創(chuàng)建圖文 3 行、圖文 2 行、純文組件；框選 345 行，調(diào)整位置，調(diào)整第 4 行；整體也有 6 步左右，和 3 個組件。

在 Figma 中：配合 Auto Layout 只需要創(chuàng)建 1 個組件，然后對子組件進行刪除圖片，刪除文本，調(diào)整順序即可。

主體操作大概只有 4 步 1 組件。有了 Auto Layout 的加持，組件可以自由的刪除（隱藏）元素，而后會有自動布局的效果（自動跟隨、對齊）。

Figma 在設(shè)計上是基于前端的布局流，使得頁面元素的堆疊排列更為自動化，配合 Auto Layout 可以在組件內(nèi)外自由刪減隱藏元素并且自動布局。

5. Atomic Design 原子設(shè)計

在化學中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成了宇宙萬物。2013 年前端工程師 Brad Forst 提出的原子設(shè)計方法論作為指導。

原子設(shè)計方法的本質(zhì)，就是首先將頁面拆解為最小元素（原子），這些原子元素可以組合排序演變成分子，分子再通過多維度的組合成為組織，再到模板，最終生成頁面。

原子 Atoms:

在界面中以「元素」的形式存在，例如文字、顏色、圖標、效果樣式等。

分子 Molecules：

原子、分子排列組合構(gòu)成了組織，在界面中多以「組件」的形式存在，例如按鈕、導航、標簽、彈窗等。

組織 Organisms：

原子、分子、組織排列組合構(gòu)成了模板，在界面中多以「模塊」的形式存在，例如：列表組、卡片組、入口組等。

模板 Templates：

原子、分子、組織排列組合構(gòu)成了模板，在界面中也稱為「原型圖」，例如資訊原型，列表原型，詳情原型等。

頁面 Pages：

將實際內(nèi)容（圖片、文章等）放置在特定模板內(nèi)，就成了高保真視覺稿。

Figma 與 Sketch 的對比：

文本樣式：

Figma 無需考慮文本對齊和顏色的組合，此外行高支持百分比設(shè)定；

Sketch 則需要枚舉對齊、顏色各異的情況，過于冗余。

填充和邊框樣式：

Figma 可以在文本、填充、邊框中自由調(diào)用顏色樣式；

Sketch 則需要在 v69 支持 Color Variables 后才能通過顏色變量統(tǒng)一管理。

效果樣式：

Figma 可以創(chuàng)建圖層樣式進行復用統(tǒng)一管理；

Sketch 沒有樣式統(tǒng)一管理的概念，只能靠復制、粘貼樣式。

尺寸圓角：

Figma 可以獨立的設(shè)置組件的圓角，通過自動布局的強大功能可以做自適應(yīng)、兼容性高的組件；

Sketch 中組件只能嚴格遵守父組件的設(shè)定，并且只有組件才能使用 Smart Layout 屬性，對常用的響應(yīng)式、兼容性上有一定的局限性。

Figma 因為有更透徹實踐原子設(shè)計體系，在一定程度上高效地自由組合，避免樣式、組件冗余。

Figma 如此便利，怎樣從現(xiàn)在的工具中轉(zhuǎn)過去？

Photoshop：

Figma 不能直接識別并導入 PSD 格式，但是對一些矢量路徑圖層是可以通過右鍵復制 SVG 代碼，粘貼到 Figma 上。

Photoshop 本身就很臃腫，做 APP UI 設(shè)計只是其功能的冰山一角，對整體的 APP 設(shè)計考慮來說是很欠缺的，尤其是組件、字體樣式和顏色樣式的維護。但是對于非扁平類的游戲 UI 設(shè)計工具來說，Photoshop 還是個主力軍。

Adobe XD：

雖然 XD 的設(shè)計理念稍微比 Sketch 更接近 Figma，但是 XD 也不能直接導入進 Figma 里。

常規(guī)渠道是先由 XD 保存 SVG，再導入 Figma；但是轉(zhuǎn) SVG 是相當大的折損，相當于把文字轉(zhuǎn)曲，把組件關(guān)系斷開，意義并不大。也可以選擇使用 XDtoSketch 這種第三方付費轉(zhuǎn)換工具，能很好地完成整個轉(zhuǎn)換操作。

Sketch：

Figma 只支持導入 Sketch 文件。Figma 會自動識別和轉(zhuǎn)換 Sketch 圖片、文字、矢量組件等，但是涉及到樣式、樣式關(guān)聯(lián)、組件關(guān)聯(lián)等就會丟失，需要在導入后重新關(guān)聯(lián)和整理組件。

由于 Figma 的設(shè)計系統(tǒng)理念比 Sketch 先進，所以在有些組件和樣式的設(shè)計使用上，可以做一些減法優(yōu)化。

整體轉(zhuǎn)換到 Figma 的情況來說可以是毫無捷徑了，怎么樣都得修一遍為妙。

已有的項目可以考慮重組組件庫的設(shè)計邏輯，為后續(xù)的工作打下更好的基礎(chǔ)。新的項目或者有改版的需求，可以直接使用 Figma 進行重建。

雖然前期的過程都比較累，但是后續(xù)使用起來時工作效率以得到極大的提高，不亦快哉。

下一期，讓我們正式進入 Figma 的設(shè)計世界。

—  The end  —

?? 社區(qū)資料??

每日開眼，大廠內(nèi)部資料分享

?? 我們一起聊設(shè)計 ???♂?

高質(zhì)量，學設(shè)計行交流微信群

期待與更多優(yōu)秀用戶體驗設(shè)計師一起成長

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點，準時充電。分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標了公眾號三分設(shè)的粉絲）