Figma在線UI設(shè)計(jì)工具入門教程

　　就在幾年前，figma變得越來(lái)越流行。不僅在國(guó)外，許多國(guó)內(nèi)大廠也開(kāi)始使用figma，這是一種在線設(shè)計(jì)工具。如果你是一個(gè)UI設(shè)計(jì)師，你也想要體驗(yàn)它的魅力。建議您看一下這個(gè)入門教程。本文AAA教育的武老師還提出了素描向figma遷移的一些問(wèn)題和解決辦法。讓我們一起學(xué)習(xí)。
 

　　全世界都在使用Figma
 

　　看來(lái)我們不僅在未來(lái)三年內(nèi)使用figma，而且將來(lái)也不會(huì)使用它。事實(shí)上，大量的專業(yè)設(shè)計(jì)團(tuán)隊(duì)試圖不惜任何代價(jià)從傳統(tǒng)的設(shè)計(jì)軟件(草圖等)向figma轉(zhuǎn)型，因?yàn)樗麄兛吹搅舜砦磥?lái)的生產(chǎn)力工具和協(xié)作方法。
 

　　當(dāng)我第一次接觸菲格瑪時(shí)，素描在18年里占據(jù)了體驗(yàn)設(shè)計(jì)市場(chǎng)。當(dāng)時(shí)人們普遍認(rèn)為figma是可以的，但它不能代替素描。之所以做出這樣的判斷，主要是因?yàn)閒igma在產(chǎn)品設(shè)計(jì)的早期階段的經(jīng)驗(yàn)和功能都不盡如人意，其遠(yuǎn)程共享和協(xié)作的理念也有點(diǎn)超前，未能真正影響本土化、協(xié)同化的設(shè)計(jì)開(kāi)發(fā)模式。
 

　　從figma的首席設(shè)計(jì)師(現(xiàn)已退休)rasmus Andersson對(duì)figma設(shè)計(jì)的總結(jié)中，我了解到figma真正開(kāi)始了16年的產(chǎn)品設(shè)計(jì)過(guò)程。拉斯穆斯·安德森在figma任職16年，20年前離職，參與了figma從品牌到設(shè)計(jì)工具的所有設(shè)計(jì)工作。近年來(lái)，figma始終堅(jiān)持以共享與合作為核心主題。他們將figma產(chǎn)品設(shè)計(jì)分為兩個(gè)核心模塊，一個(gè)是編輯器，這是UI生產(chǎn)力工具部分，另一個(gè)是協(xié)作模塊，它涉及文件管理、共享和協(xié)作。
 

　　figma的一個(gè)亮點(diǎn)是基于Web平臺(tái)的開(kāi)發(fā)，以支持它在所有硬件產(chǎn)品和場(chǎng)景中的使用。然后，在rasmus Andersson的驅(qū)動(dòng)下，他們最終開(kāi)發(fā)出了客戶端版本，最終的結(jié)果是使用客戶端版本的用戶數(shù)量高于web用戶。
 

　　總之，F(xiàn)igma是一種新興的設(shè)計(jì)軟件，適用于多平臺(tái)、多系統(tǒng)，可以在任何場(chǎng)景(Windows或MAC)下工作，可以作為設(shè)計(jì)團(tuán)隊(duì)的統(tǒng)一設(shè)計(jì)工具，基于Web開(kāi)發(fā)的版本可以滿足異常場(chǎng)景下的設(shè)計(jì)需求。例如，當(dāng)他們回到家鄉(xiāng)的時(shí)候，他們身邊就沒(méi)有帶設(shè)計(jì)工具的電腦。同時(shí)，還可以解決由于本地硬件條件的限制而導(dǎo)致的文件丟失等問(wèn)題。此外，在疫情檢查下，其優(yōu)秀的遠(yuǎn)程協(xié)作體驗(yàn)也成為其自身的障礙，遠(yuǎn)遠(yuǎn)高于其他競(jìng)爭(zhēng)產(chǎn)品。另外，在國(guó)內(nèi)一款協(xié)同標(biāo)注軟件開(kāi)始收費(fèi)后，其價(jià)格已經(jīng)成為一種合理的競(jìng)爭(zhēng)力，遠(yuǎn)低于Sketch+Lanhu的價(jià)格。
 

　　1.1為什么大家都在轉(zhuǎn)型Figma?
 

