用戶體驗(yàn)

本文約5858字，閱讀需要15分鐘

關(guān)于 Figma

如果你是從零開(kāi)始學(xué)習(xí) Figma，或者從平面切換到 UI，或者（像我一樣）從切換，不妨一起學(xué)習(xí)！

在過(guò)去的幾年里，我從心底里喜歡它，并且是它的忠實(shí)粉絲。 但是后來(lái)發(fā)現(xiàn)它的團(tuán)隊(duì)協(xié)作和交付，比如在 , , Craft, 之間切換，很麻煩。 不管我用哪種組合，效果都不是很好，有額外的成本，原型制作也不是很順利。 但Figma的出現(xiàn)，讓多軟件協(xié)同的亂象不再出現(xiàn)。

優(yōu)勢(shì)：

- 免費(fèi)（每個(gè)帳戶最多可建立 2 個(gè)用戶和 3 個(gè)項(xiàng)目）；

- 在 Mac 和 PC 上運(yùn)行（僅適用于 Mac）；

- 實(shí)時(shí)團(tuán)隊(duì)協(xié)作；

- 可以導(dǎo)出文件（不支持）；

- Mac 和 PC 的集成開(kāi)發(fā)者交接/說(shuō)明；

- 優(yōu)秀的團(tuán)隊(duì)庫(kù)/設(shè)計(jì)系統(tǒng)；

-高質(zhì)量的原型設(shè)計(jì)

缺點(diǎn)：

-云端在線協(xié)作，但可以將文件保存到本地進(jìn)行處理，方便后期添加。

01 入門(mén)

1.1 安裝 Figma

進(jìn)入Figma.com官網(wǎng)，按照提示進(jìn)行注冊(cè)，注冊(cè)成功后即可使用！

登錄并開(kāi)始申請(qǐng)

進(jìn)入應(yīng)用界面，F(xiàn)igma 會(huì)引導(dǎo)你創(chuàng)建團(tuán)隊(duì)和項(xiàng)目。 現(xiàn)在，只需在任何地方創(chuàng)建一個(gè)新文件（點(diǎn)擊菜單或 CMD+N）以便快速使用。

主界面

與 不同的是，F(xiàn)igma 的文件并不存儲(chǔ)在本地電腦上，而是存儲(chǔ)在云端，你可以隨時(shí)隨地通過(guò)瀏覽器訪問(wèn)你的所有作品。

1.2 導(dǎo)入草圖文件

Figma 可以快速準(zhǔn)確地導(dǎo)出草圖文件，只需將文件拖放到 Figma 畫(huà)布上，即可繼續(xù)使用。

將文件拖放到屏幕上

缺點(diǎn)：無(wú)法從 Figma 復(fù)制粘貼單個(gè)項(xiàng)目（如果拖放，它將轉(zhuǎn)換為圖像），如果將單個(gè)項(xiàng)目保存為 SVG，則可以從中復(fù)制單個(gè)項(xiàng)目！

提示：導(dǎo)出前建議先下載Figma App，因?yàn)楸镜刈煮w很難在瀏覽器中渲染，而且會(huì)弄臟文件。

02 用 Figma 設(shè)計(jì)

2.1 新建畫(huà)板

和中間操作一樣，按A或F鍵可以在右側(cè)的屬性面板中查看所有畫(huà)板選項(xiàng)，選擇你要使用的規(guī)格或者隨意建一個(gè)。 使用 1x 視角（實(shí)際像素大小）工作，因?yàn)樵?Figma 中調(diào)整大小不會(huì)損失圖像質(zhì)量，只需在導(dǎo)出時(shí)選擇合適的大小即可。

按“F”設(shè)置一個(gè)新的框架

與傳統(tǒng)畫(huà)板不同，畫(huà)板可以相互嵌套，便于以后創(chuàng)建更復(fù)雜的交互設(shè)計(jì)。

2.2 網(wǎng)格與布局

在移動(dòng)端，可以使用標(biāo)準(zhǔn)的8點(diǎn)網(wǎng)格； 在網(wǎng)頁(yè)端，建立布局網(wǎng)格非常重要，所以在設(shè)計(jì)之前，建立一個(gè)12列的引導(dǎo)網(wǎng)格。 以我個(gè)人的喜好，自定義 CSS 網(wǎng)格更快更容易，最好事先與開(kāi)發(fā)人員達(dá)成一致。 在右邊的網(wǎng)格屬性菜單中，調(diào)整列和行是否固定，行間距按需要設(shè)置。

