Sketch對(duì)于我們來(lái)說(shuō)在熟悉不過(guò)了，它解放了我們用PS做設(shè)計(jì)稿的時(shí)代！現(xiàn)在Sketch也已經(jīng)得到了很大的普及，大多數(shù)的團(tuán)隊(duì)和設(shè)計(jì)師都在用它做設(shè)計(jì)稿，但是我個(gè)人在使用過(guò)程中也遇到了很多Sketch存在的問(wèn)題，也許其中就有你也碰到過(guò)的哦

1. 1.Sketch終端無(wú)法訪問(wèn)賬戶，不能夠線上共同協(xié)作。

2. 2.不想每天帶著U盤(pán)上下班，拷貝源文件（Sketch低版本打不開(kāi)高版本的文件）

3. 3.開(kāi)發(fā)交付，藍(lán)湖一直以來(lái)是免費(fèi)使用的，在今年6月份也開(kāi)始實(shí)施訂閱收費(fèi)。這讓我不得不刪減一半多的項(xiàng)目才可以添加新項(xiàng)目

4. 4.Sketch插件很豐富，但每次更新都會(huì)有幾個(gè)插件出現(xiàn)不兼容罷工情況

5. 5.流暢度，Sketch面對(duì)小項(xiàng)目還好，頁(yè)面一旦多起來(lái)運(yùn)行就會(huì)卡頓

6. 6.實(shí)時(shí)預(yù)覽有時(shí)候會(huì)出現(xiàn)錯(cuò)誤，必須保存文件推出軟件后，重新打開(kāi)才可以

7. 7.。。。。

emmmmm。。。。。我用的是破解版Sketch軟件，正版會(huì)不會(huì)出現(xiàn)這些情況我不曉得哦，反正我是沒(méi)用過(guò)正版，嘻嘻嘻。針對(duì)這些問(wèn)題無(wú)非就是協(xié)作和流程的問(wèn)題，但是遇到Figma之后，這些問(wèn)題就不復(fù)存在了，這是為什么捏？？？

 

什么是Figma？：以為是個(gè)青銅實(shí)際上是個(gè)王者！

啰哩啰嗦那么多，正式進(jìn)入主題。Figma是一個(gè)基于瀏覽器的協(xié)作式UI設(shè)計(jì)工具，從推出至今受到UI設(shè)計(jì)師的青睞，也有很多的設(shè)計(jì)團(tuán)隊(duì)投入了Figma 的懷抱，比如像阿里、京東、字節(jié)和小米等就有設(shè)計(jì)團(tuán)隊(duì)已經(jīng)開(kāi)始使用Figma做設(shè)計(jì)了。

其實(shí)很多人包括我自己對(duì)于在線工具的第一印象就是覺(jué)得功能雞肋、性能差，尤其是較為專(zhuān)業(yè)的工具更是覺(jué)得不咋滴。然而實(shí)際體驗(yàn)下來(lái)與Sketch別無(wú)二致，某些功能甚至比Sketch還要更懂你，更重要的是使用過(guò)程如絲般順滑，從此跟Sketch卡頓說(shuō)拜拜??啦

 

基于瀏覽器有什么好處？

• 跨平臺(tái)：不受平臺(tái)限制，在iPad上也可以使用（Win、Chrome、Linux、Mac、iPad）

• 無(wú)需保存：線上實(shí)時(shí)保存，文件存儲(chǔ)云端。Figma支持歷史版本恢復(fù)，免費(fèi)版最多保存 30 天。專(zhuān)業(yè)或團(tuán)隊(duì)版無(wú)限制

• 分享無(wú)限制：設(shè)計(jì)文件一個(gè) 鏈接，即可第一視角查看/編輯。這對(duì)工作流程是一個(gè)很大的改變

• 多人線上協(xié)作：這個(gè)協(xié)作是多人同時(shí)對(duì)同一個(gè)項(xiàng)目文件進(jìn)行線上實(shí)時(shí)編輯修改，尤其是疫情之后，線上遠(yuǎn)程更凸顯重要
  

  
  

興趣驅(qū)使：實(shí)際上手操作

擼起袖子，鉚勁學(xué)就完事了！通過(guò)草帽sMao的B站教學(xué)視頻  https://space.bilibili.com/108104104/video

以下是我跟著教程演練的內(nèi)容，因?yàn)閍pp是臨摹的，主要以熟悉Figma的功能體驗(yàn)和操作邏輯，從通用的「基礎(chǔ)樣式」到「組件搭建」再到「頁(yè)面還原」最后「對(duì)接開(kāi)發(fā)」。當(dāng)然你還可以玩起「高保真交互」

