Sketch or Figma誰才是UI設計軟體的未來?

2020-12-05 Mockplus摹客

談起UI設計軟體,首先想到的大概是Sketch。伴隨移動網際網路的興起,Sketch的發展可謂一騎絕塵。相比曾經的大哥Photoshop,Sketch雖功能不及其強大,但勝在更加輕量,更高效率,迅速俘獲了UI設計圈的青睞。一時間,幾乎所有國內外主流設計團隊都將Sketch作為主要的生產力工具,也使其成為了UI設計領域的新霸主。

近兩年,一款名叫Figma的設計工具異軍突起。根據UX Tools 針對全球數千名設計師年度問卷調查,Figma從2017年愛用度排名第七到2018年一下爆衝到第二名,並榮登2019年最令人期待的設計工具,展現出的驚人潛力令人側目。尤其今年以來,已經有非常多的公司正在從Sketch切換到Figma,比如大家耳熟能詳的Twitter、微軟、Github等,國內也有網易的設計團隊開始利用這款工具開展遠程協作設計。

那麼Figma究竟如何在國內外收割這麼多擁躉,以至於搶佔Sketch的用戶呢?

最好的跨平臺UI設計工具

一直以來,界面設計工具似乎對windows都極度不友好,比如Sketch壓根不開發windows版本,Adobe的XD雖然有windows版本,但實際使用體驗還是和Sketch有明顯的差距。而Figma基於web平臺開發,只要你的設備有瀏覽器,並且連接了網際網路,就可以獲得媲美sketch之於mac的極佳體驗,且不受系統約束。

流暢的操作體驗

雖然Figma基於web開發,其流暢性卻絲毫不遜色於客戶端軟體。曾經習慣用PS做設計的小夥伴,肯定有過被卡頓支配的恐懼,複雜的設計文件,尤其是多畫板的設計稿就連移動圖層都變得異常費勁。

Sketch在這點上相較於PS雖有極大的優化,但性能也有明顯的上限,如果畫板數量太多,長時間工作下的Sketch依然會卡頓不已。

Figma似乎並不怎麼消耗本地資源,同樣大小的項目文件,Figma能夠將緩存控制在極低且保持流暢的60幀渲染,可以說是真正的「如絲般順滑」。

超強的全局組件

這個功能非常類似Sketch的Library,不同之處在於你可以在Figma新建一個專門的文件來定義組件(component)或者樣式(style),再將其發布到庫(Library),這樣團隊中的所有成員都可以在團隊中的任意文件調用這些組件。同時得益於Figma是基於web開發,這些組件是可以實時同步更新的,這意味著一旦修改了某個組件樣式,團隊中所有項目內用到該組件的地方,都能選擇是否要同步更新。

真正的核心競爭力---團隊協作

依舊是基於web開發的先天優勢,多名設計師可以在Figma同時操作同一設計文件,不必保存後再相互發送,可謂效率倍增;Figma還支持評論留言,哪裡急需修改、哪裡優先級較低,只需要增加批註即可提醒團隊其他成員注意,從此再也無需將設計稿源文件在團隊內發來發去,評審也變得簡單高效。妥妥的殺手級功能。

恢復歷史版本

基於web的Figma雖然好處多多,卻總給人不安全的感覺。假如某個設計稿歷經數小時,一頓猛如虎的操作之後突然斷網斷電,如果沒有及時將文件保存,真的只能欲哭無淚。

Figma針對這一痛點做得非常到位。團隊中每一位成員的每一次修改都會生成對應的歷史版本,即使某位成員出現誤操作也有充分的兜底機制保證文件的安全。

可以看出,Figma是一款基於web的優秀設計軟體,各方面的使用體驗可以說和Sketch不相上下,二者的競爭也還在繼續。那麼作為設計師,我們又該如何選擇呢?

Sketch V.S. Figma

組件系統

組件(symbol)曾經是Sketch最為人稱道的殺手級功能,能夠極大提高設計效率。Figma的組件(Components)繼承了symbol的優點且更加靈活,更符合設計師的需要。

