使用Figma是一個(gè)月左右，這個(gè)文章收錄的插件都是我作為一個(gè)枚設(shè)計(jì)師撬即，確實(shí)覺得有點(diǎn)用的立磁。這些技巧都是我學(xué)習(xí) Figma 后總結(jié)的經(jīng)驗(yàn)，均為原創(chuàng)剥槐。

最吸引我的地方是跨平臺(tái)唱歧、免費(fèi)，最讓我誅心的地方是網(wǎng)速不穩(wěn)定粒竖。這段時(shí)間可以看見 Sketch 和 Figma 相互借鑒（chaoxi）颅崩。Figma 上周公布的插件使其離 Iron Throne 更近了一步。

了解一下這7個(gè) Figma 插件蕊苗，事半功倍

1. Content Reel - Figma 內(nèi)容填充插件

Content Reel 可快速將文本,頭像和圖標(biāo)拖入你的設(shè)計(jì)中沿后。

2. Figmotion - Figma 動(dòng)效義肢

在過去，制作動(dòng)效原型的工作流需要兩個(gè)及以上的的工具協(xié)作：繪制原型朽砰，導(dǎo)入 Principle / Flinto / AE 中制作動(dòng)效尖滚，最后編寫動(dòng)效設(shè)計(jì)說明或是使用 bodymovin 交付。?在 Figma 平臺(tái)里瞧柔，F(xiàn)igmotion 插件可以完成一站式的動(dòng)效設(shè)計(jì)漆弄，輸出格式包括：Figma 內(nèi)部預(yù)覽、渲染為 gif/mp4/webM 格式造锅、導(dǎo)出 CSS/JSON 代碼格式撼唾。目前開發(fā)版本為0.1.14，不支持編組备绽。

3. Unsplash - 攝影作品填充插件

將 Unspash 中美麗的攝影作品插入你的設(shè)計(jì)稿中券坞。你可以插入隨機(jī)照片或者搜索特定的內(nèi)容。Unsplash 擁有攝影作品作者的許可肺素，你可以免費(fèi)在個(gè)人或商業(yè)項(xiàng)目中使用恨锚。

4. Mapsicle - 地圖制作插件

如果你的作品要用到地圖，請(qǐng)不要再去百度/谷歌地圖截屏了倍靡。使用 Mapsicle猴伶，你可以快速順暢的在演示稿中放置地圖。友好的用戶界面讓你可以輕松制作出完美的地圖塌西。

5. Image Palette - 圖像取色插件

色搭是設(shè)計(jì)中的一個(gè)重要命題他挎，如果發(fā)現(xiàn)一張照片的配色和自己項(xiàng)目格調(diào)相似。那么從照片里直接取出關(guān)鍵色捡需，可能會(huì)是一個(gè)取巧的色搭方法办桨。Image Palette 可以幫助設(shè)計(jì)師從圖像中提取五個(gè)關(guān)鍵色，形成一個(gè)迷你色盤站辉。

6. Iconify - 圖標(biāo)庫插件

還愁找不到合適的圖標(biāo)么呢撞？還在為精品圖表庫付費(fèi)么？Iconify 提供海量免費(fèi)精致圖標(biāo)饰剥，直接導(dǎo)入 Figma 使用殊霞。Iconify 的用戶界面非常友好，所有功能所見即所得汰蓉。支持直接搜索绷蹲，并可以對(duì)圖標(biāo)進(jìn)行翻轉(zhuǎn)、角度和顏色的定制顾孽。

7. Autoflow - 流程繪制插件

Autoflow 簡化了在 Figma 中繪制流程線的過程祝钢。選擇兩個(gè)設(shè)計(jì)元素，按下快捷鍵若厚，元素之間便會(huì)生成簡約美觀的連接線太颤。

8個(gè)Figma技巧：

1. 用 Arc 功能為橢圓圖層易形

Figma 雖然界面簡單，看上去很簡潔盹沈。但在實(shí)際使用的時(shí)不時(shí)出現(xiàn)一些讓人眼前一亮的小功能龄章。這些功能只會(huì)在你繪制圖形的時(shí)候出現(xiàn)，不會(huì)聚在工具欄乞封、檢視窗等界面上做裙。比如說 Smart Selection。今天介紹的功能 Arc 就只能在橢圓圖層上使用肃晚。

