Figma 最重要的特點就是基于 Web哗脖，而隨著云計算基礎(chǔ)設(shè)施越來越好，加上 5G 的鋪開扳还，設(shè)計工具的 Web 化會成為趨勢才避。但是，由于我們以往對 Web 的感覺是性能不夠強大氨距，總覺得在 Web 上做設(shè)計會沒有腳踏實地的安全感桑逝。可是 Figma 會讓你完全打消疑慮俏让，它甚至比本地應(yīng)用 Sketch 還要流暢肢娘。

一、?設(shè)計工具的?Web?化才是未來呀??? ??

Web 是 Figma 最重要的特點舆驶。隨著云計算???和 5G 網(wǎng)絡(luò)的鋪開橱健，設(shè)計工具的 Web 化是必然的趨勢。在未來沙廉，Web 將不再是“性能差”的代名詞拘荡，反而會成為一個優(yōu)勢。

說設(shè)計工具之前撬陵，我們可以先來看看互聯(lián)網(wǎng)從業(yè)者們非常熟悉的文檔的發(fā)展歷史珊皿。從最早的手寫???，到人類發(fā)明了打字機???巨税，到 Microsoft 推出 Word 文檔蟋定，我們可以將文檔保存在本地，并且借由互聯(lián)網(wǎng)發(fā)送給對方草添。接著 Google 在 2006 年發(fā)布了劃時代的 Google Docs驶兜，文檔正式進入在線協(xié)作時代。

可以說到現(xiàn)在，協(xié)作文檔的發(fā)展已經(jīng)十分成熟了抄淑。但基于 Web 的設(shè)計工具則是剛剛起步的屠凶。從手繪到 Photoshop 再到 Sketch，設(shè)計師們似乎一直停留在本地文件的時代肆资，跨越到在線協(xié)作時代目前看來只是時間問題矗愧。而在近幾年誕生的這一批新型工具里，F(xiàn)igma 應(yīng)該是目前綜合體驗最好的選擇了郑原。

2唉韭、"Figma 比 Sketch 更快???

Figma 的快從你滑動畫布的那一刻就開始體現(xiàn)了。如果打個比方的話犯犁，Sketch 就像是一輛汽車???属愤，它在開往目的地的途中可能會遇到很多的故障 (引擎熄火、輪胎爆了...)栖秕，于是你不得不花時間停下來處理它春塌，等待它重新恢復到正常狀態(tài)晓避。相信每個人用 Sketch 的人都遇見過下面令人心碎的畫面??簇捍，運氣好的逃過一劫，運氣不好設(shè)計稿重畫俏拱。

但 Figma 不一樣暑塑。Figma 就像是火箭???一樣，它在剛開始的時候會需要一段時間的準備工作 (網(wǎng)頁加載需要耐心)锅必，但只要它成功點火了事格，它就會以最高的速度飛向天空，再也沒有什么能夠停下它的腳步搞隐。就我個人使用下來驹愚，沒有遇到過一次像 Sketch 那樣中途卡頓的情況。

除了最初的網(wǎng)頁加載和部分圖片加載需要點時間外劣纲，F(xiàn)igma 在處理速度上真的可以說是碾壓 Sketch逢捺。

3、?Figma 比 Sketch 更方便??

長久以來癞季，設(shè)計師只有 Sketch 是不夠的劫瞳。我們還需要像 Zeplin 這樣的設(shè)計交付工具，幫助我們把本地文件變成一個個開發(fā)可以看得懂的網(wǎng)址鏈接绷柒；還需要像 Abstract 這樣的版本管理工具志于，幫助我們更好的管理亂七八糟的設(shè)計文件；甚至還需要像 Dropbox废睦、Google Drive 這樣的云盤來存儲伺绽、同步。有人算過一個設(shè)計團隊每年要在這些配套工具上花多少錢嗎？

但有了 Figma憔恳，這一切變得簡單了許多瓤荔。一個網(wǎng)址，一切在握钥组。更沒有中間商賺差價输硝。

與設(shè)計同學的協(xié)作

不久前在做項目的時候，涉及到多位設(shè)計師一起合作程梦，那個時候我們的做法是大家各自開一個 Sketch 文件畫自己的部分点把。但問題也隨之而來：

- 我們互相之前不清楚對方的進展與改動；

- 涉及到同樣的組件樣式時屿附，我們會頻繁跟其他設(shè)計師傳輸源文件郎逃。