圖為臨摹項(xiàng)目

Figma 有插件么？：Sketch 上我依賴(lài)很多插件完成工作

不得不承認(rèn)，Sketch的強(qiáng)大一定程度上是擁有灰?；页ＸS富的插件來(lái)輔助我們完成設(shè)計(jì)。當(dāng)然，F(xiàn)igma 也支持插件開(kāi)發(fā)。

哇哦！那他有哪些功能？

Figma = UI設(shè)計(jì)（更強(qiáng)大的組件功能Component + 更加智能的Auto Layout + 更加便捷的Layout Grid） + InVision（原型設(shè)計(jì)） + Zeplin標(biāo)注（無(wú)需任何操作，直接將文件分享給開(kāi)發(fā)即可查看） + Dropbox（云端同步） + Abstract（版本歷史） + Craft-Freehand（實(shí)時(shí)討論） + Liveshare（實(shí)時(shí)分享） + Team Library（團(tuán)隊(duì)組件庫(kù)）+ Web API +....

 Figma 的一些功能和特性

UI 設(shè)計(jì)

Figma 是為 UI 設(shè)計(jì)而開(kāi)發(fā)的設(shè)計(jì)工具，除了有和 Sketch 一樣基本的操作和功能，還有許多專(zhuān)為 UI 設(shè)計(jì)而生的強(qiáng)大功能。

原型設(shè)計(jì)

你可以在 Figma 里面無(wú)縫完成從設(shè)計(jì)到原型演示的切換，不需要反復(fù)同步設(shè)計(jì)圖到第三方平臺(tái)，我們同樣可以利用 Figma Mirror 在手機(jī)上預(yù)覽效果。

前端協(xié)作

工程師可以在設(shè)計(jì)圖上獲取標(biāo)注、并且可以導(dǎo)出所需任何資源（包括 CSS、iOS、Android 樣式）

實(shí)時(shí)協(xié)作 + 內(nèi)置評(píng)論

在 Figma 里，設(shè)計(jì)和協(xié)作可以是同時(shí)進(jìn)行的，任何人都可以在設(shè)計(jì)圖的任何地方添加評(píng)論， 你可以在評(píng)論中 @其他人或?qū)⒃u(píng)論標(biāo)記為已解決。

團(tuán)隊(duì) Library

我們可以跨項(xiàng)目共享和更新 Component、Style，但需要注意的是免費(fèi)版不能跨文件共享 Component。

封閉與打通

Figma 被我運(yùn)用到實(shí)際改版新項(xiàng)目中帶來(lái)的最大最直觀變化是我不再使用 Sketch、藍(lán)湖、Axure、腦圖，因?yàn)?Figma 自身包含了以上的功能，除了省去在不同應(yīng)用之間的切換的麻煩且降低了學(xué)習(xí)成本，原本我們要熟悉整個(gè)工作流程需要學(xué)很多個(gè)軟件進(jìn)行協(xié)同，現(xiàn)在你只需要Figma就夠了。極大的改變了我們的工作模式。

設(shè)計(jì)的封閉性

設(shè)計(jì)一直以來(lái)都是較為封閉，上下游對(duì)接同頻道困難，甚至設(shè)計(jì)內(nèi)部分享和同步效率都較低

關(guān)于前者對(duì)接上下游時(shí)我們會(huì)遇到兩種情況，對(duì)于老板或者甲方需求方，由于設(shè)計(jì)文件為專(zhuān)業(yè)設(shè)計(jì)工具的限制或分享受限，導(dǎo)致上下游很難直接打開(kāi)，就需要我們要一張張圖片導(dǎo)出效果圖給到對(duì)方，如有需要修改地方，改完后又需要再導(dǎo)一遍，反復(fù)多次之后砸電腦的心都有了！

后者，設(shè)計(jì)師內(nèi)部協(xié)作更是抓狂，先不說(shuō)文件同步共享問(wèn)題，要想多人同時(shí)對(duì)一個(gè)項(xiàng)目協(xié)作完成一個(gè)需求，除了付出較高的溝通成本外，維護(hù)迭代組件庫(kù)和調(diào)用都是問(wèn)題，除了互聯(lián)網(wǎng)大廠對(duì)協(xié)作較為完善外，中小企業(yè)的很難會(huì)通過(guò)Sketch能夠維護(hù)并迭代組件和調(diào)用

Figma協(xié)作的全新模式

所有的上下游對(duì)接和對(duì)外分享只需要一個(gè)鏈接??，無(wú)論是視覺(jué)稿，還是交互稿，組件系統(tǒng)還是規(guī)范亦或是開(kāi)發(fā)標(biāo)注，都可以通過(guò)一個(gè)鏈接第一視角查看所有

