01-工作流程比較

02-具體問題分析

03-Figma優(yōu)勢總結(jié)

Figma是什么？

Figma 是一個基于瀏覽器的協(xié)作 UI 設計工具。 自推出以來，它越來越受到 UI 設計師的歡迎，許多設計團隊都擁抱了 Figma。

基于瀏覽器的好處？

1.無需保存，實時保存

2.您只需要一臺電腦（win/Mac），無論您身在何處，都可以打開您的設計圖紙并開始工作。

＃ 安全

1.figma還有桌面應用程序，在線figma文件也可以導出并存儲在本地。

2.Figma支持歷史版本恢復。

3. Figma的所有基礎設施分布在3個AWS數(shù)據(jù)中心。 如果其中任何一個數(shù)據(jù)中心意外發(fā)生故障，其他數(shù)據(jù)中心將繼續(xù)工作。

4、獲得紅杉資本領投的4000萬美元C輪融資

# 無滯后

在處理大文件時，經(jīng)常會出現(xiàn)卡頓或者直接崩潰的情況。 最壞的情況是文件沒有保存，需要重新繪制設計圖。

但figma不一樣。 除了初始網(wǎng)頁加載和部分圖片加載需要一段時間外，F(xiàn)igma 在處理速度上確實可以說是碾壓式的。

#Figma函數(shù)

很長一段時間，僅僅成為一名設計師是不夠的

我們還需要【Blue Lake】這樣的設計交付工具來幫助我們將本地文件轉(zhuǎn)化為開發(fā)者可以理解的URL鏈接； 我們還需要這樣的版本管理工具來幫助我們更好地管理凌亂的設計。 文檔;

甚至需要像Drive這樣的云盤來存儲和同步，而且存儲后還需要整理，費了不少力氣。

但有了Figma，這一切就變得容易多了。 一個URL，一切盡在掌握。 沒有中間商賺取差價。

＃ 更方便

1.沒有傳統(tǒng)文件的概念（不需要來回傳輸文件）

2. 一個項目不需要拆分成多個文件。 每個人負責哪個模塊只需要在相應的頁面下進行設計即可。

3.多人協(xié)作sketch導出svg圖標，只需切換頁面即可。 如果你想重復使用對方的頁面樣式，只需將其復制并粘貼到自己的頁面即可。 這大大降低了設計師內(nèi)部協(xié)作時的溝通成本。

4、無論你身在何處，只要有電腦、有互聯(lián)網(wǎng)連接，就可以打開設計稿

5、任何人看到的設計稿永遠是最新的。

# 素材整理與分享

比如我們視覺同學在需要整理材料的時候就會遇到問題。

1：win無法打開文件

2：材料不方便攜帶，需要復印。 本地文件和硬盤文件經(jīng)常不同步，需要重新組織。

3：材質(zhì)文件過大卡住。

4：文件共享速度太慢

# 更強大的組件

首先我們來比較一下兩者是如何調(diào)用組件的。

# 拖動并播放

所有元件均可拖動，配合元件搜索功能使用，更高效地完成設計工作。

#高效創(chuàng)建組件

我們可以在任意頁面下創(chuàng)建組件，而無需到單獨的頁面進行編輯。在當前頁面編輯組件可以實時預覽界面設計效果。

#靈活的子組件

子組件更加靈活和可變。 除了位置不變之外，顏色、邊框、圓角等CSS都可以改變。 以最簡單的按鈕為例：

#自動布局

自動布局是指預先建立規(guī)則，當子元素增加或減少時，父元素尺寸自動按照規(guī)則改變，或者當父元素尺寸改變時，子元素自動按照規(guī)則改變。

使用自動布局可以大大縮短重復性工作（節(jié)省間距計算和元素對齊調(diào)整的時間）。 它還可以框架我們的UI設計稿，幫助我們從開發(fā)的角度來繪制界面，并有助于提高界面的還原性。

毫不夸張地說，設計師日常工作中只有20%是用來創(chuàng)造性地解決問題的，80%的時間是在重復一些機械操作，換顏色、換間距、換排列、換名字、改、改。 、更改、保存更改。 保存修改，保存修改，最后組織同步文件，讓整個設計工作變得冗余、低效、枯燥。