創(chuàng)建網(wǎng)格、列和行

Figma 中網(wǎng)格和列的酷炫之處在于你可以設(shè)置多個(gè)網(wǎng)格并將它們保存為樣式。 這是一個(gè)方便的功能，不僅可以使布局適應(yīng)各種設(shè)備，還可以讓它們與團(tuán)隊(duì)成員共享或在其他項(xiàng)目中輕松重用。

提示：使用 Ctrl+G 切換可見(jiàn)性。

2.3 層和組

與 一樣，找到屏幕一側(cè)的視口面板。

左側(cè)視口面板

層→手動(dòng)添加的每個(gè)新元素都會(huì)創(chuàng)建一個(gè)視口。 您可以通過(guò)拖動(dòng)重新排列視口；

Group → 確保視口已分組（選擇視口并按 cmd+G）以保持文件井井有條。 它還可以幫助您快速跨幀連接和復(fù)制。 要選擇組中的元素，請(qǐng)按 cmd，然后單擊該項(xiàng)目；

頁(yè)面 → 設(shè)置設(shè)計(jì)的不同部分或區(qū)域，我通常會(huì)為頭腦風(fēng)暴、線框圖和與最終版本的交互構(gòu)建單獨(dú)的頁(yè)面；

→ 組件保存在這里，庫(kù)按鈕也在這里；

嵌套框架 → Figma 可以嵌套框架，特別方便結(jié)構(gòu)設(shè)計(jì)和原型制作。

2.4 矢量形狀

Figma 使用一種稱為 , 的方法來(lái)創(chuàng)建復(fù)雜的形狀。

使用 Figma 創(chuàng)建形狀

從底部菜單中選擇，或按 R（矩形）、L（線）或 O（橢圓）繪制形狀。 按住 Shift 鍵保持比例，每個(gè)形狀將手動(dòng)創(chuàng)建自己的視口。 要制作更復(fù)雜的形狀sketch導(dǎo)出svg圖標(biāo)，請(qǐng)按 P，或從底部菜單中選擇鉛筆。 完成后按回車(chē)鍵手動(dòng)關(guān)閉路徑，在設(shè)計(jì)過(guò)程中可以隨時(shí)通過(guò)兩側(cè)的屬性菜單修改屬性和操作矢量圖形。

注意：矢量圖形可以按任意大小縮放和導(dǎo)入，但文件大小會(huì)很小。 它們非常適合簡(jiǎn)單的形狀、按鈕、圖標(biāo)、徽標(biāo)和各種簡(jiǎn)單的插圖。

2.5張圖片

在 Figma 中，圖像總是放置在形狀遮罩內(nèi)。 要更改圖像的形狀，請(qǐng)打開(kāi)圖像屬性，然后在兩側(cè)的屬性窗口中單擊“填充”。

Figma 中的圖像

下拉菜單中的選項(xiàng)：

填充→圖像填充；

Fit → 當(dāng)我們調(diào)整大小時(shí)，圖像不會(huì)被裁剪或隱藏；

裁剪→將圖像裁剪為所需的大小和選擇。 請(qǐng)注意，這里它并沒(méi)有丟失，而只是掩蓋了圖像；

平鋪→根據(jù)需要重復(fù)原始圖像，調(diào)整平鋪的大小。

Figma 允許調(diào)整顏色和飽和度等屬性，多次調(diào)整不會(huì)改變?cè)紙D像屬性。

注意：當(dāng)用圖像填充現(xiàn)有形狀時(shí)，單擊該形狀，轉(zhuǎn)到填充，然后從下拉列表中選擇圖像，否則將設(shè)置顏色。 注意圖片版權(quán)，推薦，畫(huà)質(zhì)特別高，還有Figma插件。

2.6 格式

Figma 預(yù)裝了字體，如果您更喜歡使用本地字體，則需要安裝 Font 或 Figma 桌面應(yīng)用程序，并確保訪問(wèn)該文件的其他人都安裝了相同的字體。 按T建立一個(gè)文本窗口（或點(diǎn)擊開(kāi)始輸入），在兩側(cè)的屬性菜單上設(shè)置文本屬性。

Figma 中的文本

提示：確保文字不大于16px，最好是18px，甚至加寬欄寬以提高可讀性。

03款式

可以保存和重新應(yīng)用的樣式屬性。 這樣，可以立即更新大文件，并可以為顏色、文本、網(wǎng)格和陰影等效果創(chuàng)建樣式。

