1.2 你是這樣的Figma

Figma是一款在線協作設計軟件，本節將對Figma的編輯器、創建團隊、新建文件、導入Sketch文件和分享設計文件和原型等內容進行講解。

1.2.1 編輯器介紹

1.工具欄左側

Figma工具欄左側主要包括菜單和一些工具，如圖1-14和圖1-15所示。

（1）菜單

單擊左上角的菜單按鈕展開菜單，其主要功能如圖1-14所示。

Quick actions（快捷操作）：包括按名稱搜索Figma中的文件、編輯、快捷鍵和查看等內容。

File（文件）：對文件進行新建、導入、導出等操作。

Edit（編輯）：進行撤銷、復制和粘貼等操作。

View（視圖）：包括設置布局網格和標尺，以及調整縮放比例和在文件中瀏覽等功能。

Object（對象）：對選擇的對象進行編組、創建組件、旋轉和鏡像等操作。

Vector（矢量）：可進行矢量編輯。

Text（文本）：為選擇的文本設置加粗、字號、高度和間距等樣式。

Arrange（排序）：通過對齊和分配來整理所選的多個對象。

Plugins（插件）：查看、管理和運行安裝的插件。

Integrations（集成）：對鏈接的應用程序進行查看、管理和使用。

Preferences（偏好設置）：調整Figma的偏好設置。

Libraries（資源庫）：打開資源庫窗口。

（2）操作工具

Move（移動）：在Figma中選中對象后，可以用移動工具在畫布上移動所選對象，快捷鍵為“V”。

Scale（縮放）：選擇移動工具下方的縮放工具，可以調整所選對象的大小，快捷鍵為“K”。

（3）畫框和切片工具

Framer（畫框）：選擇該工具后，可在畫布上拖動創建畫框，或在屏幕右側選擇默認畫框，快捷鍵為“A”或“F”。

Slice（切片）：切片工具可導出指定區域中的內容，快捷鍵為“S”。

（4）形狀工具

在Figma中可以使用多種形狀工具進行復雜矢量圖案的設計，形狀工具如下。

Rectangle（矩形）：快捷鍵為“R”。

Line（直線）：快捷鍵為“L”。

Arrow（箭頭）：快捷鍵為“Shift+L”。

Ellipse（橢圓）：快捷鍵為“O”。

Polygon（多邊形）。

Star（星形）。

Place Image（放置圖片）：快捷鍵為“Shift+Cmd（Ctrl）+K”。

（5）鋼筆和鉛筆工具

Pen（鋼筆）：鋼筆工具可以構建矢量路徑，快捷鍵為“P”。

Pencil（鉛筆）：鉛筆工具可以將手繪作品添加到設計文件中，快捷鍵為“Shift+P”。

（6）文本工具

Text Tool（文本工具）：選擇此工具后，單擊畫布便可輸入文本，快捷鍵為“T”。

（7）手工具

Hand Tool（手工具）：選擇手工具后，在文件中單擊任何對象，對象都不會被選中，方便預覽設計文件，快捷鍵為“H”。

（8）評論工具

Add/Show Comments（添加/顯示評論）：選擇此工具后，可直接在設計文件上添加留言，且留言只有在選擇評論工具后才會顯示。

2.工具欄中部

工具欄中部顯示的工具會根據選擇的對象而變化，圖1-16所示為可能出現的所有工具。

（1）Reset Instance（重置組件實例）

當所選對象為調整后的組件實例時，將會看到此工具，單擊按鈕可將修改后的組件實例還原為主組件樣式。

（2）Edit Object（編輯對象）

當所選對象為矢量圖形時，可看到“Edit Object”（編輯對象）按鈕。單擊按鈕，可進入矢量編輯模式，用戶可在矢量路徑上添加、刪除或調整錨點。

（3）Create Component（創建組件）

單擊按鈕可以將所選對象變為組件。組件是可以在整個項目中重復使用的對象，可保證設計的統一性。

（4）Use as Mask（設為蒙版）

該工具用于顯示或隱藏所選對象的特定部分。單擊按鈕（設為蒙版）可將所選對象轉換為遮罩蒙版。

（5）Crop Image（裁剪圖片）

當所選對象為圖片時，可看到該工具，單擊按鈕（裁剪圖片）即可對圖片進行裁剪。

（6）Union Selection（并集所選項）

同時選中兩個以上矢量圖形后會出現“Union Selection”（并集所選項）按鈕，可對矢量圖形進行組合。單擊右側的下拉按鈕可展開下拉菜單，如圖1-17所示。