2. 用 Constraints 功能制作自適應(yīng)導(dǎo)航欄

Constraints 功能讓用戶可以通過對(duì)圖層 x 軸锚贱、y 軸布局方式的調(diào)整，實(shí)現(xiàn)圖層按照一定的策略進(jìn)行縮放关串，保障不同圖層在頁面不同位置的布局方式拧廊。Constraints 告訴 Figma 設(shè)計(jì)稿中的元素在用戶拉伸他們的框架時(shí)應(yīng)該如何響應(yīng)监徘，這讓你輕松掌控設(shè)計(jì)稿在不同的屏幕尺寸以及設(shè)備上的效果。你可以為框架里的任何元素應(yīng)用 Constraints吧碾。

3. 用 Component 功能制作可改分評(píng)分控件

Components 是指那些在整個(gè)項(xiàng)目中會(huì)被反復(fù)使用到的 UI 元素凰盔，可以是按鈕、圖標(biāo)倦春、模態(tài)或者形形色色的圖層組合户敬。通過對(duì)這些 Components 的復(fù)用可以保持整個(gè)設(shè)計(jì)稿的一致性。Components 算一個(gè)可玩性比較高的 Figma 功能睁本，了解下面四條規(guī)則可以幫我們快速上手：

1尿庐、母版 Component 中所包含的圖層定義了這個(gè) Component 的所有屬性；

2呢堰、實(shí)例是你可以在設(shè)計(jì)稿中復(fù)用的 Component抄瑟；

3、你對(duì)母版做出的任何改變都會(huì)立刻應(yīng)用在實(shí)例上枉疼；

4锐借、實(shí)例中的一些屬性可以復(fù)寫，這些變化不會(huì)影響母版往衷。

4. 使用 Smart Selection 玩轉(zhuǎn)圖層網(wǎng)格

Smart Selection钞翔，用于高效操作設(shè)計(jì)稿中的圖層網(wǎng)格。Sketch 在 55 版本中也偷偷放上了半個(gè)這個(gè)功能席舍，離 Smart Selection 還是有一些差距布轿，不過我猜很多同學(xué)并沒有發(fā)現(xiàn)這個(gè)小秘密。

5. 在 Figma 中調(diào)用本地字體

Figma 在云端来颤，而設(shè)計(jì)師自己私藏的花里胡哨的字體庫在本地汰扭。那么讓我們來解決這個(gè)小小小問題。

6. 用圖層插入功能劃分頁面布局

在 Figma 的設(shè)計(jì)工作臺(tái)中福铅，工具欄里有很多圖層插入功能萝毛，這些功能既基礎(chǔ)又核心。讓我們掌聲請(qǐng)出今天的主角 - 微信小程序「豆瓣評(píng)分」滑黔，一起通過對(duì)其首頁的布局劃分笆包，來上手這些圖層插入功能。

7. 創(chuàng)建你的第一個(gè) Figma 設(shè)計(jì)稿

最近在知乎看到不少關(guān)于 Figma 的安利貼略荡，又重新勾起了我的好奇心庵佣。干脆這次系統(tǒng)的學(xué)習(xí)一遍，順便記錄學(xué)習(xí)過程汛兜，產(chǎn)出一套接地氣巴粪，手把手的教程。需要注意的是，由于 Figma 是墻外好物肛根，你的使用水平下限取決于網(wǎng)速和英文水平辫塌，一定要心平氣和。

8. 熟悉 Figma 的設(shè)計(jì)工作臺(tái)

正式畫稿之前我們需要熟悉一下 Figma 的設(shè)計(jì)工作臺(tái)派哲。萬幸的是臼氨，以 Sketch 為代表的新 UI 設(shè)計(jì)工具，工作臺(tái)的布局都差不多狮辽。我們以總分的形式拆解 Figma 的設(shè)計(jì)工作臺(tái)。先來一張動(dòng)圖遍歷一下工作臺(tái)的大多數(shù)功能巢寡。

?喜歡這些Figma技巧和插件嗎喉脖？無論是WIN用戶還是 MAC Sketch 用戶都可以隨時(shí)入坑哦。