要查看所有使用的樣式，請(qǐng)單擊畫(huà)板后面的藍(lán)色背景，它們將出現(xiàn)在右側(cè)的屬性菜單中。

3.1 創(chuàng)建顏色樣式

Figma 中的顏色和漸變樣式很棒，設(shè)置一種樣式并在文本、填充和輪廓上重復(fù)使用。 您可以在設(shè)計(jì)過(guò)程中隨時(shí)右鍵單擊樣式進(jìn)行修改和刪除。

創(chuàng)建和使用顏色樣式：

創(chuàng)建形狀：

修改填充為需要的顏色值；

單擊包含顏色樣式的方形符號(hào)；

點(diǎn)擊“+”進(jìn)行添加。

提示：命名顏色時(shí)，最好定義其特定用途，而不是顏色本身。 例如，將其命名為“突出顯示顏色”而不是“橙色”。

3.2 創(chuàng)建文字樣式

與 不同，F(xiàn)igma 中的文本樣式僅存儲(chǔ)字體系列、大小、行高和寬度。 這使樣式庫(kù)保持美觀和簡(jiǎn)單。

設(shè)置文本樣式幾乎與顏色樣式相同：

單擊要設(shè)置樣式的文本：

在右側(cè)的屬性菜單中，點(diǎn)擊樣式方形圖標(biāo)；

單擊 + 并為樣式命名；

要為現(xiàn)有文本添加樣式，只需單擊文本并通過(guò)樣式框從左側(cè)菜單中選擇所需的樣式；

添加樣式后，您還可以通過(guò)相同的菜單修改屬性或分離樣式。

提示：命名文字樣式時(shí)，最好在使用后調(diào)用，例如“H1”或“”“引用”，而不是具體描述字體或字號(hào)。

3.3 更多樣式

Figma 不止于此，網(wǎng)格還可以作為樣式保存、共享和重復(fù)使用。 此外，還有陰影、內(nèi)陰影、圖層模糊和背景模糊等效果樣式。

04組件

組件是可以在設(shè)計(jì)文件中重復(fù)使用的 UI 元素。 組件保持設(shè)計(jì)的一致性，更新和擴(kuò)展，節(jié)省大量工作！

4.1 創(chuàng)建可重用組件

選擇對(duì)象并按屏幕底部或 cmd+alt+K 創(chuàng)建組件鍵。 在 面板中，一個(gè)紫色的組件圖標(biāo)表示已經(jīng)創(chuàng)建了一個(gè)主組件。

主組件和實(shí)例

復(fù)制此主組件會(huì)創(chuàng)建一個(gè)相同的副本，稱為原樣復(fù)制。 主組件中的任何修改都會(huì)對(duì)所有實(shí)例造成相同的修改。 在右側(cè)視口對(duì)面的“資產(chǎn)”選項(xiàng)卡中找到所有組件，并將它們拖到框架上。

TIP：從長(zhǎng)遠(yuǎn)來(lái)看，F(xiàn)igma 組件應(yīng)該與后端組件（如 中的那些）保持一致，最好與技術(shù)團(tuán)隊(duì)協(xié)調(diào)。

4.2 交換和嵌套

組件可以嵌套在主組件中，這意味著您可以在一個(gè)組件中包含多組組件。 使用左側(cè)的實(shí)例交換菜單交換嵌套組件，或 cmd + alt + 從團(tuán)隊(duì)庫(kù)中拖動(dòng)它們。

4.3 覆蓋范圍

實(shí)例在大小和整體布局上仍然遵循主要組件，但您可以修改實(shí)例屬性，例如文本和 . 如果重置為原始狀態(tài)sketch導(dǎo)出svg圖標(biāo)，請(qǐng)注意兩側(cè)屬性菜單中的重置按鈕。 可以通過(guò)右鍵單擊來(lái)分離。

4.5 命名組件

如，使用“/”命名組件，例如，將“share-icon”更改為icon/share。 Figma 將手動(dòng)創(chuàng)建一個(gè)名為 icon 的父類(lèi)別。

確保正確命名您的組件

順便說(shuō)一句，如果您在多個(gè)頁(yè)面上有主要組件，它們將按頁(yè)面組織。

提示：為了讓您的組件井井有條，為每個(gè)組創(chuàng)建一個(gè)新框架，例如按鈕或表單。

05 自動(dòng)布局