#布局網(wǎng)格

Figma 可以向框架和組件添加網(wǎng)格（網(wǎng)格、行、列）。 添加網(wǎng)格可以幫助我們快速對齊元素。 當我們將元素與網(wǎng)格對齊，并配合拉伸、縮放時，框架中的元素就會遵循設定的規(guī)則，隨著網(wǎng)格而變化，方便我們做出適當?shù)恼{(diào)整。 匹配。

# 拆分組件庫-(跨文件共享)

將原本包含屬性樣式、圖標、基礎組件、業(yè)務組件等的龐大組件庫文件按類拆分為多個獨立的組件文件。 一方面，F(xiàn)igma 通過 Team 共享組件非常方便。 即使文件被分割，也不會有任何額外的負擔，對于后續(xù)的擴展會更加方便。 另一方面，分類后的組件庫將更加明確地履行自己的職責。

#圖標組件庫

當圖標庫導出為PNG或通過AI導入時，通常不會保留安全距離，但figma不會出現(xiàn)。

在AI中繪制圖標，批量拖入figma中。 通過批量創(chuàng)建組件功能，可以快速構(gòu)建圖標組件庫。 在后期的開發(fā)過程中，可以開發(fā)SVG格式直接導出圖標。 無需制作多個尺寸的圖標。

#有趣的圖形

附帶Arc工具可以將其變成其他一些很酷的圖形

#可視化窗口

項目分類清晰，根據(jù)分類可以快速找到文件。 有沒有一種打開藍湖就可以編輯的立竿見影的感覺？

#高保真交互原型

Figma 可以創(chuàng)建高保真交互式原型，并從設計到原型演示無縫切換。 比死板的頁面跳轉(zhuǎn)更加友好，適合演示展示。 使用 Figma 在手機上預覽效果。 支持導入gif文件，讓演示更加靈活。

#與前端配合

每個 Figma 文件都有代碼模式，工程師可以在其中查看設計文件。 工程師可以自行獲取設計圖上的注釋并導出所需資源（包括CSS、iOS、樣式）

#豐富的插件環(huán)境

地址：。

例如：圖表、圖標庫、自定義地圖、自定義插圖、設計系統(tǒng)等優(yōu)秀的插件幫助我們快速工作。

該插件將于2019年底左右開放，短時間內(nèi)，插件的增長速度非常快。

安利一些我覺得比較好用的插件。

它允許設計者直接選擇兩個元素并自動繪制流程圖，省去了繪制流程圖過程中標記箭頭的繁瑣工作。

中文插件

菲格瑪

移動預覽插件

3D

3D 允許您將 3D 元素插入 Figma 中。 更有趣的是，你可以將你的設計稿放入預設的交互式3D中，然后將圖像導出到Figma。 從此，您不用再為找不到合適的包裝設計稿而煩惱了。 你可以自己做。 吃飽穿暖都夠了。

04-兩者的缺點

05-團隊學習成本

這兩個工具具有幾乎相同的功能、相同的快捷鍵和相同的結(jié)構(gòu)。 如果你懂得如何使用其中一個sketch導出svg圖標，往往就能上手另一個。而且figma的性能體驗更加流暢

06-哪些公司正在使用它？

國外團隊有、、、、等；

國內(nèi)團隊包括阿里巴巴、騰訊、字節(jié)跳動、網(wǎng)易等。

騰訊還開發(fā)了一個插件，可以將設計稿與TAPD需求訂單關聯(lián)起來。

支持設計稿在線導入和預覽，自動生成設計注釋，批量下載裁剪素材，靈活調(diào)用圖標庫和素材庫

07-價格比較

08-總結(jié)

事實上，完成一件事并不容易，就像在團隊內(nèi)部推廣設計工具一樣。 想做某事只有一個理由，而不想做某事有成千上萬個理由。 只要你想要，就一定可以做到。 快點！

首頁君個人微信

添加您的主頁到您的個人微信即可接收：各大廠商的設計規(guī)范和組件庫、無廣告的中文字體、原型、作品集等。

如有侵權(quán)請聯(lián)系刪除！