但如果使用 Figma，這一切會變得簡單許多挺份。我們只需要在同一個設(shè)計文件里建立三個 Page褒翰，大家約定好在不同的 Page 里畫圖就好了。只要切換 Page匀泊，就能看見其他設(shè)計師的進展和改動优训；如果要復用對方的頁面樣式，直接復制粘貼到自己的 Page 即可各聘。這樣就大大減少了設(shè)計師內(nèi)部協(xié)作時的溝通成本揣非。

與產(chǎn)品同學的協(xié)作

在工作中，我們常常利用企業(yè)聊天工具里的截圖功能躲因，發(fā)送設(shè)計截圖給產(chǎn)品同學早敬。如果和產(chǎn)品同學就某個點沒能達成一致的話，可能需要反復的發(fā)送各種不同嘗試的設(shè)計圖大脉。

使用 Figma搞监，這一切就變成了：鼠標輕輕一點，發(fā)送一個網(wǎng)址鏈接給對方镰矿，他就可以在網(wǎng)頁上實時看見你的改動琐驴。如果他對于某個設(shè)計稿有疑問，可以利用 Figma 自帶的評論功能進行評論衡怀，設(shè)計師們也能立刻即時給予回復棍矛。

你甚至可以把 Figma 設(shè)計稿嵌在產(chǎn)品需求文檔里，這樣就不用一頁頁導出 PNG 再粘貼上去了??抛杨。

與開發(fā)同學的協(xié)作

我們之所以使用 Zeplin 這樣的標注工具够委，是因為我們需要把設(shè)計圖轉(zhuǎn)化成開發(fā)能夠看得懂的代碼。我認為這是一款設(shè)計工具需要具備的功能怖现，但很顯然 Sketch 做不到這一點茁帽，于是我們不得不依賴于第三方玉罐。

但 Figma 做到了。它從一開始就是一款對開發(fā)更友好的設(shè)計工具潘拨，它使用的 Frame 概念和前端工程師用的 HTML 是類似的吊输。它能幫助設(shè)計師更好的以工程師容易理解的方式來進行設(shè)計。

同時 Figma 自帶標注功能铁追，你只需要把設(shè)計稿的網(wǎng)址發(fā)給開發(fā)同學季蚂，他就能在右側(cè)面板看見對應(yīng)選中項的代碼??。

自己畫圖也方便

比起 Sketch琅束，F(xiàn)igma 有很多的貼心小功能讓我覺得它更適合用來做界面設(shè)計扭屁，畫圖方面，Sketch 并做不到這么自由涩禀。

智能排版

這是我在做列表和 Feed 的時候經(jīng)常會用到的一個功能料滥，F(xiàn)igma 會自動幫你將雜亂的布局變成整齊的排列，同時你可以控制調(diào)整各個控件的間距艾船，移動他們的位置葵腹。

和 Google Fonts 聯(lián)動

當你需要使用一些不一樣的字體時，可以進入 Google Fonts 進行挑選屿岂，選好字體后復制字體的名字践宴，再打開 Figma，在字體名稱那里粘貼并按回車雁社，稍等片刻即可浴井，避免了到處找字體資源下載的煩惱晒骇。

當然 Figma 還有很多這樣的貼心功能霉撵，就不在這一一列舉了，大家可以在 Figma 的官方教程里看見這些小技巧洪囤。

" 如何用 Figma 構(gòu)建自身的組件化思維徒坡？?

什么是組件化思維？

組件化思維可以理解為當代分工精細化的產(chǎn)物瘤缩，無論是傳統(tǒng)的工廠制造業(yè)還是手機喇完、電腦等模塊化的設(shè)計產(chǎn)物，將原本的復雜結(jié)構(gòu)拆分成可重復制造的單個模塊剥啤，最終組裝成你的產(chǎn)品锦溪。組件化思維能夠有效的保證設(shè)計品質(zhì)和規(guī)范標準量化，提升整體的工作和生產(chǎn)效率府怯。

對于互聯(lián)網(wǎng)設(shè)計師來說刻诊，我們在實際工作中構(gòu)建本公司的設(shè)計規(guī)范并推動落實就變得極為重要。這個需要從設(shè)計牺丙、產(chǎn)品则涯、研發(fā)各個環(huán)節(jié)都需要保證思維的統(tǒng)一复局，所以對于每個模塊的溝通和交付方式都需要內(nèi)部的多次交流并敲定符合本公司的方式，這對于設(shè)計成本和研發(fā)成本都有極大的參考價值粟判。