Auto 允許創(chuàng)建隨著內(nèi)容修改而縮小或縮小的動(dòng)態(tài)框架。 這是一項(xiàng)巨大的改進(jìn)，因?yàn)樗?jié)省了大量調(diào)整時(shí)間，還允許一鍵式檢查正確的設(shè)計(jì)。

5.1 將視口更改為手動(dòng)布局

輸入內(nèi)容；

shift+A 將在文本層周?chē)謩?dòng)創(chuàng)建一個(gè)新的手動(dòng)布局框架，并帶有垂直和水平填充。 您可以在左側(cè)的手動(dòng)布局屬性菜單中調(diào)整那些值；

更改內(nèi)容將聽(tīng)到手動(dòng)調(diào)整大小的擊鍵。

5.2 嵌套手動(dòng)布局

嵌套的手動(dòng)布局框架，結(jié)合了水平和垂直布局屬性以實(shí)現(xiàn)引人注目的界面設(shè)計(jì)。

選擇對(duì)象，按 shift+A，自動(dòng)布局框架現(xiàn)在是父框架內(nèi)的子框架。

在右側(cè)的“屬性”菜單中選擇“垂直分布”或“水平分布”，以防止文本框向一個(gè)方向增長(zhǎng)，確保選擇“固定為”或“高度”。

提示：只能通過(guò)連接視口來(lái)交換子框架在父框架中的位置；

注意：任何手動(dòng)布局都可以保存為組件。

06 Figma 中的原型

Figma 為您的 Web 和應(yīng)用程序設(shè)計(jì)提供卓越的原型設(shè)計(jì)。 您不需要任何其他工具。

6.1 原型制作

選擇一個(gè)框架并單擊右側(cè)屬性菜單上的原型。 單擊原型設(shè)置并選擇要設(shè)計(jì)的設(shè)備。 單擊右上角的播放按鈕查看設(shè)計(jì)，或下載 Figma 在設(shè)備上進(jìn)行實(shí)時(shí)預(yù)覽。

原型菜單

6.2 連接畫(huà)面

確保在左側(cè)的“原型”菜單中，當(dāng)元素被選中時(shí)，它周?chē)鷷?huì)出現(xiàn)一個(gè)紅色的小圓圈。 單擊并按住圓圈進(jìn)行拖動(dòng)，將出現(xiàn)一個(gè)指示連接的圖標(biāo)。 在右側(cè)的屬性面板中，選擇動(dòng)作（滑動(dòng)、點(diǎn)擊、鼠標(biāo)懸停等）和動(dòng)畫(huà)類(lèi)型（移入、推入、滑出等）。

6.3 滾動(dòng)方式

除了垂直滾動(dòng)，F(xiàn)igma 還提供了其他特別逼真的滾動(dòng)頁(yè)面方式。

水平滾動(dòng) → 選擇所有元素并將它們分組。 畫(huà)一個(gè)需要大小的框，連接或者復(fù)制到里面，這樣滑動(dòng)就會(huì)隱藏，在下拉菜單中選擇水平滾動(dòng)。

像地圖一樣平移 → 畫(huà)一個(gè)框并添加圖像。 在滾動(dòng)中，選擇水平和垂直滾動(dòng)。

Fixed → 要使標(biāo)題或按鍵具有粘性，請(qǐng)確保選擇“Fixed ”（在左側(cè)屬性菜單中的 > 中）

6.4 智能動(dòng)畫(huà)

智能動(dòng)畫(huà)找到匹配的視口以識(shí)別原型中幀之間的差異和動(dòng)畫(huà)視口，創(chuàng)建強(qiáng)大的原型。

07 與他人共享和協(xié)作

7.1 演示模式

按下菜單右上角的播放圖標(biāo)，聯(lián)通終端原型將在新標(biāo)簽頁(yè)進(jìn)行演示，您可以評(píng)論和分享演示鏈接。

演示模式

7.2 創(chuàng)建團(tuán)隊(duì)和項(xiàng)目

Figma 上的團(tuán)隊(duì)可以與其他人協(xié)作，您可以邀請(qǐng)成員、添加項(xiàng)目并將它們保存到庫(kù)中。

要?jiǎng)?chuàng)建團(tuán)隊(duì)，只需單擊 Figma 概述上的“創(chuàng)建團(tuán)隊(duì)”按鈕并按照說(shuō)明進(jìn)行操作。 付費(fèi)試用更強(qiáng)大的功能。

Figma 中的團(tuán)隊(duì)、項(xiàng)目和文件

Team → 一群人，比如設(shè)計(jì)師、開(kāi)發(fā)人員、文案等；

