我們是一群執(zhí)著于設(shè)計的黑馬

@鐘色音 授權(quán)黑馬家族發(fā)布

----------------------------------------------

感謝您對黑馬家族的支持。 明天在公司推薦一篇關(guān)于如何提速Figma的文章。 希望能給您帶來更多的幫助！

還在為如何推進 Figma 而煩惱嗎？ 那就上去看看吧！

目錄

01-工作流程比較

02-具體問題分析

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

什么是菲格瑪？

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

基于瀏覽器的好處？

1.無需保存，實時保存

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

安全

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

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

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

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

#沒有卡住

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

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

#Figma 功能

很長一段時間以來，僅僅成為一名設(shè)計師是不夠的。

我們還需要像【藍湖】這樣的設(shè)計交付工具，幫助我們把本地文件變成開發(fā)可以理解的URL鏈接；

我們也需要一個這樣的版本管理工具來幫助我們更好的管理凌亂的設(shè)計文件；

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

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

＃ 更方便

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

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

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

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

5、任何人聽到的設(shè)計稿都是最新的。

#素材整理與分享

比如我們視覺的朋友需要整理素材，就會遇到問題：

1：Win無法打開文件；

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

3：材質(zhì)文件過大；

4：文件共享速度太慢。

# 更強大的組件

首先我們來對比一下兩者調(diào)用組件的形式。

拖放

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

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

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

#靈活的子組件

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

#手動布局

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

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

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

# 布局網(wǎng)格

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

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

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

#圖標組件庫

圖標庫導(dǎo)入png，或者導(dǎo)出ai，往往不保持安全距離，figma卻沒有出現(xiàn)。

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

#有趣的圖形

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

# 可視化窗口

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

#高保真交互原型

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

# 與后端協(xié)作

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

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

地址：。

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

外掛開放時間大約在2019年底，短時間內(nèi)，外掛衰落的速度非?？?。

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

它允許設(shè)計人員直接選擇兩個元素并自動繪制流程線，從而省去了繪制流程圖過程中標記箭頭的繁瑣工作。

漢化插件

菲格瑪

移動預(yù)覽插件

3D

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

04- 兩者的缺點

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

這兩個工具的功能幾乎相同，快捷方式相同，結(jié)構(gòu)相同。 如果您知道如何使用一個，您通?？梢粤⒓茨闷鹆硪粋€。 而且figma的表演體驗越來越流暢。

06-什么公司在用

美國隊有，，，，等；

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

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

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

07-價格比較

08-總結(jié)

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

參考：

閱讀體驗設(shè)計YUX：

溫柔的長頸鹿：

木七 木七：

感謝您的閱讀支持 歡迎留言互動

----------------------------------------------

免責聲明：本文內(nèi)容及言論僅代表作者意圖。

不代表任何黑馬家族的意見和意見

優(yōu)質(zhì)進階課程推薦

更多行動，更多想法

—

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