隨著互聯(lián)網(wǎng)的快速發(fā)展，越來越多的的設(shè)計(jì)工具進(jìn)入了大眾的視野，近兩年來『Figma』勢頭越來越猛，時(shí)不時(shí)會看到“Figma 對比 Sketch 的眾多優(yōu)勢”這些文章，不過似乎還是有不少同學(xué)對Figma有些陌生，那今天就來一起看一下Figma到底是一款怎樣的應(yīng)用吧。
Figma 是一款基于瀏覽器的應(yīng)用，可以在所有的主流的操作系統(tǒng)中運(yùn)行，無論你是 Mac OS，Windows 或者是 Linux 和 Chrome OS 都可以流暢操作，當(dāng)然 Figma 目前也發(fā)布了 Mac OS 和 Windows 的桌面客戶端。其實(shí)在使用 Figma 之前，我也曾一度認(rèn)為線上的軟件，其流暢度、穩(wěn)定性等各方面都不會比本地軟件做的好，但后面真正體驗(yàn)過之后，真香定理再次印證，我臉都被打腫了。Figma 基于web的模式也極大的方便的協(xié)作辦公的需求，無需下載，無需安裝，在線編輯，方便管理，同步協(xié)作以及極小的資源占用等等對 Sketch 仿佛是降維打擊。
隨著云計(jì)算和5G網(wǎng)絡(luò)的迅猛發(fā)展和快速普及，Web 工具的性能已經(jīng)極大的提升，辦公工具的 Web 化也是一個(gè)趨勢。各類云端知識庫工具的爆炸性增長，Notion，RomeResearch 等新興知識脈絡(luò)型的文檔工具，已經(jīng)讓之前的 Word 和腦圖顯得像是上個(gè)時(shí)代的產(chǎn)物，設(shè)計(jì)師在對自己設(shè)計(jì)文檔的管理上要是還停留在本地文件的時(shí)代將注定被拋棄。
現(xiàn)在的UI設(shè)計(jì)軟件已經(jīng)非常豐富了，我們先來看下當(dāng)下眾多設(shè)計(jì)軟件的一些使用情況的對比：
下面這個(gè)圖是2020年時(shí)候的數(shù)據(jù)：
可以看到經(jīng)過兩年時(shí)間，F(xiàn)igma 已經(jīng)從原來第5名的使用量一躍到現(xiàn)在的第2名了，這還是在 Adobe 推出了 XD 的時(shí)間內(nèi)發(fā)生的，可見 Figma 的功能優(yōu)勢已經(jīng)越來越深入人心。雖然很難撼動(dòng)第 1 名 Sketch 在UI設(shè)計(jì)中大哥大的位置，但其快速發(fā)展的勢頭已經(jīng)很難阻止。
根據(jù)我所了解到的情況，很多小體量的移動(dòng)互聯(lián)網(wǎng)團(tuán)隊(duì)已經(jīng)逐步向 Figma 遷移，越來越多的設(shè)計(jì)師由于 Sketch 資源占用巨大的缺點(diǎn)都開始投向了 Figma 的懷抱。這點(diǎn)我到時(shí)非常贊同，Sketch 有些放肆的資源大小有時(shí)候確實(shí)還是蠻嚇人的，下圖的場景是我日常:
Figma 的官網(wǎng)也列出了自己的一系列優(yōu)勢來解釋 Sketch 用戶向自己轉(zhuǎn)移的原因（雖然這很主觀，但給出的理由都還是蠻實(shí)在的），感興趣的同學(xué)可以戳下面這個(gè)鏈接
https://www.figma.com/figma-vs-sketch
上面夸了那么多點(diǎn)，那 Figma 到底長什么樣子呢？那下面我們來慢慢熟悉一下吧。（順便提一下，F(xiàn)igma 的官網(wǎng)風(fēng)格是我菜 ? https://www.figma.com）
Figma 的操作板塊分為三類：設(shè)計(jì)、原型、代碼。熟悉藍(lán)湖的同學(xué)可能看著很熟悉，這其實(shí)也就是藍(lán)湖中的三個(gè)角色，F(xiàn)igma 想要給到項(xiàng)目傳達(dá)的的思想就是 all-in-one。
Figma 的界面與 Sketch 大體一致，想要嘗試轉(zhuǎn)到這邊的設(shè)計(jì)可以不用為深度的學(xué)習(xí)成本擔(dān)心，基本上看一眼界面就知道如何去操作了。
頂部工具欄面板，左側(cè)圖層面板，中間畫布，右側(cè)屬性面板，Sketch 界面的翻版，但確實(shí)對于設(shè)計(jì)師來說，遷移成本相當(dāng)?shù)牡汀?/p>
值得一提的是 Figma 的圖層面板共分為三個(gè)板塊：圖層，資源和頁面列表。相較于 Sketch ，頁面列表的增加對于后期的團(tuán)隊(duì)協(xié)同確實(shí)有很大的幫助，設(shè)計(jì)師們可以分別在列表里新增自己的頁面，約定好設(shè)計(jì)的內(nèi)容，這樣一來同一個(gè)項(xiàng)目的設(shè)計(jì)師可以在幾個(gè)頁面中切換去同步了解其他板塊的進(jìn)度和修改。
除了常規(guī)的操作面板，設(shè)計(jì)師也可以直接在右側(cè)的屬性面板上方的 Tab 上點(diǎn)擊切換成原型模式，F(xiàn)igma 的原型功能允許你創(chuàng)建交互式流程以模擬用戶的交互方式。通過原型模式，設(shè)計(jì)師可以進(jìn)行概念稿的設(shè)計(jì)，交互邏輯的體驗(yàn)，同時(shí)還可以直接在線上展示和分享自己的原型，分享的方式既可以是鏈接直接發(fā)送，還可以通過 Figma Mirror 在移動(dòng)端更沉浸的體驗(yàn)概念原型，甚至還能直接對原型進(jìn)行評論，有沒有心動(dòng)呀？
Figma 的組件和 Sketch 的類似，但又有區(qū)別，設(shè)計(jì)師 可以在 Figma 中新建一個(gè)專門的文件來定義組件（component）或者樣式（Style），再把這個(gè)文件發(fā)布到庫（Library），這樣你團(tuán)隊(duì)中的所有成員都可以在團(tuán)隊(duì)中的任意文件調(diào)用這些組件，并且只要修改其中一個(gè)組件的樣式，團(tuán)隊(duì)中所有的文件內(nèi)用到該組件的地方，都能選擇是否要同步更新。
除了協(xié)作上的不同，由于 Figma 本身基于組件思想開發(fā)的邏輯，在 Figma 上你能看到很多更好用的組件化方法。Figma 將畫板中的元素大致共分為以下幾類：
組件和實(shí)例的區(qū)分，讓設(shè)計(jì)師在設(shè)計(jì)過程中有了更高效的發(fā)揮空間，他們倆就相當(dāng)于是程序開發(fā)中的父類和子類，你可以在父類中定義全局屬性，并單獨(dú)在子類里進(jìn)行個(gè)性化設(shè)置，改變父類的屬性時(shí)所有的子類公用的屬性才會一起改變，看個(gè)圖各位就明白了，在沒使用 Figma 之前，我也是看到了這個(gè)操作才堅(jiān)決要向 Figma 去看齊的。
Figma 里的父類組件叫做 Master ，從它復(fù)制出去的的組件叫做 Instance ，F(xiàn)igma 允許將 master 組件就近放在頁面旁邊，這樣是極其方便的，因?yàn)楹竺骐y免需要調(diào)整細(xì)節(jié)，這時(shí)候你就可以邊調(diào)整 master 細(xì)節(jié)邊看它在整個(gè)頁面中的效果。
看到這個(gè)直戳痛點(diǎn)的設(shè)計(jì)師們，你有沒有心動(dòng)呢？
歷史版本
Figma 可以自動(dòng)保存最近30天的歷史，因而設(shè)計(jì)師可以盡管放開的去思考和構(gòu)思，隨時(shí)可以恢復(fù)到之前的版本。
柵格系統(tǒng)
在 Figma 中我們可以給頁面（即frame）和組件添加?xùn)鸥?，而柵格可以添加網(wǎng)格、行和列。在頁面中添加網(wǎng)格可以幫助你對齊元素，但我一般會添加列柵格，因?yàn)樗梢詭椭野言嘏帕袨榈确值膸琢?，并保持元素間隙。
插件庫
Figma 的插件庫目前還在極速的更新和壯大當(dāng)中，越來越多的開發(fā)者將自己的想法注入到Figma，相比 Sketch 那種傳統(tǒng)的安裝與更新插件的方式，F(xiàn)igma 基于web的優(yōu)勢又體現(xiàn)出來了，直接在組件菜單中搜索，點(diǎn)擊 Install 等待安裝完成就可以了，之后在畫板頁面便可以從左側(cè)的菜單欄中直接選擇調(diào)用已下載的插件了。
這里有一份別人推薦的超給力的 Figma 插件，喜歡的同學(xué)點(diǎn)這里跳轉(zhuǎn)查看詳情哦~
https://www.uisdc.com/best-figma-plugins-for-2020
目前界面設(shè)計(jì)工具中的三駕馬車：Sketch，F(xiàn)igma，Adobe XD，各有優(yōu)劣，最后在這里給大家一個(gè)匯總。
Mac 用戶無疑是幸福的，這三款軟件都可以使用。Windows 就只能使用后面兩款了。
Sketch仍然是UI設(shè)計(jì)工具里的頭牌，極大的覆蓋面積，龐大的使用群體，完善的組合功能，其他產(chǎn)品的協(xié)同配合，但Sketch的團(tuán)隊(duì)協(xié)作部分做的稍弱，在國內(nèi)可以配合藍(lán)湖和Zplin達(dá)到很好的辦公效果。
XD 從今年10月起，它的一些功能都是需要付費(fèi)才能使用的，其中就包括 “保存到本地” 這個(gè)功能，不然就只能使用 2G 的云存儲了。這對于Windows 用戶來說毫無疑問是個(gè)打擊，好在你還有一段時(shí)間可以去接受Figma。
上面提到了眾多Figma的優(yōu)勢，但坦率的講，F(xiàn)igma還是有部分問題是會影響到操作的。
對中文的支持不是很友好
直接在Figma里輸入中文由于字庫的關(guān)系，會有很多中文是沒有辦法正常顯示的。要解決這個(gè)問題，需要同時(shí)下載 Figma的 Font Helper，才能保證在瀏覽器中正常的使用本地字體。如果下載后還沒有解決的話，那我推薦你可以再下載兩個(gè)字體插件， Better Font Picker 和 Font Explorer 。
全程需要聯(lián)網(wǎng)
這個(gè)是由 Figma 自身的特性決定的，這無疑會限制 Figma 的使用場所。
網(wǎng)絡(luò)不是特別穩(wěn)定
這個(gè)由于 Figma 的服務(wù)器在國外，直接使用國內(nèi)網(wǎng)絡(luò)進(jìn)行連接的話，確實(shí)會有時(shí)候打開不太迅速，保存的不是很及時(shí)等情況發(fā)生，這個(gè)時(shí)候就得找個(gè)梯子了。
我一直堅(jiān)信 Figma 的未來市場是相當(dāng)巨大的，無論是從易用性、便攜性來看，還是從網(wǎng)絡(luò)的迭代發(fā)展、技術(shù)的交叉進(jìn)步、協(xié)同辦公的工作趨勢來看，F(xiàn)igma 都是最適合這個(gè)發(fā)展的產(chǎn)物。Figma將產(chǎn)品、設(shè)計(jì)、開發(fā)等多個(gè)工作流直接統(tǒng)一到一個(gè)工作面板當(dāng)中，將曾經(jīng)分散、孤立的職位很好的連接起來。喜歡我寫的這篇介紹的話，就點(diǎn)個(gè)關(guān)注吧，后面我還會更新關(guān)于 Figma 的更多的操作和技巧哦~ ? ? ?
再往后的設(shè)計(jì)工作，無疑會變得更加專業(yè)，更加高效，更加生動(dòng)，就讓我們一起期待吧！
聯(lián)系客服