Union Selection（并集所選項）：將重疊的路徑合并成一條。

Subtract Selection（減去頂層所選項）：從底層減去上方所有重疊項。

Intersect Selection（交集所選項）：將重疊的路徑合并成新的路徑。

Exclude Selection（差集所選項）：將不重疊的部分合并成新的路徑。

Flatten Selection（拼合所選項）：將選擇的多個對象合并成一個整體。

3.工具欄右側

工具欄右側是分享和視圖選項工具等，如圖1-18所示。

（1）用戶頭像

展示此時訪問當前頁面的用戶頭像。

（2）Share（分享）

單擊“Share”（分享）按鈕可打開分享模式，用于管理設計文件的訪問權限。

（3）Present（演示）

單擊演示按鈕會在新窗口中打開原型演示頁面，用于預覽設計文件和進行交互演示。

（4）View Settings（縮放/視圖選項）

縮放操作通常使用快捷鍵來完成，如圖1-19所示。

部分選項說明如下。

Pixel Grid（像素網絡）：選擇該選項后，放大畫面可以看到1px×1px的網格。

Snap to Pixel Grid（對齊到像素網格）：選擇該選項后，可以讓對象大小和對象位置值都為整數，建議在進行界面設計時選擇該選項；取消選擇該選項后，對象的大小和位置值可以出現小數，在編輯矢量對象時建議取消選擇該選項。

1.2.2 創建團隊

每個Figma團隊都是獨立的工作區，創建團隊后可以邀請他人加入團隊，其他人加入后便可訪問團隊內的所有設計文件。

步驟01 打開Figma主頁面。

步驟02 單擊頁面左下角的“Create New Team”（創建新的團隊）按鈕，如圖1-20所示。

步驟03 在彈出的對話框中輸入團隊名稱，如圖1-21所示。

步驟04 如果暫不邀請協作者加入團隊，可單擊“Skip for now”（暫時跳過）按鈕，團隊創建成功后可重新邀請協作者加入，如圖1-22所示。

步驟05 單擊“Choose Star ter”（入門）按鈕即可創建免費版團隊，如圖1-23所示。

團隊創建成功后，新建的團隊會在頁面左側顯示出來，如圖1-24所示。

步驟06 單擊團隊名稱，可在頁面右側邀請協作者加入團隊，單擊頂部的“Settings”（設置）可修改團隊的名稱、頭像，以及刪除團隊等。

1.2.3 新建項目

項目是在團隊下創建的。

步驟01 打開Figma主頁面，在左側選中新創建的團隊，然后單擊頁面右上角的“New project”（新建項目）按鈕，如圖1-25所示。

步驟02 在彈窗中輸入項目名稱并單擊“Create Project”按鈕，如圖1-26所示。

新項目將會顯示在團隊名稱下方，如圖1-27所示。

1.2.4 新建文件

可以在“Drafts”（草稿）或團隊項目中新建文件，新建文件的數量不受限制。

在項目中創建文件

步驟01 打開Figma主頁面，單擊項目Learn，然后單擊頁面右上角的“New File”（新建文件）按鈕，再選擇“New design file”（新設計文件），如圖1-28所示。

步驟02 Figma會在當前窗口中新建一個名為Untitled的設計文件，單擊“Untitled”（無標題）可以對它進行重命名操作，如圖1-29所示。

步驟03 雖然在Figma中進行的設計是實時保存的，但是也可以按快捷鍵“Cmd+S”（Windows：“Ctrl+S”）來主動保存，主動保存Figma文件時會有提示，如圖1-30所示。

如何從文件頁面返回到項目頁面？在瀏覽器中需要在菜單欄中選擇“Back to Files”才能返回到該文件所在的項目，在客戶端中則只需單擊窗口左上角的“Figma”按鈕即可，如圖1-31所示。

如果要在草稿中創建文件，只需單擊“Drafts”（草稿）右側的“New File”（新建文件）按鈕，或在草稿模塊下單擊頁面右上角的“New File”（新建文件）按鈕。

在草稿中創建的文件會存儲在草稿中，在項目中創建的文件會保存在項目中。當然文件是可以跨項目或團隊進行移動的，也可以將項目中的文件移動到草稿中。

1.2.5 導入Sketch文件

Sketch設計文件可以直接導入Figma，將Sketch文件導入Figma后，原Sketch文件中的Symbols將會變為Figma中的組件。

步驟01 打開已創建的項目，單擊頁面右上角的“Impor t”（導入）按鈕，如圖1-32所示。