項(xiàng)目→將相關(guān)文件放在一起；

文件 → 個(gè)人設(shè)計(jì)文件。

注意：您可以隨時(shí)在項(xiàng)目和團(tuán)隊(duì)之間交流文件。

7.3 共享庫(kù)

在團(tuán)隊(duì)中工作時(shí)，您需要確保所有組件都實(shí)時(shí)更新，并且所有團(tuán)隊(duì)成員都可以訪問(wèn)存儲(chǔ)位置。 Figma 共享庫(kù)可以很好地處理這些情況。

注意：如今，設(shè)計(jì)系統(tǒng)已成為 UX/UI 的重要組成部分，值得花一些時(shí)間熟悉這些概念和不同的方法。

創(chuàng)建共享庫(kù)：

在右側(cè)菜單中，進(jìn)入并點(diǎn)擊書(shū)籍圖標(biāo)；

點(diǎn)擊發(fā)布；

為發(fā)布命名，并保存副本；

在 Teams 中打開(kāi)一個(gè)新文件；

進(jìn)入選項(xiàng)卡，單擊庫(kù)圖標(biāo)并激活您剛剛創(chuàng)建的共享庫(kù)。

更新共享庫(kù)：

當(dāng)更改設(shè)計(jì)內(nèi)容或樣式時(shí)，F(xiàn)igma 會(huì)提示您更新團(tuán)隊(duì)庫(kù)。 更新后，所有其他團(tuán)隊(duì)成員將收到更新通知，他們可以同步查看更新。

注意：共享庫(kù)特別強(qiáng)大，可以成為設(shè)計(jì)過(guò)程的有力支持。 在您的工作中使用共享庫(kù)時(shí)，有許多資源可供您參考和練習(xí)。

7.4 與其他設(shè)計(jì)者和開(kāi)發(fā)者分享

頂部菜單中的紅色按鈕可以發(fā)送共享邀請(qǐng)，或者只需輸入電子郵件地址或復(fù)制鏈接。

發(fā)送給設(shè)計(jì)師和文字作者→設(shè)置為可編輯模式，共享者可以訪問(wèn)所有功能。 您將遇到其他用戶并在同一個(gè)文件上實(shí)時(shí)協(xié)作！

編輯模式

開(kāi)發(fā)人員 → 設(shè)置為開(kāi)發(fā)模式，向技術(shù)人員展示所有維度（切換 CSS、iOS 和代碼）。 他們還可以訪問(wèn)和下載原型。

查看模式

注意：如果在文件仍在處理時(shí)與開(kāi)發(fā)人員共享，最好設(shè)置一個(gè)新頁(yè)面以防止混淆。

7.5 資源導(dǎo)入

如上所述，在 Figma 中，即使僅授予“查看”權(quán)限，也可以直接從共享文件導(dǎo)入任何大小的所有資產(chǎn)，因此作為設(shè)計(jì)師，您不需要自己導(dǎo)入任何東西。 但是，如果您希望它在任何情況下都像這樣：

在 Figma 中導(dǎo)入資源

選擇對(duì)象；

在兩側(cè)的“屬性”菜單上單擊“導(dǎo)入”。

注意：記得用“/”命名，比如image/home/, icon/，他們會(huì)手動(dòng)把排序成文件。

備忘單，何時(shí)導(dǎo)入：

SVG → 用于矢量文件，例如徽標(biāo)和圖標(biāo)。 SVG 可以縮放到任何大小而不會(huì)降低質(zhì)量；

Jpg→用于各種不透明的圓形圖像和照片，確保提供實(shí)際尺寸（1x）和黃斑碼率（2x）；

Png→如果圖片或照片需要透明背景導(dǎo)入，也需要按1x導(dǎo)入，至少2x；

1x/2x → 1x是實(shí)際尺寸，是2x的兩倍，顯示器上的清晰圖像需要2倍。 注意，2x、3x等后綴為@2x、@3x，編碼時(shí)應(yīng)用該技巧；

wh→設(shè)置圖片的寬高，例如300w=一張寬為300px的圖片；

Pdf → 如果要導(dǎo)入整個(gè)頁(yè)面，例如用于發(fā)送或添加到演示文稿的高質(zhì)量圖像，請(qǐng)使用 Pdf。

/結(jié)尾。

相關(guān)參考資料

-翻譯自原文

-圖片及GIF來(lái)自網(wǎng)絡(luò)； Gur的封面動(dòng)畫(huà)

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