例如,在Sketch中創建一個symbol時,會將所有屬性保存其中,如果修改了任何屬性,需要以覆蓋的形式對引用該symbol的文件進行同步。如果你希望這個symbol有不同的對齊方式或顏色,需要提前預設好,或者解除symbol關聯後修改(解除後不能再同步symbol樣式)。

而Figma的component則更加自由,其強大之處在於存在父子級關係。當引用了一個component後,可以任意調整其屬性也不會干擾父級的樣式,而修改了父級的屬性又能修改全局。

協作方式

Figma的協作採用了谷歌文檔的模式,允許所有設計師同一時間,同一個文件上同時工作。你能看見許多滑鼠在頁面上,可以看到其他設計師正在做什麼。雖然設計師不情願,但是老闆和客戶大概會很喜歡這樣的感受。

Sketch由於是客戶端,協作需要藉助插件。有一款名叫abstract的版本管理插件,允許設計師在類似Github那樣的項目分支中設計,然後合併分支,解決衝突。雖然有些麻煩,卻也不失為一種嚴謹的Sketch設計稿版本管理解決方案方式。

設計稿交付

Figma有內置的標註工具,但問題是只能生成整個項目的連結發送給開發,需要開發自己找到標註頁面。不僅麻煩,當項目很大時載入的時間也會比較長。

Sketch有Cloud功能來交付,但功能並不完善,目前更多利用插件來解決這一需求。比如Zeplin,invision,摹客等等,都可以上傳指定的設計稿自動標註切圖交付開發。

UI設計軟體的未來?

一場突如其來的疫情極大改變了人們生活和工作的方式,許多公司開始嘗試遠程辦公,遠程協作成為了擺在檯面上的剛性需求。總的來說,筆者對於跨平臺,且擁有相對完善雲端協作體驗的Figma更加看好。雲才是未來,布局雲端協作的設計軟體也會越來越多,例如InVision推出InVision Studio和國內摹客團隊推出的摹客設計協作平臺等都是設計協作領域的佼佼者。這一領域的競爭仍在繼續,任何一款軟體成為未來的主流設計工具都有可能,讓我們拭目以待吧。

