01-工作流程比較

02-具體問題分析

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

什么是菲格瑪？

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

基于瀏覽器的好處？

1.無(wú)需保存，實(shí)時(shí)保存

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

＃安全

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

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

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

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

#沒有卡住

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

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

#Figma 功能

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

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

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

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

＃ 更方便

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

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

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

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

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

#素材整理與分享

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

1：win打不開文件

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

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

4：文件共享太慢

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

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

#拖動(dòng)播放

所有元器件均可拖拽使用，配合元器件搜索功能，更高效的完成設(shè)計(jì)工作

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

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

#靈活的子組件

子組件變得更加靈活多變。 不僅位置不能改ai圖標(biāo)導(dǎo)入sketch，顏色、邊框、圓角等css也可以改。 以最簡(jiǎn)單的按鈕為例：

#手動(dòng)布局

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

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

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

# 布局網(wǎng)格

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

#Split組件庫(kù)——（跨文件共享）

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

#圖標(biāo)組件庫(kù)

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

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

#有趣的圖形

附帶 Arc 工具來(lái)制作一些很酷的其他圖形

# 可視化窗口

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

#高保真交互原型

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

# 與后端協(xié)作

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

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

地址：。

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

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

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

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

漢化插件

菲格瑪

移動(dòng)預(yù)覽插件

3D

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

04- 兩者的缺點(diǎn)

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

這兩個(gè)工具的功能幾乎相同，快捷方式相同，結(jié)構(gòu)相同。 如果你知道如何使用一個(gè)，你通?？梢灾苯幽闷鹆硪粋€(gè)。而且 figma 性能體驗(yàn)越來(lái)越流暢

06-什么公司在用

美國(guó)隊(duì)有，，，，等；

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

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

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

07-價(jià)格比較

08-總結(jié)

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

首頁(yè)君個(gè)人陌陌

在首頁(yè)添加你的個(gè)人陌陌分布：大廠設(shè)計(jì)規(guī)范和組件庫(kù)、商務(wù)免費(fèi)英文字體、原型、作品集等。

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