01-工作流程比較

02-具體問題分析

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

什么是菲格瑪？

Figma 是一個基于瀏覽器的協(xié)作式 UI 設(shè)計工具。 自推出以來，越來越受到 UI 設(shè)計師的青睞，許多設(shè)計團(tuán)隊紛紛擁抱 Figma。

基于瀏覽器的好處？

1.無需保存，實時保存

2、你只需要一臺筆記本電腦（win/Mac），無論身在何處，都可以打開你的設(shè)計圖紙，開始工作。

＃安全

1.figma也有桌面應(yīng)用，在線的figma文件也可以導(dǎo)入本地保存

2、Figma支持歷史版本還原。

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

4、獲得紅杉資本領(lǐng)投的4000萬港元C輪融資

#沒有卡住

在處理大文件的時候，經(jīng)常會出現(xiàn)卡頓，或者直接藍(lán)屏的情況。 在最壞的情況下，文件不會保存，需要重新繪制設(shè)計。

但是figma不一樣。 不僅加載初始網(wǎng)頁和一些圖片需要一些時間，而且Figma在處理速度上真的可以說是碾壓。

#Figma 功能

太久了，這還不足以讓設(shè)計師

我們還需要像【藍(lán)湖】這樣的設(shè)計交付工具，幫助我們把本地文件變成開發(fā)可以理解的URL鏈接； 我們也需要這樣的版本管理工具來幫助我們更好地管理凌亂的設(shè)計文檔；

就連Drive和Drive這樣的網(wǎng)盤也需要存儲和同步。 入庫后需要整理，耗能大。

但是有了 Figma，這一切就容易多了。 一個網(wǎng)址，一切盡在掌握。 沒有中間商做差價。

＃ 更方便

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

2、一個項目不需要拆分成幾個文件。 每個負(fù)責(zé)那個模塊的人只需要在對應(yīng)的頁面下設(shè)計即可

3.多人協(xié)作，只需要切換頁面即可。 如果想復(fù)用對方的頁面樣式，可以直接復(fù)制粘貼到自己的Page中。 這樣一來，大大降低了設(shè)計師內(nèi)部協(xié)作的溝通成本。

4.無論身在何處，只要有筆記本和網(wǎng)絡(luò)，都可以打開設(shè)計稿

5. 任何人聽到的設(shè)計稿永遠(yuǎn)是最新的

#素材整理與分享

比如我們視覺小伙伴需要整理素材，會遇到的問題

1：win打不開文件

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

3：過大的素材文件凍結(jié)

4：文件共享太慢

# 更強(qiáng)大的組件

一、比較兩種調(diào)用組件的形式

#拖動播放

所有元器件均可拖拽使用，配合元器件搜索功能sketch導(dǎo)出svg圖標(biāo)，更高效的完成設(shè)計工作

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

我們可以在任意頁面下創(chuàng)建組件，無需去單獨的頁面進(jìn)行編輯。在當(dāng)前頁面編輯組件可以實時預(yù)覽，以及界面的設(shè)計效果

#靈活的子組件

子組件變得更加靈活多變。 不僅位置不能改，顏色、邊框、圓角等css也可以改。 以最簡單的按鈕為例：

#手動布局

手動布局是指預(yù)先繪制規(guī)則，當(dāng)添加或減少子元素時，父元素規(guī)范根據(jù)規(guī)則手動改變，或者當(dāng)父元素的尺寸改變時，子元素遵循規(guī)則。

手動布局可以大大減少重復(fù)性工作（節(jié)省寬度估算和元素對齊調(diào)整時間），還可以框定我們的UI設(shè)計稿，幫助我們從開發(fā)的角度繪制界面，有利于提高界面還原度。

毫不夸張地說，設(shè)計師的日常工作只有20%用于創(chuàng)造性地解決問題，而80%的時間都花在了重復(fù)一些機(jī)械操作上，比如改色、改寬度、改排列、改名字、改改、改改、保存改改、改改改、保存改改，最后整理文件同步文件，這讓整個設(shè)計工作變得冗余、低效、枯燥。