無論是 Apple亿昏、Material、IBM Design System 還是國內(nèi)的 Ant Design档礁，設(shè)計組件化的構(gòu)建保證了各平臺的體驗和交互的統(tǒng)一性角钩。

什么是組件？

組件就是頁面中能復用的部分呻澜，比如圖標彤断、按鈕、模態(tài)窗易迹、表單等宰衙，即功能性設(shè)計模式。

什么是樣式睹欲？

樣式是頁面中能夠?qū)τ诮M件發(fā)生樣式屬性的修改或者調(diào)整的色彩供炼、字體、投影窘疮、網(wǎng)格袋哼，即從屬于感知性設(shè)計模式。

那接下來我們逐步告訴大家如何用 Figma 創(chuàng)建一個能夠滿足自身業(yè)務(wù)需求的組件庫，組件模塊化設(shè)計體系需要對齊自身的設(shè)計目標咽袜，滿足基本的復用性和未來的拓展性坝辫。

1、如何創(chuàng)建組件?

Figma 組件需要明確二個屬性

Master Component弟翘，即主組件；主組件是你自行創(chuàng)建的源組件骄酗，對主組件進行的任何操作都會影響到全局復用該組件的場景稀余。Instance，即實例趋翻；實例的修改可以獨立于源組件進行單獨調(diào)整睛琳。實例會被鏈接到主組件，因此對主組件所做的任何更改都將應(yīng)用于實例踏烙。

??Figma Tips: 按住 option + command 拖動組件到相對應(yīng)的組件师骗，直接替換。

Constraints 約束

無論 Figma 還是 Sketch讨惩，都會有一個元素約束面板辟癌，這個面板其實來源于 iOS 開發(fā) Xcode 的面板，對于組件的寬高步脓、上愿待、右浩螺、下、左邊距值都可以定義仍侥，甚至定義水平或垂直居中要出。

約束保證了一個組件在各平臺的通用性，能夠滿足不同屏幕寬高比的需要农渊。對于組件構(gòu)建良好的約束會在適配各機型中達到事半功倍的效果患蹂。

2、如何創(chuàng)建樣式?

對于樣式的定義在 Figma 中變得輕松且愉悅砸紊，F(xiàn)igma 在初始狀態(tài)下右側(cè)提供了所有樣式的看板界面传于。

關(guān)于創(chuàng)建色彩

Figma 創(chuàng)建完色彩之后，色彩樣式不僅能夠使用在圖形上醉顽，還可以直接使用在字體上沼溜，而 Sketch 目前的色彩樣式只能作用于圖形。

我自身的最新項目中將所有字體運用色彩樣式游添，當我需要調(diào)整時系草，只需要將對色彩值的屬性調(diào)整完，所有頁面當中字體復用了該色彩樣式的全被刷新了一遍唆涝，這個時候你就明白了當初為什么給每個頁面去添加對應(yīng)色彩樣式的“笨拙”操作了找都。

關(guān)于創(chuàng)建字體

創(chuàng)建字體首先需要明確下對應(yīng)的字體梯度和字重，對于色彩的運用可以在 Figma 里拆分開來使用廊酣，比如鏈接色需要藍色就可以單獨添加能耻。

3、Figma 組件????Sketch 組件?

Figma 提供的組件圖形界面更偏向設(shè)計師亡驰，組件即看即用晓猛，同時也提供了列表顯示組件名的切換方式。

對比 Sketch隐解，在沒有 Sketch Runner 插件運用組件的幫助下鞍帝，對于組件化構(gòu)建良好的????系統(tǒng)诫睬，設(shè)計師運用組件鏈路過于漫長煞茫。

4、團隊合作?

對于很多設(shè)計師來說免費試用是 Figma 的絕對優(yōu)勢摄凡，這里要說明一下续徽，F(xiàn)igma 僅在不同項目中不使用組件化的前提下是免費的！色彩亲澡、字體以及投影等樣式個人版也是可以上傳同步的钦扭。

但是涉及設(shè)計團隊使用組件的話，那就要收費了床绪，F(xiàn)igma 對于有隱私要求的客戶提供了 SSO 的定制化驗證方式客情。