　　事實(shí)上，一個(gè)設(shè)計(jì)中心全部轉(zhuǎn)換軟件，首先要考慮的是學(xué)習(xí)成本，及轉(zhuǎn)型和遷移期間不可控的效率和設(shè)計(jì)輸出質(zhì)量等問(wèn)題，另外一個(gè)關(guān)鍵點(diǎn)就是新的設(shè)計(jì)軟件意味著一筆新的正版軟件費(fèi)用，而且是一筆很龐大的費(fèi)用。涉及到這么多現(xiàn)實(shí)問(wèn)題，必然不會(huì)是因?yàn)閱渭兊某绷髭厔?shì)等理想型原因而轉(zhuǎn)型，因?yàn)楹茈y推動(dòng)。因此我意識(shí)到，從利益相關(guān)者角度考慮，核心點(diǎn)只可能是Figma能夠帶來(lái)真正的效率提升(設(shè)計(jì)師)，從長(zhǎng)遠(yuǎn)看能為企業(yè)賺取更多的收益(企業(yè))，且綜合來(lái)看能提供數(shù)倍的協(xié)作效率和協(xié)作質(zhì)量(需求方上游和開(kāi)發(fā)下游)。
 

　　有公司Sketch+藍(lán)湖的生產(chǎn)力模式到目前所在公司的Sketch+Sketch Measure的模式的設(shè)計(jì)師，應(yīng)該對(duì)這個(gè)話題很有發(fā)言權(quán)，傳統(tǒng)的依托于本地輸出資源對(duì)接的方式，效率相較于線上共享、對(duì)接、協(xié)作的方式真的可謂天壤之別。
 

　　協(xié)作效率
 

　　以我的設(shè)計(jì)工作流程為例，我司使用谷歌全家桶進(jìn)行項(xiàng)目管理，設(shè)計(jì)資源一般規(guī)范命名導(dǎo)出后上傳至Google Drive統(tǒng)一管理，其優(yōu)點(diǎn)在于文件管理規(guī)范化，從設(shè)計(jì)到開(kāi)發(fā)皆置于一套線性工作流程中，輸出物可溯源易管理，協(xié)作效率蠻不錯(cuò)，但當(dāng)發(fā)生一點(diǎn)設(shè)計(jì)修改之后，整套輸出物從設(shè)計(jì)稿到標(biāo)注內(nèi)容都要重新輸出整理一份，并再次手動(dòng)上傳。這種偏傳統(tǒng)的協(xié)作方式，尤其是設(shè)計(jì)輸出的方式在長(zhǎng)遠(yuǎn)來(lái)看不利于設(shè)計(jì)管理和上下游協(xié)作。一方面修改更新的成本較高，一方面容易造成版本混亂輸出物混亂而導(dǎo)致實(shí)際產(chǎn)品實(shí)現(xiàn)結(jié)果的問(wèn)題。
 

　　設(shè)計(jì)維護(hù)
 

　　版本維護(hù)是在進(jìn)行復(fù)雜項(xiàng)目設(shè)計(jì)時(shí)必要的一項(xiàng)工作，修改了哪些內(nèi)容，誰(shuí)來(lái)修改的如何溯源，更新后的版本如何快速同步給上下游?這一點(diǎn)工作在傳統(tǒng)設(shè)計(jì)協(xié)作模式中一般需要多個(gè)工具及多個(gè)協(xié)作行為來(lái)完成，如設(shè)計(jì)新版本-輸出新的Design Draft-上傳至同步工具(如Drive)-提醒上下游-更新源文件(設(shè)計(jì)組內(nèi))。而在Figma中，設(shè)計(jì)源文件、設(shè)計(jì)輸出融合為一套內(nèi)容。在源文件修改后可以快速自動(dòng)同步給各方，一個(gè)figma文件本身即是設(shè)計(jì)師對(duì)應(yīng)的源文件，也是上游需要的預(yù)覽稿Draft，更是下游開(kāi)發(fā)需要的輸出標(biāo)注。維護(hù)成為無(wú)意識(shí)的自動(dòng)化過(guò)程而不需要太多人力介入。
 

　　價(jià)格與權(quán)限
 

　　價(jià)格與權(quán)限方面，我只需要為大家展示免費(fèi)版的權(quán)限即可，其中最關(guān)鍵的就是Viewers，在藍(lán)湖收費(fèi)后，設(shè)計(jì)師應(yīng)該理解這個(gè)無(wú)限viewer意味著什么。這意味著你可以自由的分享設(shè)計(jì)稿給產(chǎn)品和開(kāi)發(fā)而不用提心吊膽的計(jì)算Viewer的限制。這主要是針對(duì)獨(dú)立設(shè)計(jì)師和小企業(yè)設(shè)計(jì)師，專業(yè)設(shè)計(jì)團(tuán)隊(duì)的話更多的是考慮產(chǎn)品效率，企業(yè)收益等問(wèn)題，價(jià)格反而其次。
 

　　本篇文章初心就是幫助大家快速入門Figma，這過(guò)程中梳理出一個(gè)更易于理解的教學(xué)方式，或者說(shuō)陳述邏輯。之后會(huì)推出分別對(duì)應(yīng)初學(xué)者最初接觸搭建基礎(chǔ)、進(jìn)階學(xué)習(xí)高級(jí)功能、正式遷移轉(zhuǎn)變工具的三個(gè)階段文章。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~