# 布局網(wǎng)格

Figma 可以為框架和組件添加網(wǎng)格（網(wǎng)格、行、列）。 添加網(wǎng)格可以幫助我們快速對齊元素。 當(dāng)我們將元素與網(wǎng)格對齊并配合拉伸縮放時，框架中的元素會按照設(shè)定的規(guī)則隨著網(wǎng)格的變化而變化，這樣我們做起來就更方便了。 匹配。

#Split組件庫——（跨文件共享）

將一個龐大的包含屬性樣式、圖標(biāo)、基礎(chǔ)組件、業(yè)務(wù)組件等的組件庫文件，按類別劃分為若干個獨立的組件文件。 一方面，F(xiàn)igma 通過 Team 共享組件非常方便。 沒有任何額外負(fù)擔(dān)，更方便后續(xù)擴(kuò)展。 另一方面，分類后的元器件庫各司其職更加清晰。

#圖標(biāo)組件庫

如果圖標(biāo)庫導(dǎo)入png，或者ai導(dǎo)出，往往會有安全距離，但是figma不會出現(xiàn)

在ai中繪制圖標(biāo)，批量推送到figma中，配合批量創(chuàng)建組件的功能，可以快速搭建一個圖標(biāo)組件庫。 在后期的開發(fā)過程中，可以開發(fā)直接導(dǎo)入圖標(biāo)的svg格式，不需要做一個空規(guī)范的圖標(biāo)。

#有趣的圖形

附帶 Arc 工具來制作一些很酷的其他圖形

# 可視化窗口

項目分類清晰，按分類快速查找文件。 有沒有一種打開藍(lán)湖后可以編輯的既視感？

#高保真交互原型

Figma可以制作高保真交互原型，無縫完成從設(shè)計到原型呈現(xiàn)的切換。 比死板的頁面跳轉(zhuǎn)更友好，適合demo展示。 Figma可以在手機(jī)端預(yù)覽治療效果。 支持導(dǎo)出gif文件，讓演示更靈活。

# 與后端協(xié)作

每個 Figma 文件都有一個代碼模式，工程師可以在其中查看設(shè)計文件。 工程師可以在設(shè)計圖上進(jìn)行標(biāo)注，自行導(dǎo)入所需資源（包括CSS、iOS、樣式）

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

地址：。

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

外掛開啟時間大概是2019年底，短時間內(nèi)，外掛衰落速度非?？?/p>

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

允許設(shè)計者直接選擇兩個元素，然后自動繪制流程線sketch導(dǎo)出svg圖標(biāo)，省去了繪制流程圖過程中標(biāo)記箭頭的繁瑣工作

漢化插件

菲格瑪

移動預(yù)覽插件

3D

3D可以在Figma中插入3D元素。 更有趣的是，你可以將你的設(shè)計稿放入預(yù)設(shè)的交互式3D中，然后將圖片導(dǎo)入到Figma中。 從此，您再也不用為找不到合適的包裝設(shè)計稿而發(fā)愁了。 衣食無憂。

04- 兩者的缺點

05-團(tuán)隊學(xué)習(xí)成本

這兩個工具的功能幾乎相同，快捷方式相同，結(jié)構(gòu)相同。 如果你知道如何使用一個，你通常可以直接拿起另一個。而且 figma 性能體驗越來越流暢

06-什么公司在用

美國隊有，，，，等；

國外團(tuán)隊包括阿里、騰訊、字節(jié)跳動、網(wǎng)易等。

騰訊還開發(fā)了一款插件，可以將設(shè)計稿關(guān)聯(lián)到TAPD需求單。

設(shè)計稿在線導(dǎo)出預(yù)覽，設(shè)計標(biāo)記自動生成，裁剪素材批量下載，圖標(biāo)庫和素材庫靈活使用

07-價格比較

08-總結(jié)

雖然實現(xiàn)一件事真的很不容易，但在團(tuán)隊內(nèi)部推動設(shè)計工具是一樣的。 想做一件事的理由只有一個，不想做一件事的理由卻有千萬種。 只要想好了，就一定會成功。 快點！

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