分享文件只需要復(fù)制一條鏈接即可，項(xiàng)目?jī)?nèi)的人可以通過(guò)不同權(quán)限進(jìn)行編輯/查看。透明開(kāi)放式設(shè)計(jì)最直觀的好處就是，降低溝通成本，避免信息不對(duì)等和延遲性帶來(lái)的不必要的沖突，同時(shí)也可以讓上下游的成員直觀的看到一個(gè)需求是如何演化為設(shè)計(jì)稿的過(guò)程

協(xié)作問(wèn)題，F(xiàn)igma文件內(nèi)，可以多名設(shè)計(jì)師分頁(yè)對(duì)其不同模塊盡行完成修改和設(shè)計(jì)，比如一個(gè)設(shè)計(jì)是負(fù)責(zé)某一個(gè)模塊的修改或者是新增頁(yè)面設(shè)計(jì)，另一位設(shè)計(jì)師可以同步進(jìn)行組件設(shè)計(jì)和歸類(lèi)，多線程并行讓設(shè)計(jì)師之間的協(xié)作更能夠?qū)Ｗ⒂谧约旱娜蝿?wù)的同時(shí)更容易在多人模式下把控整體效果產(chǎn)出和組件系統(tǒng)的更新

協(xié)作視角

自己視角

Figma組件化

在Sketch做設(shè)計(jì)稿的時(shí)候我也嘗試為一個(gè)項(xiàng)目盡可能做完善基礎(chǔ)組件和后期迭代，但是Sketch的組件歸類(lèi)和命名方式以及調(diào)用路徑想想頭發(fā)就掉不少！另外再經(jīng)過(guò)幾個(gè)設(shè)計(jì)師或者歷任設(shè)計(jì)師的手后，原本的組件系統(tǒng)早已面目全非，冗余混亂。所以趁著自己近段時(shí)對(duì)項(xiàng)目大改機(jī)會(huì)，從0到1的重新搭建組件系統(tǒng)

組件系統(tǒng)的設(shè)計(jì)基本遵循原子化設(shè)計(jì)理念，從最基礎(chǔ)的顏色、字體、字號(hào)等元素開(kāi)始，將相關(guān)元素放到我們的組件庫(kù)頁(yè)面統(tǒng)一分類(lèi)管理

再完美也有缺點(diǎn)

作為一款在線工具，缺點(diǎn)也是非常明顯，那就是受限于網(wǎng)絡(luò)，這幾本上師所有在線工具共有的軟肋，如果網(wǎng)絡(luò)狀態(tài)較差，別說(shuō)線上協(xié)作，進(jìn)入項(xiàng)目都困難。

目前國(guó)內(nèi)訪問(wèn)Figma不需要科學(xué)上網(wǎng)，但是有時(shí)候訪問(wèn)依然比較遲緩，不知道是國(guó)內(nèi)通病還是我網(wǎng)絡(luò)差

網(wǎng)絡(luò)差就會(huì)這樣一直加載

趨勢(shì)及未來(lái)

設(shè)計(jì)師個(gè)人

值得體驗(yàn)，經(jīng)過(guò)疫情之后，遠(yuǎn)程辦公，線上協(xié)作更是引起了極大重視，未來(lái)辦公環(huán)境將不受限制，你可以在家辦公而且還為企業(yè)降低HC成本，自由設(shè)計(jì)師將會(huì)成為職場(chǎng)設(shè)計(jì)師的下一站。當(dāng)下的協(xié)作方式還有提升優(yōu)化的空間，另外，F(xiàn)igma個(gè)人使用完全免費(fèi)

設(shè)計(jì)團(tuán)隊(duì)

對(duì)于小團(tuán)隊(duì)來(lái)說(shuō)，用就完事了，

大公司考慮的比較復(fù)雜，設(shè)計(jì)工具的更替會(huì)遇到很多困難，生產(chǎn)環(huán)境的遷移，網(wǎng)絡(luò)的穩(wěn)定，文件的備份存儲(chǔ)等等都是問(wèn)題，另外Figma的團(tuán)隊(duì)版是至少 $144 / 人 / 年的支出，不過(guò)如果你遇到一個(gè)好的老大，自上而下推進(jìn)，懂得設(shè)計(jì)的多元化和包容性，那就是另一回事了。

如果想體驗(yàn)上手，先去B站通過(guò)草帽sMao的教學(xué)視頻  https://space.bilibili.com/108104104/video快速瀏覽一遍，感興趣可以進(jìn)一步研究

拜拜啦。。。。。對(duì)你有幫助就麻煩按下你的大拇指叭?。。?！嘻嘻嘻嘻??