相關焦點

  • UI設計需要用到的軟體
    我們在學習UI設計的過程當中,需要學習到很多知識,比如軟體 Photoshop、illustrator、Ae、Axure、sketch這些都是一名UI設計必需要掌握好的軟體。學習到這些軟體,自學就可以,很多網站都有教程那麼這幾款軟體在UI設計工作是負責什麼的呢?
  • 一篇文章教你看懂Photoshop和Sketch
    寫在前面:最近有做UI的朋友問我sketch和ps到底有什麼區別?是不是sketch可以代替PS了呢?這篇文章深度為大家講解這兩種軟體的區別和做UI設計的優劣!sketch是一款輕量級的矢量設計工具!不了解該軟體的同學可能會問了,軟體這麼小能滿足日常設計需要嗎?功能多嗎?這麼問一點毛病都沒有!相比於ps來說,sketch的功能確實真的不是很多,但是確實能夠滿足對於那些單純做UI的同學來說,設計app,web,出圖切圖是完全足夠的!
  • 莫德雷德figma!搖曳露營周邊
    發售日期2020年8月售價9900日元/款3、figma《Fate/Apocrypha》「赤」之Saber 莫德雷德便服ver.Max Factory公司發行的人氣可動系列『figma』繼身穿銀白鎧甲的「赤」之Saber莫德雷德後,日前再度發表了出自《Fate/Apocrypha》的最新商品「figma 「赤」之Saber便服ver.」
  • UI設計模式大閱兵
    互動設計師在設計線框圖原型時,熟知常見的Web設計模式很有幫助,做到「心中有數」才能創造出符合需求,用戶易學易用的界面來。常見的設計模式有哪些呢?在商業中有哪些案例呢?某公司互動設計師張雅秋寫了一篇博文對此進行了總結,現轉載於此,全文如下:互動設計師在設計線框圖原型時,熟知常見的Web設計模式很有幫助,做到「心中有數」才能創造出符合需求,用戶易學易用的界面來。所謂「沒有必要重複發明輪子」,模式往往容易解決常見問題,正確的模式能幫用戶熟悉界面、提高效率。常見的UI設計模式如下圖:
  • 更新 | Sketch 58 中文破解版
    另一方面,Sketch提供的模板可以幫助您設計iOS和Mac OS X的圖標,以及效果和像素網格。低資源使用率和直觀,簡化的工作流程推薦它作為您設計工作的可靠伴侶。注意事項:1、使用新版本之前,記得把sketch源文件進行備份,因為用最新版sketch打開後再用低版本打開會出現data數據丟失,一些樣式錯誤等等2、要想開啟暗黑模式,需要將mac更新到10.14最新版支持系統:Mac系統
  • 你不得不學的sketch技巧之繪製MBE圖標
    對於sketch軟體新手來說,其實難點就在於如何繪製斷點描邊線條,其它的操作方式是一樣的。我們來看這個圖標難點就是斷點描邊的繪製吧,下面我們來看sketch軟體中的方法首先畫好圖形,帶描邊哦第二步,進入編輯模式,添加錨點,建議添加4個第三步,用剪刀工具,減去上下部分這就是我們想要的斷點效果啦
  • UI設計中配色設計攻略
    最近研究了一下配色方法,今天我就針對UI設計中配色設計攻略進行簡單的說明,希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」:人們在挑選商品和服務時 ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內,色彩的作用佔到了 67%。一個設計作品呈現在用戶面前,最先進入眼帘的就是產品的視覺表現,而色彩在其中起到了很大的作用。
  • UI設計的工作範疇有哪些?UI設計是做什麼的?
    UI設計的工作範疇有哪些?UI設計是做什麼的?原創 平面設計獅 2018-02-07 10:34:17當我還是一枚單純的p圖師的時候,誰要是叫我美工,我是拒絕的!我跟他們講,我是設計師,是能duang的一下就加特效的設計師。
  • 設計、仿真一體化,才是未來?
    本文由只是自動化(zhishipai)授權轉載 專業的設計優化工具領域,是最近二十多年才得以發展起來。它代表了一種全新的設計仿真一體化的理念,使得設計的迭代大大加速。而最新人工智慧的算法,則使得這一進程,進一步被加速。
  • 三維設計時代!怎麼運用軟體推敲出色的空間方案?
    ~三維軟體的使用已經成為設計師日常工作必不可少的一部分如何將軟體有效的運用在方案設計上成為了判別設計師水平的必備技能之一其中便捷的軟體功能清晰的設計思路鮮明的設計內容更是廣大設計師們迫切的需求而SketchUp軟體由此出現並成為廣受好評的設計應用軟體對於新手設計師而言僅僅掌握基本操作並不能更好的理清方案邏輯及提高工作效率對於方案設計師而言,如何加強方案設計能力,多維度表達自己的方案需求,更是急需解決的問題
  • 從過去到未來,淺析UI設計趨勢
    在了解事物發展動向前,我從三個方面作為切入點,即從對過去藝術設計發展的分析找到到規律,對現在UI發展的分析找到不足 ,從而預判未來趨勢二、現今UI設計發展進入21世紀,隨著社會發展技術進步,信息軟體行業逐漸興起,這裡要感謝喬幫主給我們飯碗,正是蘋果的設計讓全球開始重視用戶體驗重視UI設計,以前大家都叫美工……1.擬物化設計早期UI設計都是擬物化設計 ,其風格特點:模擬真實物體的材質、質感、細節、光亮等,交互也模擬現實中的交互方式,學習成本低,傳達豐富的人性化感情。
  • 中網的設計之爭,鍍鉻和網狀,誰才是未來的主流?
    特別是在買車的時候,拋開價格和品牌因素不看的話,外觀設計在購買決策中所佔的比重就很大,而代表一款車顏面的前臉就顯得尤為重要。而作為整車前臉上最亮眼的位置,中網的設計很大程度上影響一輛車的視覺效果,同時也是一個汽車品牌的象徵之一(家族化設計)。因此,如今大多數車企在設計中網的時候,都會設計得非常誇張。
  • Sketch 56.3最新中文破解版下載(無需漢化)
    目錄01 前言02 安裝步驟03 Sketch56.3新特性04 安裝包下載Sketch是為Mac打造的一款界面優美、功能強大兼有的矢量圖形繪製軟體第1步 雙擊後綴名為.dmg的安裝文件,在彈出窗口將Sketch拖拽到應用程式文件夾完成安裝第3步 如果軟體啟動時提示文件損壞打不開,則需要繼續執行以下操作 (mac作業系統在10.12及以上時會遇到文件破損情況,按照以下步驟操作即可解決)(1
  • 未來十年最緊缺職業,現在學還來得及嗎
    未來十年最緊缺職業到底是什麼職業在未來的十年都可能是緊缺的職業呢?當然是網際網路技術了。前10幾年的程式設計師在今天不是身價萬貫的網際網路大佬,就是工作經驗豐富拿著企業分紅的高級軟體工程師。那麼現在再去學it技術的話還來得及嗎?回答這個問題前我們先來了解一下現在如果學網際網路的話去學什麼技術比較好。
  • 質子交換膜燃料電池測控系統的設計
    測控系統軟體設計系統的整個軟體的編寫採用結構化模塊程序設計的方法,對於各個功能模塊分別進行相應的程序設計,使整個程序清晰明了,並且方便對整個程序的設計及代碼的編譯調試。>v->loop_index++;if(v->loop_index >= v->i_period){if(v->error_reg < v->error_limit)//當誤差小於某值時才加入積分
  • Semantic UI 1.0 發布,前端 UI 框架 - OSCHINA - 中文開源技術...
    Styled accordions are now included as a variationui styled accordionList - List item selectors are now more strict, list items must be immediate children ofui listorui list list
  • NE國際出版社幼兒啟蒙閱讀教材Reading sketch starter(適合寒暑假...
    今天我們從一個不同的角度給大家推薦一款極好的幼兒啟蒙閱讀教材,即NE國際出版社的Reading sketch starter1-3。那麼同樣是啟蒙閱讀,繪本和教材的區別究竟在哪兒呢?繪本通常成套售賣,8-10本一個級別,相對售價比較高,單級別市場價在200-300元左右;而我們的幼兒啟蒙閱讀教材含完整的學生書和練習冊以及多媒體ebook光碟,裡面整合了16-20個同樣帶有精美插畫的啟蒙故事,一學年售價才100多元。閱讀文本數量翻倍,而價格才不到一半!
  • 法拉第未來的FF車標是誰設計的?
    賈躍亭造車已成為最近兩年各大媒體熱捧的話題,FF無疑是國內汽車新勢力中最愛人們關注的品牌,從FF瀕臨破產到與恆大結合,再與恆大分手備受網友的熱議,那麼有誰知道賈躍亭FF的車標到底是誰設計的?那我們來看上海滬琛品牌營銷策劃有限公司打造的FF這個品牌logo除了擁有時尚便於識別的外觀,到底是什麼其它的含義呢:上海滬琛品牌營銷策劃有限公司設計的FF車標拋棄了樂視的傳統、土氣的形象,以一種全新的極具未來感的設計風格展現給人們,FF形似漢字「父」代表FF汽車的行業領導者的風範,將字母FF逆時針翻轉45°,極具神秘色彩和未來感,與「新物種」的品牌定位相吻合。
  • 漢語拼音ui和iu,到底有什麼不同,如何區分呢?
    看起來與上節課學習的雙韻母ui,非常的相似。孩子們在學習iu的時候,很難將這兩個漢語拼音字母的讀音給區分開。所以說,區分ui和iu,就是這節課學習的重點和難點。也是家長輔導孩子的重點。那麼,漢語拼音ui和iu,到底有什麼不同呢?如何將他們徹底區分開呢?如何讓孩子做到,看一眼,就能準確地讀出來它的發音呢?要想徹底區分開,首先,明確ui和iu是屬於同一件事。
  • 你還在用做平面的思維做ui設計嗎
    你還在用做平面的思維做ui設計嗎 五維網