Figma 自 2016 年以多人實(shí)時(shí)在線(xiàn)協(xié)作的界面設(shè)計(jì)軟件出現(xiàn)，很多人在使用過(guò)后認(rèn)為 Figma 是來(lái)自未來(lái)的界面設(shè)計(jì)軟件。由于 2020 年疫情原因，越來(lái)越多人在家隔離辦公。Figma 也適逢機(jī)會(huì)一舉超越了 Sketch 的地位，在 UI 設(shè)計(jì)、原型設(shè)計(jì)、頭腦風(fēng)暴、用戶(hù)流程、設(shè)計(jì)系統(tǒng)、設(shè)計(jì)交付、版本管理等名列前茅，成為當(dāng)下最流行的多平臺(tái) UI 線(xiàn)上協(xié)同設(shè)計(jì)軟件。
在我研究使用了一番 Figma 后表示真香，藉此開(kāi)發(fā)了一門(mén)免費(fèi)分享課——《Figma一站式設(shè)計(jì)交付》，課程主要從4個(gè)章節(jié)簡(jiǎn)要地講解Figma的一站式設(shè)計(jì)交付：
- Figma 的介紹、理論
- Figma 的設(shè)計(jì)系統(tǒng)、原型交互、審查元素
- Figma 的營(yíng)地使用技巧
- Figma 社區(qū)（用戶(hù)、文件、插件）
希望大家能從中深刻了解 Figma，在日常設(shè)計(jì)中進(jìn)一步提升設(shè)計(jì)效率，優(yōu)化設(shè)計(jì)流程。
前期的下載安裝，注冊(cè)賬號(hào)流程都相對(duì)簡(jiǎn)單，沒(méi)有難度的就先跳過(guò)了。至于有同學(xué)終究會(huì)問(wèn)有沒(méi)有中文版，當(dāng)然也有漢化插件，還是建議能用英文版的就英文版，來(lái)去就那些固定的英語(yǔ)單詞。不廢話(huà)了，快來(lái)一起進(jìn)入 Figma 的世界吧。
根據(jù) UXTools 用戶(hù)體驗(yàn)工具調(diào)查報(bào)告顯示，F(xiàn)igma 在國(guó)外有逐漸攀升的趨勢(shì)。Figma 的用戶(hù)量已經(jīng)反超了 Sketch，一舉在 UI Design / Protoping / User Flow / Hand Off / Design System / Versioning 拿下排名第一 ， 在 WhiteBoard 中 FigJam 排名第二。
回看國(guó)內(nèi)同類(lèi)型產(chǎn)品的情況，已經(jīng)有多家廠商開(kāi)發(fā)了對(duì)標(biāo) Figma 的工具，如藍(lán)湖 MasterGo（已完成 C 輪融資）、即時(shí)設(shè)計(jì)（優(yōu)化做得比較好）、Pixso 等。
另一側(cè)是 Figma 交付類(lèi)的插件工具，騰訊也推出了 CoDesign 設(shè)計(jì)協(xié)作平臺(tái)，覆蓋了產(chǎn)品經(jīng)理、設(shè)計(jì)師、工程師協(xié)作需求，助力團(tuán)隊(duì)提升協(xié)作效率、有效管理和使用設(shè)計(jì)資產(chǎn)，幫助大家更好的去完成設(shè)計(jì)交付。和 CoDesign 類(lèi)似的產(chǎn)品還有 Moonvy、Heron、Mockplus。
Figma 于 2016 年發(fā)布首個(gè)版本，19 年推出品牌宣傳視頻，而 2020 年的疫情讓這類(lèi)云協(xié)作的產(chǎn)品迅速崛起，接下來(lái)先看一下 Figma 官方是怎么去宣傳的：
通過(guò)視頻我們大概能了解到一些：避免文件傳回傳、團(tuán)隊(duì)多人協(xié)作、云設(shè)計(jì)協(xié)作交互視覺(jué)、直接交付給開(kāi)發(fā)、及時(shí)的評(píng)論反饋。
總的來(lái)說(shuō) Figma 實(shí)在是有太多優(yōu)點(diǎn)了：多終端多人實(shí)時(shí)協(xié)作、從 Sketch 過(guò)渡無(wú)縫 UI 設(shè)計(jì)不卡頓、獨(dú)特的矢量網(wǎng)格、類(lèi) CssBox 盒子的 AutoLayout、原型交互、設(shè)計(jì)系統(tǒng)組件庫(kù)靈活高效、版本歷史管理、實(shí)時(shí)討論、實(shí)時(shí)分享、無(wú)需擔(dān)心插件版本，F(xiàn)igma 涵蓋了如此多功能，是一個(gè)設(shè)計(jì)+社區(qū)的綜合體。（社區(qū)后面介紹）
設(shè)計(jì)效率這件事很難用具象的數(shù)據(jù)來(lái)傳達(dá)，只有你親身體驗(yàn)一番才叫真香。為了更好的描述 Figma 在整個(gè)過(guò)程中怎么提升設(shè)計(jì)效率，在此簡(jiǎn)單的舉幾個(gè)例子：
1. 對(duì)設(shè)計(jì)流程的提效統(tǒng)一
在使用 Figma 之前：產(chǎn)品策劃團(tuán)隊(duì)一般用 Tapd、在線(xiàn)文檔、原型圖等描述需求，交互用 XD、Sketch 等梳理設(shè)計(jì)交互圖，視覺(jué)同學(xué)用 PS、Sketch 等完成設(shè)計(jì)，最終以又以效果圖、Codesign 等交付給產(chǎn)品策劃審閱定稿，最終 Codesign 等交付工具交付開(kāi)發(fā)。
在使用 Figma 之后：情況就可以完全不同了，從交互設(shè)計(jì)到視覺(jué)設(shè)計(jì)，最后到策劃審核和設(shè)計(jì)交付都可以在 Figma 上一站式完成，多人實(shí)時(shí)協(xié)作發(fā)揮了巨大的作用，更加敏捷了。
很多團(tuán)隊(duì)可能交互用一個(gè)工具，視覺(jué)用一個(gè)工具，各司其事不礙事。又如組件和設(shè)計(jì)規(guī)范等可能覺(jué)得組件是統(tǒng)一依賴(lài)視覺(jué)同學(xué)就好，交互稿不需要符合規(guī)范，所以交互同學(xué)不用組件，組件、規(guī)范的概念對(duì)交互不是重點(diǎn)。但其實(shí)可以相互作用，到后期交互可以直接套用視覺(jué)組件直接搭建頁(yè)面，效率也是有所提升。
2. 交互動(dòng)效 Demo 的高效
在使用 Figma 之前，可能會(huì)由 Photoshop 轉(zhuǎn)向 After Effect、XD 等軟件制作動(dòng)效，如果是 Sketch 流則會(huì)有更多的選擇可以導(dǎo)入 Principle、Flinto、Protopie、Framer 等工具，Protopie 和 Framer 在動(dòng)效設(shè)計(jì)上都是一個(gè)不錯(cuò)的選擇。
在使用 Figma 后，可以在做完視覺(jué)后直接做高保真的交互 Demo，一定程度上避免了不同軟件的學(xué)習(xí)成本，提升了圖層元素、效果、源文件等轉(zhuǎn)換效率。此外，F(xiàn)igma 的組件變體還支持做交互狀態(tài)的變化，大大地提升了做交互 Demo 的效率。
例如，給父組件 Close 添加一個(gè)點(diǎn)擊事件響應(yīng)關(guān)閉浮層的操作，無(wú)論你是居中的彈窗，還是底部畫(huà)出的，乃至是右側(cè)畫(huà)出的，只要在界面的浮層中使用到 Close 的組件都可以響應(yīng)關(guān)閉浮層的交互動(dòng)效。
3. 更高效自由的組件修改
例如需要構(gòu)建 3 個(gè)不同的按鈕組件：
Photoshop 沒(méi)有組件的概念，只好分開(kāi)創(chuàng)建 3 個(gè)按鈕（3 種顏色、3 個(gè)文本、3 個(gè)形狀）并且三個(gè)按鈕之間 文字、顏色無(wú)規(guī)范關(guān)聯(lián)，圓角獨(dú)立設(shè)置，寬高非自適應(yīng)。
Sketch 雖然有組件的概念，但是還是逃不過(guò)創(chuàng)建 3 個(gè)按鈕組件（3 種顏色、3 個(gè)文本、3 個(gè)形狀）并且要在 v69 版本后的文字和顏色才可以獨(dú)立設(shè)置，三個(gè)按鈕組件的圓角在設(shè)定后子組件不可獨(dú)立修改，配合 SmartLayout 的能做單向的自適應(yīng)拉伸，3 個(gè)組件為獨(dú)立不關(guān)聯(lián)的組件，互不影響。
Figma 得益于原子化的樣式，只需要建立 2 種文本樣式，3 個(gè)顏色、0 個(gè)形狀，通過(guò)建立 1 個(gè)基礎(chǔ)組件就可以把三個(gè)按鈕關(guān)聯(lián)歸一。其中文字和背景邊框等樣式可以獨(dú)立設(shè)置，按鈕的形狀可以直接交給圓角獨(dú)立設(shè)置，配合 AutoLayout 可以做到完美寬高自適應(yīng)。
當(dāng)然這里例子難免有的同學(xué)會(huì)覺(jué)得有點(diǎn)極端了，真正創(chuàng)建按鈕的組件還是應(yīng)該創(chuàng)建成 3 個(gè)獨(dú)立的組件。只是能從這個(gè)極端例子中看見(jiàn) Figma 的強(qiáng)大的高效自由組合。
建立一個(gè)基礎(chǔ)組件：圖標(biāo)+文本+背景。在子組件中，可以自由的設(shè)定字體字號(hào)、填充顏色、邊框顏色、效果樣式、圓角樣式等，可根據(jù)需要決策顯示或隱藏圖標(biāo)。
通過(guò)一個(gè)基礎(chǔ)組件控制不同的實(shí)例，不同的實(shí)例又保持高度自由的子特征屬性。
4. AutoLayout 的高效
列表設(shè)計(jì)是 UI 界面常見(jiàn)的一種，常常在調(diào)整的時(shí)候會(huì)牽連很多調(diào)整操作。例如：
- 刪除第一個(gè)列表項(xiàng)中的圖片，文字要自動(dòng)左對(duì)齊；
- 刪除第二個(gè)列表項(xiàng)中 3 行文本，文字需要實(shí)現(xiàn)基于圖片居中對(duì)齊；
- 刪除第四個(gè)列表項(xiàng)，并把第五個(gè)列表項(xiàng)提前至第三個(gè)列表項(xiàng)。
Photoshop：沒(méi)有組件的概念，所以只能傻傻的干了。首先刪除圖片，左移文本，刪除 2 的文本，調(diào)整居中，刪除第 4，調(diào)整第 5 到第 3，調(diào)整第 3 到下面。主體操作就有 7 步之多。
Sketch：分別創(chuàng)建圖文 3 行、圖文 2 行、純文組件，框選 345，調(diào)整位置，調(diào)整第四，整體也有 6 步左右 3 個(gè)組件。
Figma：配合 AutoLayout 只需要?jiǎng)?chuàng)建 1 個(gè)組件，然后對(duì)子組件進(jìn)行刪除圖片，刪除文本，調(diào)整順序即可，主體操作大概只有 4 步 1 組件。有了 AutoLayout 的加持，組件可以自由地刪除（隱藏）元素，而后會(huì)有自動(dòng)布局的效果（自動(dòng)跟隨、對(duì)齊）。
Figma 在設(shè)計(jì)上是基于前端的布局實(shí)際理念，配合 AutoLayout 使得頁(yè)面元素的堆疊排列更為自動(dòng)化，可以在組件內(nèi)外自由刪減隱藏元素并且自動(dòng)調(diào)整布局。
5. Figma 更透徹的原子設(shè)計(jì)
在化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬(wàn)物。2013 年前端工程師 Brad Forst 提出的原子設(shè)計(jì)方法論作為指導(dǎo)。
方法的本質(zhì)其實(shí)就是將頁(yè)面拆解為最小元素（原子），然后原子可以演變成分子，分子通過(guò)多維度的組合形式成為組織，再到模板，最終生成頁(yè)面。
原子（Atoms）：在界面中以「元素」的形式存在，例如文字、顏色、圖標(biāo)、效果樣式等；
分子（Molecules）：原子、分子排列組合構(gòu)成了組織，在界面中多以「組件」的形式存在，例如按鈕、導(dǎo)航、標(biāo)簽、彈窗；
組織（Organisms）：原子、分子、組織排列組合構(gòu)成了模板，在界面中多以「模塊」的形式存在，例如：列表組、卡片組、入口組等；
模板（Templates）：原子、分子、組織排列組合構(gòu)成了模板，在界面中也稱(chēng)為「原型圖」，例如資訊原型，列表原型，詳情原型等；
頁(yè)面（Pages）：將實(shí)際內(nèi)容（圖片、文章等）放置在特定模板內(nèi)，就成了高保真視覺(jué)稿。
Figma 和 Sketch 在踐行原子設(shè)計(jì)理論上做對(duì)比：
文本樣式
Figma 無(wú)需考慮文本對(duì)齊和顏色的組合，此外行高支持百分比設(shè)定
Sketch 則需要枚舉對(duì)齊、顏色各異的情況，過(guò)于冗余
填充和邊框樣式
Figma 可以在文本、填充、邊框中自由調(diào)用顏色樣式
Sketch 則需要在 v69 支持 Color Variables 后才能通過(guò)顏色變量統(tǒng)一管理
效果樣式
Figma 可以創(chuàng)建圖層樣式進(jìn)行復(fù)用統(tǒng)一管理
而 Sketch 沒(méi)有樣式統(tǒng)一管理的概念，只能靠復(fù)制、粘貼樣式
尺寸圓角
Figma 可以獨(dú)立的設(shè)置組件的圓角，通過(guò)自動(dòng)布局的強(qiáng)大功能可以做自適應(yīng)、兼容性高的組件
Sketch 中組件只能?chē)?yán)格遵守父組件的設(shè)定，并且只有組件才能使用 SmartLayout 屬性，對(duì)常用的響應(yīng)式、兼容性上有一定的局限性
至此，可以看出 Figma 的高效，是因?yàn)楦笍貙?shí)踐原子設(shè)計(jì)體系，在一定程度上高效地自由組合，避免樣式、組件冗余。
6. 怎么轉(zhuǎn) Figma？
Figma 如此之多真香的點(diǎn)，那從現(xiàn)在的工具中怎么轉(zhuǎn)過(guò)去？想必大家都很想知道。
Photoshop：很遺憾 Figma 不能直接識(shí)別導(dǎo)入 PSD 格式，但是對(duì)于一些矢量路徑圖層還是可以右鍵復(fù)制 SVG 代碼，粘貼到 Figma 上的。
Photoshop 本身就很臃腫，做 APP UI 設(shè)計(jì)只是冰山一角，對(duì)整體的 APP 設(shè)計(jì)考慮來(lái)說(shuō)是很欠缺的，對(duì)組件、字體樣式、顏色樣式的維護(hù)起來(lái)比較累。但是對(duì)于非扁平類(lèi)的游戲 UI 設(shè)計(jì)來(lái)說(shuō)，它還是個(gè)主力軍。
XD：雖然 XD 的設(shè)計(jì)理念稍微比 Sketch 更接近 Figma，但是 Figma 也不支持直接導(dǎo)入 XD，常規(guī)渠道還是 XD 保存 SVG，再導(dǎo)入 Figma，但是轉(zhuǎn) SVG 是相當(dāng)大的折損，相當(dāng)于把文字轉(zhuǎn)曲，把組件關(guān)系斷開(kāi)，意義并不大。當(dāng)然也可以選擇使用 XDtoSketch 這種第三方付費(fèi)轉(zhuǎn)換，能夠很好地完整轉(zhuǎn)換。
Sketch：Figma 只支持導(dǎo)入 Sketch 文件，會(huì)自動(dòng)識(shí)別換換圖片、文字、矢量組件等，但是涉及到樣式、樣式關(guān)聯(lián)、組件關(guān)聯(lián)等會(huì)丟失，需要在導(dǎo)入后重新關(guān)聯(lián)，整理組件。導(dǎo)入后還需要做這些操作，主要是因?yàn)?Figma 的設(shè)計(jì)系統(tǒng)理念比 Sketch 先進(jìn)，所以有些組件、樣式的設(shè)計(jì)使用上，可以做一些減法優(yōu)化。
整體轉(zhuǎn)換到 Figma 的情況來(lái)說(shuō)可以是毫無(wú)捷徑了，怎么樣都得修一遍為妙。
對(duì)于已有的項(xiàng)目可以考慮重組組件庫(kù)設(shè)計(jì)邏輯，更好的為后續(xù)打下基礎(chǔ)。那對(duì)新的項(xiàng)目或者改版的情況，可以直接使用 Figma 進(jìn)行重建。
雖然前期的過(guò)程都比較累，但是后續(xù)使用起來(lái)絕對(duì)是真香。
由于大部分的設(shè)計(jì)工具都差不多，常用的文本、顏色、形狀的各種操作在此就不再贅述了。Figma 中的設(shè)計(jì)主要講設(shè)計(jì)系統(tǒng)。
1. 構(gòu)建柵格樣式
Figma 支持建立柵格樣式，現(xiàn)在你可以更愉快地在每個(gè)界面，每個(gè) Frame 里面自由地使用柵格樣式。完整的設(shè)計(jì)系統(tǒng)應(yīng)該包含柵格系統(tǒng)，可以自由組合水平、垂直、網(wǎng)格 3 種基本網(wǎng)格。
例如可以根據(jù)您兩端的尺寸分別創(chuàng)建 Android 和 iOS 的柵格系統(tǒng)，圖標(biāo)設(shè)計(jì)上可以建立 8x8，24x24，1024x1024，這是都是 Sketch 沒(méi)有考慮到的復(fù)用性。
2. 構(gòu)建文本樣式
Figma 的文本樣式，無(wú)需考慮對(duì)齊、顏色，這也就相對(duì)于 Sketch 節(jié)省了很多不必要的樣式，在選擇上也會(huì)變得更簡(jiǎn)潔高效。并且字距和行高可以支持百分比單位，設(shè)定更靈活。在組件的實(shí)例中，也能夠自由更換字體樣式，配合 AutoLayout 能夠做到組件的自適應(yīng)。
在構(gòu)建文本系統(tǒng)的時(shí)候，也可以借助如 Font Scale 插件按照 1.2、1.5、1.618 等規(guī)律生成和諧的字體規(guī)范；如 Batch Styler 可以批量修改字體、顏色規(guī)范。
3. 構(gòu)建顏色樣式
Figma 的顏色樣式，可以自由應(yīng)用在顏色、描邊、字色上，描邊屬性可以在實(shí)例上自由的設(shè)定粗細(xì)，類(lèi)型，線(xiàn)頭線(xiàn)尾樣式等。
但是圖層樣式 Effect 中的顏色還沒(méi)有納入樣式管理，可能是因?yàn)閱为?dú)有圖層樣式管理，所以沒(méi)有和顏色樣式關(guān)聯(lián)起來(lái)，但還是期待 Figma 能完善吧。
在構(gòu)建色彩系統(tǒng)的時(shí)候，我們常常需要使用一些規(guī)則方法去生成顏色樣式。在這里可以借助如 ColorKit 插件，可以生成一組自定義顏色的深淺色階。
構(gòu)建圖層效果樣式
Figma 可以創(chuàng)建內(nèi)陰影、投影、圖層模糊、背景模糊等效果樣式，能夠比 Sketch 更方便統(tǒng)一的管理圖層效果樣式。
注意：
Figma 可以渲染陰影類(lèi)型最多 8 個(gè)，內(nèi)投影最多 1 個(gè)，每個(gè)模糊類(lèi)型最多 1 個(gè)。但請(qǐng)記住，這些效果所使用的模糊可能導(dǎo)致性能不佳，背景模糊通常是最耗性能的圖層效果。圖層效果適用于圖層和組，使用組模糊和陰影可以提高性能。
在構(gòu)建圖層效果樣式的時(shí)候，可以借助如 Neumorphism 創(chuàng)建漂亮的新擬態(tài)投影、SmoothShadow 創(chuàng)建平滑的分層陰影、oblique 創(chuàng)建長(zhǎng)投影等。
4. 構(gòu)建圖標(biāo)系統(tǒng)
Figma 的圖標(biāo)繪制在獨(dú)有的矢量網(wǎng)格技術(shù)上，可以用一筆畫(huà)完整個(gè)路徑圖標(biāo)，可以在不同的方向直接分叉而不需要?jiǎng)?chuàng)建單獨(dú)的路徑對(duì)象。此外還可以使用橢圓工具創(chuàng)建形狀如餅圖、環(huán)狀圖等，極大地提高圖標(biāo)繪制的效率。
在構(gòu)建圖標(biāo)系統(tǒng)的時(shí)候，可以借助如 Iconify、Icon8 等插件，直接搜索關(guān)鍵詞，直接以 SVG 格式導(dǎo)入 Figma，當(dāng)然也可以從 iconfinder、iconfont 等網(wǎng)站復(fù)制 SVG 代碼，直接粘貼到 Figma。
Figma 中的幾個(gè)重要概念
具體的介紹就不一一贅述了，和 Sketch 最大的區(qū)別主要是 Autolayout，可以說(shuō)是 SmartLayout 的超級(jí)升級(jí)，無(wú)論文本、形狀、畫(huà)板等都可以添加 AL 達(dá)到堆疊的效果，自動(dòng)堆疊、調(diào)整內(nèi)邊距和內(nèi)間距，類(lèi)似 Css FlexBox（但目前 AL 沒(méi)有 Margin，但可以嵌套 AL 達(dá)到 Margin 效果）。
使用了 Autolayout 后，內(nèi)里的元素由 Constraints 變成 Resizing，可以使用 Fixed 固定、HugContents 適應(yīng)內(nèi)容、Fill Container 填充容器來(lái)自由控制約束布局，可以輕松創(chuàng)建響應(yīng)式、等分效果。
其次 Variants 變體可以把多個(gè)組件狀態(tài)歸集為一個(gè)組件，通過(guò)屬性創(chuàng)建不同的選擇開(kāi)關(guān)，能讓組件在不同狀態(tài)間自由切換。
AutoLayout
AutoLayout 是 Figma 類(lèi)似 CSS 中盒子模型的功能，可以應(yīng)用在 Frame 框架和 Component 組件上，可以自由分別設(shè)定四邊 Padding、嵌套 AL 為 Margin、描邊樣式、并對(duì)內(nèi)容產(chǎn)生如 FlexBox 的均分對(duì)齊。如果選擇不在框架內(nèi)的對(duì)象（Group、Text、Vector、Images 等），F(xiàn)igma 將在它們周?chē)鷦?chuàng)建一個(gè)自動(dòng)布局框架。
1.在創(chuàng)建進(jìn)度條組件的時(shí)候，一般創(chuàng)建了就不能控制進(jìn)度的長(zhǎng)度。其實(shí)可以通過(guò) AL 一個(gè) Frame 填充，在 Instance 實(shí)例中可以通過(guò)改變 AL 的內(nèi)邊距，從而實(shí)現(xiàn)填充的長(zhǎng)度（當(dāng)然也可以放一個(gè)透明的元素控制間距實(shí)現(xiàn)）。如果是有拖拽點(diǎn)，還可以配合 Frame 寬度為 0 的 Hack 方式，保持不裁剪內(nèi)容以顯示拖拽點(diǎn)，實(shí)現(xiàn)相對(duì)定位的效果。除了長(zhǎng)條進(jìn)度，常用的圓環(huán)進(jìn)度，可以直接通過(guò)上面提到的扇形工具，即便是組件后也能調(diào)節(jié)長(zhǎng)度、粗細(xì)（真是強(qiáng)大）。
2.在創(chuàng)建列表的時(shí)候，可以通過(guò)調(diào)整 AL 中的內(nèi)邊距，輕松實(shí)現(xiàn)縮進(jìn)效果。
3.在創(chuàng)建按鈕結(jié)構(gòu)時(shí)，一個(gè)文本添加 AL 就可完成自適應(yīng)按鈕（Sketch 要文字和背景分開(kāi) 2 層），也可以通過(guò) AL 輕松實(shí)現(xiàn)隱藏顯示圖標(biāo)，自適應(yīng)寬高達(dá)到自由組合的效果（希望下一代的 AutoLayout 即將支持相對(duì)、絕對(duì)定位）。當(dāng)然 Component Variants 出來(lái)之后，結(jié)構(gòu)的事情可以交給它來(lái)處理。
4.通過(guò)設(shè)定為 Spaces Between 可以實(shí)現(xiàn) AL 內(nèi)的元素均分排列，還可以通過(guò)減少父級(jí) Frame 的寬高 來(lái)實(shí)現(xiàn)重疊的效果。（希望下一代的 AutoLayout 即將支持負(fù)間距）
5.在表格制作中，通過(guò)建立行級(jí)、列級(jí) AL，極大的方便調(diào)整不同單元格的位置、排序。
以上交互表現(xiàn)是基于 Beta 的交互組件功能，目前已經(jīng)正式發(fā)布，無(wú)需申請(qǐng)?bào)w驗(yàn)。
Component Variants
Component Variants 可以說(shuō)是對(duì)不同的組件狀態(tài)進(jìn)行了一個(gè)很好的規(guī)整，而組件設(shè)計(jì)中的 Property 和 Value 可以和 Web 前端的組件的命名對(duì)應(yīng)起來(lái)，這樣在 Figma 的 Inspect 面板就可以直接提供復(fù)制，更好地打通前端交付。
注意：官方不建議使用變體來(lái)分組不同的圖標(biāo)。如果你有同一圖標(biāo)的不同尺寸、狀態(tài)，那么你可以將這些圖標(biāo)合并為變體。
例如常用的開(kāi)關(guān)，可以分成 iOS 和 Android 的兩個(gè)樣式，每個(gè)樣式里面有開(kāi)和關(guān)，又包含了默認(rèn)、按下、禁用三種狀態(tài)，將這 2x2x3=12 種狀態(tài)一一羅列就形成了一個(gè)開(kāi)關(guān)完整的 Component Variants。
AutoLayout + Component Variants
在做 APPUI 的時(shí)候經(jīng)常會(huì)遇到 Feeds 流設(shè)計(jì)。除了使用基礎(chǔ)的 AutoLayout 布局，還可以對(duì)不同的內(nèi)容區(qū)域如橫圖、豎圖、視頻、1~9 圖等進(jìn)行 Component Variants 的組合。這樣就可以即是一個(gè)自動(dòng)布局又能切換不同的內(nèi)容狀態(tài)，減少生成冗余的組件組合。
這個(gè)也類(lèi)似于 Slot 插槽的概念，中間部分可以切換不同的個(gè)數(shù)、布局。
Figma 的原型交互除了最最最基礎(chǔ)的水平和垂直滾動(dòng)，還可以由觸發(fā)器配合響應(yīng)的動(dòng)作，動(dòng)作可以調(diào)整使用不同的預(yù)設(shè)動(dòng)畫(huà)，動(dòng)畫(huà)可以具體設(shè)定緩動(dòng)曲線(xiàn)。
「組件集內(nèi)部交互」此外 Figma 加強(qiáng)了組件交互的功能，配合 Component Variant 可以設(shè)置組件集內(nèi)的交互，可以實(shí)現(xiàn)例如按鈕常態(tài)、按下、松開(kāi)等不同的交互狀態(tài)。
「子組件繼承交互」對(duì)母組件 Component 添加了交互行為的，Instance 同樣也會(huì)生效。比如對(duì)母組件的返回按鈕，添加了一個(gè) OnClick = Back，那只要是在界面中有引用到這個(gè)返回組件的界面，點(diǎn)擊返回的時(shí)候 ，都會(huì)自動(dòng)返回上一層界面。
「多條交互流」在此之前 一個(gè)頁(yè)面只能有一條交互流作為展示，增強(qiáng)之后可以在同一頁(yè)面下中添加不同的交互流，比如信息流程、支付流程。
接下來(lái)用一些比較有意思的案例講述一下：
Smart Animate：類(lèi)似 Keynote 的神奇移動(dòng)，兩個(gè) Frame 中，命名相同的圖層會(huì)生效，命名不同的則通過(guò)淡入淡出過(guò)渡。通過(guò) SmartAnimate 可以實(shí)現(xiàn)兩個(gè)關(guān)鍵幀之間的位移、旋轉(zhuǎn)、不透明、形狀變化、字號(hào)變化等的自動(dòng)補(bǔ)間動(dòng)畫(huà)。
Open Overlay：可以很方便地添加彈窗的動(dòng)效，提供不同的位置和手動(dòng)定位、是否啟用蒙層外點(diǎn)擊作為關(guān)閉、以及自動(dòng)產(chǎn)生的蒙層顏色，還可以通過(guò) Swap Overlay 切換不同的彈窗。
Scroll To：常見(jiàn)于網(wǎng)頁(yè)的錨點(diǎn)定位，可以在詳情頁(yè)點(diǎn)擊評(píng)論按鈕 自動(dòng)滑動(dòng)到評(píng)論區(qū)，可以點(diǎn)擊按鈕返回到內(nèi)容區(qū)頂部。
After Delay：常用于做一些自動(dòng)循環(huán)的動(dòng)畫(huà)效果，比如此次封面的彩虹條動(dòng)畫(huà)就是使用了 AfterDelay 來(lái)完成的。
基本上基礎(chǔ)的交互操作、動(dòng)效轉(zhuǎn)場(chǎng) Figma 都能輕松實(shí)現(xiàn)，但是還有一些進(jìn)階的變量邏輯判斷、重力感應(yīng)、時(shí)間軸動(dòng)畫(huà)等還是需要通過(guò)專(zhuān)業(yè)的工具去實(shí)現(xiàn)。
大家也盡可能評(píng)估好動(dòng)畫(huà)的制作成本，也不是非得使用 Figma 去硬尬制作不擅長(zhǎng)的動(dòng)效，F(xiàn)igma 同樣可以用 AEUX 導(dǎo)入到 Ae 去制作。
1. 案例-Smart Animate
類(lèi)似簡(jiǎn)化版 MD 卡片的懸停漣漪效果，通過(guò) Frame+Radius 設(shè)定好兩個(gè)關(guān)鍵幀，把淺藍(lán)色的 Frame 層 放大填充至整個(gè)卡片（卡片打開(kāi) ClipContent 內(nèi)容裁剪），在淺藍(lán)色同一層級(jí)復(fù)制一份作為白色圈圈，從小放大 代替原來(lái)的淺藍(lán)色圈圈。
另一個(gè)經(jīng)典案例是簡(jiǎn)化版 MD 的 Float Btn，通過(guò) Frame+Radius+ClipContent 設(shè)定好兩個(gè)關(guān)鍵幀，先設(shè)計(jì)展開(kāi)后的效果，再縮減成按鈕會(huì)好制作一些。主要是設(shè)定好 Frame 內(nèi)元素的約束，把內(nèi)容設(shè)為 Left Top，把圖標(biāo)設(shè)定為 Bottom Right。縮減成按鈕只需調(diào)整 Frame 的尺寸和調(diào)整內(nèi)容的透明度為 0。同理也可以去實(shí)現(xiàn)類(lèi)似 iOS AppStore 卡片點(diǎn)擊后的轉(zhuǎn)場(chǎng)。
2. 案例-Open Overlay
OpenOverlay 可以很方便地添加彈窗的動(dòng)效，提供不同的位置和手動(dòng)定位、是否啟用蒙層外點(diǎn)擊作為關(guān)閉、以及自動(dòng)產(chǎn)生的蒙層顏色，還可以通過(guò) Swap With overlay 切換不同的彈窗。
此外在真實(shí)的案例中，你可以給 X 母組件添加一個(gè) Close Overlay 的交互，這樣只要有彈窗層的地方都可以用 X 自動(dòng)關(guān)閉。這也是子組件繼承母組件交互的一種高效方式。
3. 案例-ScrollTo
簡(jiǎn)單實(shí)用的滑動(dòng)動(dòng)畫(huà)，可以制作快速返回頂部、或者滑動(dòng)到指定區(qū)域。在指定內(nèi)容區(qū)域 Frame 為 Horizontal / Vertical Scrolling 橫向或者豎向滑動(dòng)后，給按鈕新增一個(gè) ScrollTo 的動(dòng)作直接拖拽到剛才的內(nèi)容區(qū)域 Frame，保持 X、Y 的偏移量為 0 即可，如果你需要滑動(dòng)到內(nèi)容區(qū)的第二個(gè)區(qū)塊也可以，在此之上還能設(shè)定偏移量，避開(kāi)如頂部導(dǎo)航條的遮擋。
在一些橫滑的交互上，一般會(huì)對(duì)滑動(dòng)卡片做一層 AutoLayout，左對(duì)齊并給一個(gè) PaddingLeft（如綠色左邊的間距），那么在 ScrollTo 上需要設(shè)定偏移量避免貼邊顯示（如淡紅色塊的間距）
注意，在滑動(dòng)到最右時(shí)，即便 AutoLayout 設(shè)定了 PaddingRight，但 ScrollTo 并不會(huì)生效，需要添加一個(gè)額外的色塊，設(shè)置為 0 透明度代替右邊邊距。
4. 案例-After Delay
課后有很多同學(xué)都提及這個(gè)騷氣的小彩虹條怎么做，其實(shí)原理很簡(jiǎn)單想明白了就好。可以分兩步實(shí)現(xiàn)：
彩虹條的自循環(huán)動(dòng)畫(huà)：創(chuàng)建三個(gè)并列的彩虹條（Constraints 約束調(diào)整為 Scale 縮放，便于后續(xù)做拉伸變形），設(shè)定組件 Frame 只顯示一個(gè)的寬度，讓這三個(gè)彩虹條不斷地發(fā)生位移變化，并且讓位置變化得到一個(gè)循環(huán)。
在這個(gè)過(guò)程中，通過(guò) AfterDelay （1ms，即 1 毫秒無(wú)延遲），ChangeTo（Frame） 組件集內(nèi)的切換動(dòng)畫(huà)切換不同的關(guān)鍵幀，SmartAnimate（Liner，2000ms）通過(guò)智能動(dòng)畫(huà)自動(dòng)補(bǔ)間位移動(dòng)畫(huà)。
注意這里使用 Liner 勻速可以有無(wú)縫循環(huán)的感覺(jué)，如果使用其他緩動(dòng)曲線(xiàn)也行，但會(huì)有一些頓挫感。2000ms 這個(gè)可以自行調(diào)試設(shè)定。
變形拉伸或改變角度：得到自循環(huán)的動(dòng)畫(huà)后，其實(shí)已經(jīng)能夠隨意拉伸了。此時(shí)可以創(chuàng)建一個(gè)新的組件 Frame，拉伸填滿(mǎn)并調(diào)整填充，即可得到一個(gè)自適應(yīng)帶角度的彩虹條了。如果還需要添加圓角，直接在組件 Frame 層設(shè)置圓角并勾選 ClipContent 即可。
同樣，常用的 loading 也可以簡(jiǎn)單地通過(guò)旋轉(zhuǎn) 3 次 120 度實(shí)現(xiàn)。
以上都只是冰山一角，更多需要你切身地去操作和了解交互功能，才能更好的理解它們。
1. 分享鏈接和權(quán)限管理
當(dāng)我們?cè)?Figma 設(shè)計(jì)完后，就可以把 Figma 鏈接分享給上下游的同事，這時(shí)候我們首先需要謹(jǐn)慎的設(shè)置一下 Figma 文件的權(quán)限。Figma 可以從 Organization（公司組織）>Team（團(tuán)隊(duì)）>Project（項(xiàng)目）>File（文件）>Prototype（原型）都可以獨(dú)立設(shè)置權(quán)限邀請(qǐng)。
但是，任何一個(gè)編輯者都可以邀請(qǐng)另一個(gè)人作為編輯者或者調(diào)整另一個(gè)編輯者的權(quán)限，并且無(wú)需管理員同意。相當(dāng)于一個(gè)群聊管理員，能邀請(qǐng)另一個(gè)人作為管理員，而不需要經(jīng)過(guò)群主。（也許是因?yàn)?Figma 多人編輯的理念造成的？對(duì)于付費(fèi)團(tuán)隊(duì)按編輯者人數(shù)計(jì)算來(lái)說(shuō)，要謹(jǐn)慎注意）
權(quán)限的設(shè)置主要集中在團(tuán)隊(duì)，對(duì)于個(gè)人草稿 Drafts 和免費(fèi)團(tuán)隊(duì)的設(shè)置則只有更少選項(xiàng)（也就是付費(fèi)才有更安全的權(quán)限設(shè)置）。
Organization（公司組織）：獨(dú)享最全的管理安全權(quán)限，登錄管理、插件管理、字體管理、組件管理等。
Team（團(tuán)隊(duì)）：團(tuán)隊(duì)級(jí)別主要管理具體成員權(quán)限，如果處在公司級(jí)的團(tuán)隊(duì)，可以設(shè)置為需要邀請(qǐng)才可以加入團(tuán)隊(duì)，或者設(shè)為私密團(tuán)隊(duì)。
Project（項(xiàng)目）：對(duì)項(xiàng)目層級(jí)，如果想有某個(gè)項(xiàng)目作為保密項(xiàng)目，可以設(shè)置 Remove team access，這樣團(tuán)隊(duì)成員就無(wú)法訪問(wèn)這個(gè)項(xiàng)目了，只有受邀請(qǐng)的人（Only People Invited to this file）可以訪問(wèn)。
File（文件）：在文件層面，右下角有一個(gè)隱藏的功能 Alllow Viewers to Copy、Share、And export from this file，默認(rèn)是勾選啟用的。
關(guān)閉后可以避免設(shè)計(jì)文件被惡意復(fù)制、分享和導(dǎo)出，但是需要注意如果通過(guò) Figma 交付給開(kāi)發(fā)的話(huà)，開(kāi)發(fā)一般都是 Viewer 權(quán)限則不能導(dǎo)出切圖了。
Prototype（原型）：除了常規(guī)的 can view，還有一個(gè)更細(xì)致的 can view prototypes only，如果設(shè)置為 can view，是可以從原型交互直接 open in editor 變相打開(kāi)了對(duì)應(yīng)的文件，也就是 can view 相當(dāng)于是得到了文件的查看權(quán)，不僅僅是可訪問(wèn)原型。
注意：
如果你處于公司級(jí)下，默認(rèn)是開(kāi)啟 Anyone at Organization with the link 公司內(nèi)任何知道鏈接的人都能訪問(wèn)，這就導(dǎo)致同公司但不在團(tuán)隊(duì)內(nèi)的其他同事，是可以通過(guò)分享的鏈接，在不加入團(tuán)隊(duì)的情況下直接訪問(wèn)到這個(gè)文件。如果文件上需要保密性，建議設(shè)置為 Only People Invited to this file 只有邀請(qǐng)的人才能訪問(wèn)，這樣就可以限定為團(tuán)隊(duì)內(nèi)的成員+邀請(qǐng)的成員才能訪問(wèn)到。
由于組織版不限團(tuán)隊(duì)、項(xiàng)目、文件梳理，所以建議可以一個(gè)項(xiàng)目作為 Team，這樣一來(lái)要?jiǎng)?chuàng)建一個(gè)保密項(xiàng)目，就可以把 Team-Setting-Acess 設(shè)置為 Close（成員加入需要本團(tuán)隊(duì)管理員同意）或者 Secret（保密，組織團(tuán)隊(duì)列表無(wú)法搜索，需本團(tuán)隊(duì)管理員邀請(qǐng)加入）。針對(duì) Project 項(xiàng)目下的每個(gè)文件，打開(kāi) Team Access（團(tuán)隊(duì)成員可訪問(wèn)），文件設(shè)置為 Only People Invited to this file。
一般來(lái)說(shuō)說(shuō)使用付費(fèi)團(tuán)隊(duì)就已經(jīng)夠用了，但是由于付費(fèi)團(tuán)隊(duì)的每個(gè)成員都是可以使用個(gè)人賬號(hào)登錄，因?yàn)橐矔?huì)對(duì)管理帶來(lái)一定的困難，因此也建議統(tǒng)計(jì)好團(tuán)隊(duì)成員的賬號(hào)，及時(shí)警惕移除有問(wèn)題或臨時(shí)協(xié)作的用戶(hù)。在設(shè)置編輯權(quán)限的時(shí)候，做到最小化權(quán)限分配，及時(shí)回收權(quán)限，避免因權(quán)限問(wèn)題導(dǎo)致項(xiàng)目資源風(fēng)險(xiǎn)。
2. 審查元素
作為云協(xié)作的 Figma，自帶了標(biāo)注功能已經(jīng)蠻完善的了。能夠很直觀的對(duì)尺寸、圓角、文字、填充、邊框、效果、動(dòng)效等進(jìn)行標(biāo)注注釋?zhuān)?/p>
對(duì)組件的解析：能夠明確顯示組件的名字，和上層組件的名字，并且提供定位源。同時(shí)顯示組件的描述和文檔鏈接（如有的話(huà)），進(jìn)一步對(duì)組件的寬高、定位、圓角、混合模式、約束參考進(jìn)行解析。
對(duì)文本、顏色的解析：提供文本的復(fù)制、字體規(guī)范代號(hào)，字體、字重、字號(hào)、行高的解析，對(duì)顏色提供色號(hào)、不同的色彩模式、線(xiàn)框等（對(duì)自定義虛線(xiàn)沒(méi)有直接實(shí)現(xiàn)的值，但是也能以 SVG 形式解析對(duì)應(yīng)的 Join、Cap、Dash pattern）
對(duì)代碼解析：提供 CSS、iOS、Android xml 等解析，與同類(lèi)產(chǎn)品一樣僅作參考。
對(duì)動(dòng)效的解析：提供觸發(fā)器、目的地、動(dòng)畫(huà)、緩動(dòng)曲線(xiàn)、時(shí)長(zhǎng)等描述。
對(duì)切圖資源輸出：提供多倍率、多格式的導(dǎo)出。
基于 Figma 原生支持這么多的解析已經(jīng)足夠在開(kāi)發(fā)階段幫助開(kāi)發(fā)查看設(shè)計(jì)稿具體的標(biāo)注，而更多的期待可能是對(duì) DSL 的理解和解析。
如果能對(duì)字體預(yù)設(shè)和顏色預(yù)設(shè)等 DesignToken 提供一鍵導(dǎo)出到 plist/Xml 的形式（具體類(lèi)似 Zeplin 的 DSL），那對(duì)傳達(dá)整體的原子設(shè)計(jì)理念有更完善地執(zhí)行落地。
3. 編輯者和審查者的一個(gè)小差異
編輯者（你的視角）和查看者（開(kāi)發(fā)視角）的 Inspect 模式有略微區(qū)別，如一個(gè) icon 輸出尺寸 192x192，內(nèi)部路徑可能 120x120。編輯者點(diǎn)擊時(shí)是 192x192，查看者點(diǎn)擊時(shí)會(huì)直接穿透，點(diǎn)到 120x120 的路徑，導(dǎo)致開(kāi)發(fā)大小不一致。
解決方法：
- 在圖標(biāo)組件上面設(shè)置一層黑色 0.001%-Screen 混合模式（避免顏色顯示和導(dǎo)出有影響）
- 在圖標(biāo)組件上面設(shè)置一層白色 0.001%-Dark 混合模式（避免顏色顯示和導(dǎo)出有影響）
- 和開(kāi)發(fā)約定切圖都是整數(shù)，如遇穿透問(wèn)題，使用按 command+點(diǎn)擊 捕捉顯示 Frame 的大小。
總的來(lái)說(shuō)，懶得解釋就通過(guò)一層障眼法蒙在上面，也可以事先和開(kāi)發(fā)做約定培訓(xùn)。
4. 切圖輸出交付
雖然市面上的很多交付插件都可以一鍵導(dǎo)出切圖，但是往往實(shí)際開(kāi)發(fā)的時(shí)候，不同的開(kāi)發(fā)對(duì)同一個(gè)資源的命名方式不同，會(huì)導(dǎo)致重復(fù)引入不同名字但缺失相同的資源造成冗余，因此這塊還是建議自行 通過(guò) SVN、GIT 等進(jìn)行版本管控資源和命名。
比較高級(jí)的方法可以參照《高效協(xié)作 I 資源庫(kù)的協(xié)作方式》「1」、《使用 Figma + GitHub Actions 完成 SVG 圖標(biāo)的完全自動(dòng)化交付》「2」。
1. 和平營(yíng)地使用 Figma 前的問(wèn)題
規(guī)范不統(tǒng)一，效率低 → 建立視覺(jué)、開(kāi)發(fā)組件庫(kù)
視覺(jué)字號(hào)顏色規(guī)范、切圖不統(tǒng)一、開(kāi)發(fā)無(wú)組件化意識(shí)，協(xié)同設(shè)計(jì)效率偏低
設(shè)計(jì)資源缺乏管理 → 推動(dòng)開(kāi)發(fā)優(yōu)化資源冗余
多個(gè)設(shè)計(jì)開(kāi)發(fā)團(tuán)隊(duì)經(jīng)手，歷史遺留問(wèn)題滾雪球 平臺(tái)業(yè)務(wù)資源冗余
在使用 Figma 之后：情況就可以完全不同了，從交互設(shè)計(jì)到視覺(jué)設(shè)計(jì)，最后到策劃審核和設(shè)計(jì)交付都可以在 Figma 上一站式完成，多人實(shí)時(shí)協(xié)作發(fā)揮了巨大的作用，更加敏捷了。
2. 營(yíng)地的柵格樣式
在營(yíng)地中，定義以 4/8 作為基礎(chǔ)網(wǎng)格標(biāo)準(zhǔn)建立常用的柵格間距、尺寸。
在圖片比例上定義常用的 16 比 9、4 比 3、3 比 2、1 比 1 等在適配時(shí)保持等比縮放，以 CenterCrop 模式，避免適配時(shí)被拉伸壓扁。
3. 營(yíng)地的字體樣式
在營(yíng)地中，字體樣式主要有常規(guī)系統(tǒng)字體和品牌字體 Agency，因此分別使用了 T 和 A 作為代表，融入了 Regular、Medium、Bold 三種字重，以 R、M、B 分別代表；
以 10 號(hào)作為最小基礎(chǔ)，以 2/4/8 作為遞增規(guī)律產(chǎn)生常用的 10、12、14、16、18、20、24 等字號(hào)；統(tǒng)一以 150%作為基礎(chǔ)行高，個(gè)別 175%為寬行高；
字體樣式配以對(duì)應(yīng)的中文注釋?zhuān)罱K形成體系如 T12R、T12M、T12B 等見(jiàn)名知意的字體代號(hào)。在方便開(kāi)發(fā)使用代號(hào)的同時(shí)，加快設(shè)計(jì)的統(tǒng)一判斷選擇。
4. 營(yíng)地的顏色樣式
在營(yíng)地中，顏色樣式圍繞品牌色，參考行業(yè)同行對(duì)對(duì)比度可讀性的研究，進(jìn)行一系列的 色階處理。對(duì)常用的實(shí)色、漸變、半透明漸變（蒙版）以 8 位 ARGB 提供對(duì)應(yīng)色值。形成一套深淺對(duì)應(yīng)的中性色和彩色體系。
此外對(duì)常用的頭像、素材、圖案作為填充預(yù)設(shè)，方便組件變體調(diào)整切換，避免使用插件產(chǎn)生隨機(jī)的圖像填充。
5. 營(yíng)地的圖標(biāo)組件系統(tǒng)
在營(yíng)地中，此次改版對(duì)名字和資源的管理都格外重視，想要輕松剔除冗余的資源，就要有一套合理可持續(xù)的規(guī)則管控切圖資源，通過(guò)業(yè)務(wù)名_模塊_類(lèi)別_功能_狀態(tài)_尺寸.格式規(guī)范管理切圖。此外在組件的描述中加入適當(dāng)?shù)年P(guān)鍵詞，能夠有效提高搜索圖標(biāo)的準(zhǔn)確度。
6. 其他實(shí)用技巧
Selection Colors：
框選一個(gè)范圍或者一個(gè)畫(huà)板，會(huì)羅列檢查出畫(huà)板內(nèi)所有顏色，對(duì)批量替換為規(guī)范色頗有幫助。
ClipContent：
有時(shí)候想在一個(gè)畫(huà)板內(nèi)裁剪（隱藏）超出的部分（類(lèi)似蒙版，但局限于圓角局限），直接勾選 ClipContent 就可以啦！
寬度或者高度為 0：
設(shè)置寬度或者高度為 0.001，可以在自適應(yīng)的按鈕 AL 做出不占據(jù)寬高的，類(lèi)似相對(duì)/絕對(duì)定位的效果。
7. 效率之王——快捷鍵
QuickAction：
「Mac」Command? + / 或 +P
「Win」Control + / 或 + P
直接輸入就可以搜索調(diào)用菜單命令、插件等不同的快捷操作，十分方便高效。
TidyUp：
「Mac」Control^ + option?+T
「Win」Ctrl + Alt + T
一鍵快速整理圖層，另外還有各種對(duì)齊快捷鍵
「Mac」option?+ WASD 和 option? + V/H
「Win」Alt + WASD 和 Alt + V/H
Copy As PNG：
「Mac」Command? +Shift + C
「Win」Ctrl +Shift + C
一鍵快速導(dǎo)出某個(gè)畫(huà)板圖片到剪貼板，方便復(fù)制粘貼到聊天窗口。
8. 給需求加狀態(tài)描述，分享鏈接快速定位
如果你使用 Figma 一站式設(shè)計(jì)交付，那么通過(guò)自主設(shè)計(jì)一個(gè)自定義的組件，在 Figma 中劃分區(qū)域告知開(kāi)發(fā)哪些是進(jìn)行中 ，哪些是可以進(jìn)入開(kāi)發(fā)的，并且直接羅列對(duì)應(yīng)的組件，加強(qiáng)對(duì)組件的構(gòu)建意識(shí)。
此外 Figma 對(duì)每個(gè) Frame 都可以生成一個(gè)指向鏈接，那么右鍵這個(gè)框架就可以直接拿到鏈接，分享給產(chǎn)品開(kāi)發(fā)，十分方便。
Figma 的社區(qū)集合了文件、用戶(hù)、插件，在這里你可以找到很多優(yōu)秀的設(shè)計(jì)范例，優(yōu)秀的高玩用戶(hù)，通過(guò)高玩關(guān)注 去看他關(guān)注了誰(shuí)，站在巨人的肩膀上。
1. 用戶(hù)
Figma 官方是必不可少的，除此以外你可以搜索各類(lèi)大廠，關(guān)注他們的分享。
JoeyBanks：分享了很多 iOS 的組件，并且也會(huì)用最新的組件集方式重新整理一次。
Rogie：Figma 官方的成員，在 youtube 上也很活躍，分享很多不為人知的技巧。
在國(guó)內(nèi)，主要關(guān)注了草帽 SMao、Mr.Biscuit、RyanJyu，這些也是在 Figma at Tencent 的一次交流會(huì)上了解了更多。
草帽 SMao：可以上 Bilibili 搜到他的 Figma 教程，分享了很多工作中的實(shí)戰(zhàn)經(jīng)驗(yàn)技巧，我也是看他的視頻入門(mén)，非常贊。
Mr.Biscuit：人稱(chēng)小老虎，致力于讓 Figma 變得更好，開(kāi)發(fā)了很多插件，例如 Instance Utils 能夠在不分離組件的情況下 調(diào)整組件內(nèi)部結(jié)構(gòu)。例如 Outline to Single Stroke，把以填充形式線(xiàn)型的圖標(biāo)轉(zhuǎn)換以描邊形式的線(xiàn)型圖標(biāo)。
2. 文件
你可以在社區(qū)里搜索開(kāi)源共享的 Figma 設(shè)計(jì)源文件，從一些源文件中你能學(xué)習(xí)到別人使用 Figma 的一些技巧、規(guī)范，并且你也可以基于別人的文件做二次設(shè)計(jì)迭代。
3. 插件
Figma 的社區(qū)里少不了優(yōu)秀的插件，通過(guò)下載和點(diǎn)贊數(shù)量，能夠發(fā)現(xiàn)很多優(yōu)秀的插件。
Figma 的插件你生態(tài)非常豐富，再此也推薦一些用過(guò)的，特別喜愛(ài)的插件我標(biāo)了個(gè)心：
太多的插件介紹就不一一贅述了，也可以到一些插件網(wǎng)站了解。
FEATURED FIGMA PLUGINS
網(wǎng)站鏈接：?https://figma.tovi.fun/
每月一期，給你推薦當(dāng)月更新的、值得嘗試的 Figma 插件。
Figma 中文社區(qū)
網(wǎng)站鏈接：https://www.figma.cool/
致力于在國(guó)內(nèi)推廣 Figma，這里有開(kāi)發(fā)的 Figma 工具箱、設(shè)計(jì)資源精選、插件合集和 Figma 官方文檔。
Awesome Figma Tips
網(wǎng)站鏈接：https://awesomefigmatips.com/tips
除了推薦插件以外，還用動(dòng)圖形式展示了各種 Figma 的技巧。
語(yǔ)雀-Figma 交流專(zhuān)欄
網(wǎng)站鏈接：https://www.yuque.com/annray/csoz4r/zsn8mi
除了插件推薦以外，從各類(lèi)方向總結(jié)了一些經(jīng)驗(yàn)。
從來(lái)不敢想象能在一個(gè)生產(chǎn)力工具上，如此玩出花。
在基于云協(xié)作的理念上，可以在上面制作一些小游戲，多人互動(dòng)。
也可以在上面發(fā)布名片交友信息
又或者是做好設(shè)計(jì)簡(jiǎn)歷簡(jiǎn)歷個(gè)人網(wǎng)站和作品集
又或者像我現(xiàn)在用 figma 直接做 ppt 演示文檔，還能當(dāng)會(huì)議投屏給大家演示，非常好用。
當(dāng)然 Figma 也向前衍生出 FigJam 致力于前期的一些想法收集，會(huì)議，用研等等，像白板一樣簡(jiǎn)單好用。
附上整個(gè) PPT-Figma 的分享鏈接：https://www.figma.com/community/file/993179495306722989，大家可以 duplicate 復(fù)制一份以后，點(diǎn)擊右上角播放原型，查看 ppt 里的動(dòng)效制作，自制了循環(huán)動(dòng)效（頂部、封面封底的彩虹循環(huán)）、PPT 備注交互（按 P 可以顯示當(dāng)前頁(yè)的備注）。覺(jué)得好的話(huà)記得點(diǎn)贊喲~歡迎隨撩~
文中相關(guān)鏈接
- 《高效協(xié)作 I 資源庫(kù)的協(xié)作方式》
https://isux.tencent.com/articles/tencentdocs-efficient-methods.html - 《使用 Figma + GitHub Actions 完成 SVG 圖標(biāo)的完全自動(dòng)化交付》
https://mp.weixin.qq.com/s/mRtHMo6P8cLzKtnDjpd4Hw
歡迎關(guān)注作者微信公眾號(hào)：「JeasonDesign」
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話(huà)題
熱評(píng) 名字長(zhǎng)才能吸引你注意