工欲善其事必先利其器，器即工具。選擇一種工具的本質(zhì)是選擇一種方式。個人的選擇或許是基于喜好習慣，行業(yè)的選擇則伴隨行業(yè)工作模式的變化。作為互聯(lián)網(wǎng)行業(yè)的設(shè)計師，我們應(yīng)當時時跟進技術(shù)的發(fā)展，解鎖新模式和新工具。
1. 概述
隨著日新月異的技術(shù)發(fā)展，互聯(lián)網(wǎng)時代進入深水區(qū)。行業(yè)環(huán)境越復雜，設(shè)計師將面臨越多機遇和挑戰(zhàn)。
設(shè)計不同于藝術(shù)，本質(zhì)是為了解決問題，而設(shè)計工具直接影響著設(shè)計師思考問題和解決問題的能力。設(shè)計工具的背后，體現(xiàn)著設(shè)計行業(yè)的整體水平和效率。
如果把設(shè)計工具的競爭類比戰(zhàn)場，筆者今天探討的是互聯(lián)網(wǎng)時代最受關(guān)注的界面設(shè)計戰(zhàn)場。
界面設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。
2. 歷史追溯
在界面設(shè)計領(lǐng)域，設(shè)計工具一直以驚人的速度演化，競爭愈演愈烈。從曾經(jīng)的PS一家獨大，到近年Sketch新晉王者，再到當下的各類新工具百家齊放。
2010年前，界面設(shè)計師普遍使用的是Adobe Photoshop（簡稱PS），那時界面設(shè)計還在起步階段。PS的定位是圖像處理軟件，是一個全面的設(shè)計工具，界面設(shè)計只是使用這個工具的一個行業(yè)分支。2010年后，界面設(shè)計飛速發(fā)展，PS的性能和效率都無法匹配這個新興行業(yè)的需求。
因此，Sketch順應(yīng)而生，聚焦界面設(shè)計，并迅速占領(lǐng)界面設(shè)計的市場。
放眼當下，各類新型界面工具相繼出現(xiàn)，挖掘和突破Sketch的短板。Sketch只面向Mac用戶，其它系統(tǒng)無法使用，XD成為Windows上最接近Sketch的工具替代，但過于相似、缺少獨特也意味著XD目前難以超越Sketch。
另外，Sketch在原型和交互設(shè)計上發(fā)揮不足，inVision很好的從這個環(huán)節(jié)獨立出來。再如Framer，基于開源原型框架，在代碼上的優(yōu)勢，為設(shè)計和技術(shù)的融合搭建橋梁。
總體來看，界面設(shè)計工具在往兩個方向分化。
一種是模仿者，進行功能效仿或內(nèi)部整合。另一種是跨界者，橫向擴展，做不同領(lǐng)域的功能集成。工具戰(zhàn)場是力量的決勝，亦是速度的角逐。
3. 黑馬逆襲
近來，有一匹黑馬，頻繁出現(xiàn)在設(shè)計師的信息視野，成為設(shè)計行業(yè)的熱門話題，團隊使用逐漸覆蓋國內(nèi)外龍頭企業(yè)。
國外如微軟、谷歌、Facebook等，國內(nèi)如阿里，騰訊，字節(jié)跳動，網(wǎng)易。
這匹黑馬，就是 Figma。
如今，從 Sketch 遷移至 Figma 已然成為趨勢。Figma逆襲的奧義何在，如此受到設(shè)計師和團隊的青睞。探討之前，我們不妨先來了解這款軟件。
Figma是基于瀏覽器的界面設(shè)計協(xié)作工具。它的最大特點就是基于瀏覽器和設(shè)計協(xié)作。
Figma以瀏覽器為載體，依靠網(wǎng)絡(luò)，全程在線操作，所有文件保存在云端。
簡單理解，F(xiàn)igma是打開一個網(wǎng)頁使用，Sketch等是打開本地軟件使用。
云端的最大優(yōu)勢就是不受物理設(shè)備限制，多平臺共享，使用靈活。
Figma全平臺可用，操作系統(tǒng)支持 Win，Mac，Linux等，設(shè)備支持電腦，平板，手機。在線意味著不需要下載安裝包到本地，軟件插件都會自動更新，不再漫長地等待下載和頻繁安裝更新。
Figma是第一個真正意義上的設(shè)計協(xié)作工具。協(xié)作，是Figma對界面設(shè)計師這個角色的重新定位。
如Sketch專注于設(shè)計師個人完成設(shè)計工作，就像一個單一的點，如需和外界產(chǎn)生關(guān)聯(lián)，需要借助第三方工具。
而Figma是從團體的角度去定位設(shè)計，界面設(shè)計不僅僅是設(shè)計師個人的事情。
團隊內(nèi)，設(shè)計師需要更高效地銜接設(shè)計流程的上下環(huán)節(jié)，設(shè)計師和設(shè)計師之間可以更輕松地協(xié)作溝通，共同完成設(shè)計工作。
團隊外，設(shè)計行業(yè)應(yīng)有分享精神，站在行業(yè)巨人的肩膀上再創(chuàng)新，推動設(shè)計行業(yè)更加高效。
流程銜接——跨界工具集成
傳統(tǒng)流程中，設(shè)計師在不同環(huán)節(jié)，需要使用不同工具進行設(shè)計工作。
流轉(zhuǎn)在不同工具的過程，會造成時間成本的消耗，產(chǎn)生流轉(zhuǎn)中的錯誤。
使用Figma就能免去切換工具的煩惱，因為它本身就全面覆蓋了產(chǎn)品設(shè)計中所有重要的步驟，讓工作流程更高效完整統(tǒng)一。
令人贊嘆的地方是，這樣的工具集成體，界面卻比Sketch更簡潔易上手。
內(nèi)部溝通——多人在線同時編輯
支持多人在線同時編輯，意味著團隊可并行工作，同時修改一個文件。
項目是一個整體，而不再是被分割的多個文件。
文件是一個鏈接，而不再是需要傳送的源文件。如此，極大地降低團隊的溝通、修改、維護成本。
資源共享——開源社區(qū)
互聯(lián)網(wǎng)行業(yè)追求高效，俗話說“眾人拾柴火焰高”，集合眾人的力量方能讓價值最大化，資源必不可少。
如Github是全球最大的社交編程及代碼托管網(wǎng)站，其社交化編碼、開源共享的理念改變著整個開發(fā)社區(qū)的生態(tài)，讓全球開發(fā)者共同創(chuàng)造了無數(shù)優(yōu)質(zhì)項目。
在設(shè)計行業(yè)，Dribbble和Behance作為最知名的國際設(shè)計社區(qū)，是設(shè)計師們展示作品、合作招聘的最大平臺，但一般只展示設(shè)計作品而不共享源文件。
Figma的社區(qū)功能，和Github有異曲同工之妙。
一方面設(shè)計師們可以一鍵取用世界頂尖公司及設(shè)計師精心制作的設(shè)計系統(tǒng)和模板，快速構(gòu)建高質(zhì)量的設(shè)計作品，節(jié)省重復基礎(chǔ)性工作的時間精力，提高工作效率。
另一方面，設(shè)計師可以輕松瀏覽行業(yè)一線設(shè)計作品，開拓設(shè)計視野，并進行互動溝通。
選擇新工具是一件慎重的事情，特別對團隊來說，需要從整體的角度去評估成本、風險和回報。
個人的選擇或許是基于喜好習慣，而行業(yè)的選擇則是伴隨行業(yè)工作模式的變化。如前文所說，從 Sketch 遷移至 Figma 已然成為行業(yè)趨勢。
互聯(lián)網(wǎng)行業(yè)正在發(fā)生怎樣的變化，面對未來的技術(shù)趨勢，我們正在關(guān)注什么。
數(shù)字化
信息，泛指人類社會傳播的一切內(nèi)容。數(shù)字化是將信息轉(zhuǎn)變?yōu)閿?shù)字、數(shù)據(jù)，建立數(shù)字化模型，而后轉(zhuǎn)變?yōu)橐幌盗卸M制代碼，引入計算機內(nèi)部進行處理的過程。當下信息爆炸的時代，更多信息以數(shù)字化形式存在，人與世界的互動將更多以網(wǎng)絡(luò)為媒介。
云計算
“云”實質(zhì)上是一個網(wǎng)絡(luò)，一種計算資源共享池。
云計算，把計算資源通過網(wǎng)絡(luò)讓資源被快速取用。未來的時代是云計算的時代，用戶通過網(wǎng)絡(luò)就可以獲取無限資源，同時獲取的資源不受時間和空間的限制。
信息處理擁有更多時間自由性和空間靈活性，意味著我們獲取和使用信息可以隨時隨地，想即所得。
大數(shù)據(jù)
數(shù)據(jù)是信息的基礎(chǔ)，是智慧的前提，是所有新技術(shù)的依托。大數(shù)據(jù)是數(shù)據(jù)的集合，對海量數(shù)據(jù)進行專業(yè)化處理，形成價值，是行業(yè)競爭、產(chǎn)業(yè)實現(xiàn)盈利的關(guān)鍵。
大數(shù)據(jù)和云計算是深度結(jié)合的，并和物聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)等新興計算形態(tài)密切相關(guān)。
人工智能
即AI，是以人類智能相似的方式做出反應(yīng)的智能機器。
人工智能使機器能像人一樣思考，并能夠勝任一些通常需要人類智能才能完成的復雜工作。
未來機器人是否能超越人類，甚至接管世界，是個尚待討論的話題。至少，我們的世界正在借助AI的力量更自動化，更高效化。
5G
第五代移動通信技術(shù)，是最新一代蜂窩移動通信技術(shù)。
我們的網(wǎng)絡(luò)信號，主要就來自于通信基站。隨著網(wǎng)絡(luò)基礎(chǔ)設(shè)施日漸完善，世界的運作和發(fā)展將會更快。
在未來，當5G全面覆蓋，且所有的設(shè)施都實現(xiàn)了智能化后，我們將真正的進入到一個“萬物互聯(lián)”的時代。
新技術(shù)的浪潮下，工具行業(yè)的發(fā)展和趨勢，整體來看，呈現(xiàn)云端化和一體化。
云端化
云端化是工作載體的變革，從本地到云端，信息以最快的方式觸達和共享。用戶無需在本地安裝軟件和插件，直接在瀏覽器上使用工具，擺脫了電腦硬件的束縛。
云端擁有強大的計算能力，使用性能遠超一般的本地軟件?？截悅魉褪降谋镜啬Ｊ皆谖募墓蚕砩希蔬h不如鏈接式的云端模式。比較典型的例子就是各類在線文檔編輯工具。
一體化
一體化是工作模式的顛覆，流程、工具、資源都應(yīng)當打破壁壘，讓協(xié)作更通暢。
一體化可以理解為將不同的個體有機融合為一個整體，形成協(xié)同效力，實現(xiàn)團體的整體效率和利益最大化，這里的團體可以是項目團隊，可以是公司，也可以是整個行業(yè)。用技術(shù)的方式掃除溝通協(xié)作的障礙，能大大提升團體的專業(yè)和效率。
Figma的模式
Figma的愿景是成為設(shè)計界的 Google Docs，打造類似 GitHub 的設(shè)計共享與協(xié)作的社區(qū)。
這也是我認為Figma現(xiàn)階段逆襲的原因所在,它敏銳的捕捉到了云端和協(xié)同的價值。
在過去，設(shè)計師和產(chǎn)品、開發(fā)者都有明確的角色分配，但隨著全棧設(shè)計和全鏈路設(shè)計的升溫，設(shè)計師的角色定位有了更多可能性，可以更進一步融入產(chǎn)品的設(shè)計開發(fā)流程中。
全棧全鏈路設(shè)計，二者本質(zhì)上都需要設(shè)計師擁有更強的綜合思維能力。Figma的跨界功能集成優(yōu)勢，很好的匹配了這種職業(yè)發(fā)展方向。
大家最關(guān)注的，應(yīng)該還是在具體功能使用上，F(xiàn)igma到底有何亮點。下面，詳細聊聊那些本人目前覺得Figma比Sketch更優(yōu)的功能。
1. 全局組件
設(shè)計組件化的概念是從程序的開發(fā)模式中演變而來，是將界面拆分成更小部件使之易于管理的方式。形象化去理解，界面設(shè)計就像搭積木，組件是積木，頁面是模型，設(shè)計師使用組件（積木）搭建成頁面（模型）。
組件的內(nèi)部邏輯，可以用父子關(guān)系來形容。原始被復制的組件是父件，復制出來的組件是子件。以父子關(guān)系比喻是因為，在組件邏輯中，父件有變化，子件們會繼承，同步變化。這點上，F(xiàn)igma和Sketch是一致的。
Figma組件邏輯比Sketch高明在，子件可以靈活處理繼承和嵌套關(guān)系。
子件可以各自調(diào)整如形狀、顏色、尺寸等樣式屬性，當我們發(fā)現(xiàn)某個元素樣式復用頻率高，也能輕松轉(zhuǎn)變成新的父件。如此，一個相同的組件可以應(yīng)對不同場景變化成不同的樣式，建構(gòu)組件體系變得更靈活。
Sketch的子件只能復刻父件，任何對組件的修改，都會以完全覆蓋掉原始組件的模式完成。
因此，當我們使用Sketch構(gòu)建組件體系時，需要提前把所有可能的樣式全部羅列出來。隨著項目日漸復雜，組件復雜臃腫，后續(xù)的維護極其繁瑣。
使用Figma時，父件可以放置任何頁面任何位置。
比如把父件放在子件旁邊，調(diào)整父件的細節(jié)時就可以同步看到子件在整個頁面中的效果，很方便。
而使用Sketch時，組件被固定放置在另外一個名為Symbols的頁面，設(shè)計組件和瀏覽頁面效果需要在不同頁面切換查看。
△ Figma演示
△ Sketch演示
高保真可交互原型設(shè)計
Figma可制作高保真的交互原型，無縫完成從設(shè)計到原型演示的切換。
它比Sketch生硬的頁面跳轉(zhuǎn)友好，適合demo展示。
如需制作更復雜的交互，F(xiàn)igma也提供導入Principle的功能。在手機上預(yù)覽效果可用 Figma Mirror 。支持導入gif文件，演示更加靈活。
設(shè)計評審反饋
內(nèi)置評論功能，在設(shè)計和原型制作模式下都支持注釋。
設(shè)計和協(xié)作是可以同時進行的，任何人都可以在設(shè)計圖的任何地方添加評論。可以在評論中 @其他人或?qū)⒃u論標記為已解決。
不但可用于設(shè)計評審，也是設(shè)計走查反饋的利器。
前端協(xié)作
每個 Figma 文件都有代碼模式，工程師可以在其中查看設(shè)計文件。工程師能在設(shè)計圖上獲取標注，并自行導出所需資源（包括 CSS、iOS、Android 樣式）。
共享靈活
Figma支持任何文件，頁面或畫板的共享。提供權(quán)限管理功能，自定義共享人員編輯和查看的權(quán)限范圍。
當創(chuàng)建共享鏈接時，單擊該鏈接的人將打開Figma的瀏覽器版本。這種共享形式，使共享方式準確高效便捷。
1. Figma是英文，我看不懂怎么辦？
打開網(wǎng)站：https://figma.cool/ 支持客戶端漢化補丁和Chrome插件。
2. Figma基于瀏覽器，會慢嗎？
Figma是在線使用，極少占用本地內(nèi)存，處理文件速度極快。
使用體驗是，飛一般的絲滑。
Sketch 太容易卡頓，設(shè)計文件一大一多卡頓得就更嚴重。
3. Figma學習成本高嗎？
對于有Sketch使用經(jīng)驗的設(shè)計師，1天足夠。
Figma的界面和快捷鍵，都和Sketch基本相似，而且Figma支持Sketch導入，所有的信息和內(nèi)容都得到了最大限度的保留，這對項目遷移非常友好。
對于未使用Sketch的設(shè)計師，筆者認為Figma是目前最易上手好用的設(shè)計軟件了。
4. Figma收費嗎？
Figma分成初級免費版，專業(yè)付費版，企業(yè)付費版和教育免費版。
個人使用，選擇初級免費版就完全足夠，無限的文件存儲空間，30 天版本歷史記錄，但只能2人同時編輯。
專業(yè)版適合團隊，比免費版優(yōu)在有無限的版本歷史記錄，無限編輯者，無限項目。費用是按月15美元/月/人或按年12美元/月/人。
企業(yè)版比專業(yè)版優(yōu)在有更多定制化服務(wù)。滿足條件的教育者或者學生，可以免費使用。
5. Figma的教程、插件、資源在哪里？
最優(yōu)秀的教程就是Figma官網(wǎng)——https://www.figma.com/ Figma本身就自帶社區(qū)功能，提供了豐富的資源、插件，而且一直在更新，F(xiàn)igma的生態(tài)環(huán)境將會越來越好。
優(yōu)秀的國內(nèi)Figma學習網(wǎng)站推薦：
在接下來的10年、20年、50年，設(shè)計工具還會給我們帶來怎樣的驚喜？
誰都無法完美預(yù)測，但能肯定的是，能脫穎而出的是那些，在流程和模式上做出創(chuàng)舉，代表未來方向的產(chǎn)品。
至少現(xiàn)階段，F(xiàn)igma打破了原有工具的局限建立了自己獨特的核心競爭力，并且未來可期。
歡迎大家提出問題和闡述更多思考。
聯(lián)系客服