步驟02 選擇一個本地的Sketch文件并導入。導入成功后，文件將會顯示在項目中，如圖1-33所示。

步驟03 也可單擊頁面左上角的菜單按鈕，選擇“File”＞“New from SketchFile”來實現Sketch文件的導入，如圖1-34所示。

1.2.6 將文件導入Figma

.fig文件的導入方法和Sketch文件的導入方法一樣，可參考1.2.5小節中的導入步驟。

1.2.7 添加/顯示評論

步驟01 單擊工具欄中的“Add/Show Comments”（添加/顯示評論）按鈕進入評論模式，快捷鍵為“C”。

步驟02 單擊要添加評論的位置（在該模式下鼠標指針會變成類似“定位”形狀的圖標）。

步驟03 將評論內容添加到留言彈窗中，也可添加表情符號或使用“@協作者”功能。

步驟04 單擊“Post”（發布）按鈕，可將評論發布出去，如圖1-35所示。

擁有文件的“can view”（可查看）權限后即可對文件進行評論。

如果你打開的是別人發給你的鏈接，在評論模式中也可以使用“@協作者”功能。

評論模式下不可以修改設計文件，選擇其他工具可退出評論模式。

我們可以給Figma中的任何對象添加評論，Figma將會把我們的評論內容保存在設計文件中。

1.2.8 分享設計文件和原型

設計文件和原型制作完成后，可將它們分享給同事（產品經理、運營同事、前/后端工程師）。

每個設計文件和原型都擁有唯一的鏈接，而且鏈接后綴是一樣的，如圖1-36所示。

1.分享設計文件

步驟01 單擊設計文件右上角的“Share”（分享）按鈕可打開分享設置，如圖1-37所示。

步驟02 單擊圖1-37所示的?處的下拉按鈕，可以對分享的鏈接進行權限設置：

Anyone with the link指知道鏈接的任何人（常用）；

Only people invited to this file指只有被邀請的人。

步驟03 單擊頁面中的藍色“Copy link”（復制鏈接）可得到設計文件的鏈接。

步驟04 如需邀請協作者，可以將協作者的郵件地址或Figma賬戶名稱輸入圖1-37所示的?處的文本框中進行邀請（通過該方法邀請協作者后，協作者需在通知中心同意后才能看到設計文件）。

步驟05 對于已經邀請的協作者，可在圖1-37所示的?處設置其文件權限，可改為“owner”（所有者）、“can edit”（可編輯）、“can view”（可查看）或“Remove”（移除）。

步驟06 也可以通過內嵌網頁的方式，將設計文件內嵌到支持的網站里，單擊頁面中的“Get embed code”（獲取嵌入代碼）即可獲取相關代碼。

2.分享原型

單擊工具欄右側的按鈕打開原型頁面，分享原型與分享設計文件的方法相同。

1.2.9 合作設計

在邀請并給予協作者當前設計文件的編輯權限后，當你們同時訪問該設計文件時，協作者的頭像會出現在頁面右側，單擊其頭像將跳轉到所選協作者查看的內容，如圖1-38所示。

你們可以一起對設計文件進行修改，當協作者退出設計文件時，他的頭像也會消失。

1.2.10 團隊資源庫

我們設計的樣式和組件保存在第一次創建它們的文件中，如果要在團隊項目中使用和該文件一樣的樣式和組件，就需要把它發布到團隊資源庫中，這樣協作者就可以使用該組件庫。

要將Figma升級到教育版或專業版才可以使用團隊資源庫。當然，如果沒有升級也不會影響Figma組件的學習和使用。

樣式和組件的創建將會在本書的3.1節和3.2節中進行詳細說明。

團隊資源庫的開啟方法

步驟01 在設計文件頁面左側的“Assets”（資源）面板中單擊“Team Library”（團隊資源庫）按鈕，如圖1-39所示。

步驟02 在彈出的窗口中開啟團隊資源庫，如圖1-40所示。

在團隊資源庫設置頁中可以開啟、關閉和更新其中的文件。

通過前面的學習，相信大家對Figma的架構有了初步的了解。可以這樣比喻：Figma就如同一個大學，團隊是“學院”，項目是“班級”，設計文件就如同班級中的“老師或學生”，“老師”就是團隊資源庫，里面的“學生”可以從“老師”那里獲得樣式和組件。

團隊創建成功后，通常會創建一個名為“Design System”的項目，里面包含了常用的“UI Kit”設計套件和從“Community”（社區）復制的優秀設計系統。