1.1 開啟Figma之旅

Figma是一款實時協作的設計工具，我們可以通過瀏覽器或Figma客戶端與團隊中的人員一起進行在線設計，設計文件會實時儲存在云服務器中。即使沒有網絡，我們也可以使用Figma的大部分功能。當網絡正常連接后，所有的改動均會同步到云服務器。

Figma共有5級結構，分別如下。

①Organization（組織），需單獨聯系Figma銷售人員開通。

②Teams（團隊），較為常用。

③Projects（項目）。

④Files（文件）。

⑤Pages（頁面）。

Figma具有多層結構、多人實時協作和權限控制等特點，可提升用戶的協作效率。

1.1.1 Figma介紹

1.Figma是什么

Figma是基于瀏覽器的在線協作界面設計工具，可以用來進行原型設計、標注查看、交互演示等，越來越多的UI/UX設計師和設計團隊開始使用Figma，如圖1-1所示。

2.Figma的特點

支持多個平臺：可以在Windows、macOS、Linux、Chrome OS上使用Figma。

自動保存：實時在線保存設計文件。

唯一來源：每個設計文件對應一個鏈接。

支持歷史版本恢復：免費版可保存30天，付費版無時間限制。

安全：Figma所有的基礎架構都分布在3個AWS數據中心，若其中任何一個數據中心發生故障，其他數據中心仍然可以繼續工作。

3.Figma對軟硬件的要求

計算機設備：Figma使用WebGL（Web圖形庫）來進行渲染，它對圖形的要求非常低，可以在大多數瀏覽器上完美運行，所以大部分的計算機都適合。

移動設備：可以在手機或平板電腦上訪問Figma文件的“僅查看”版本。

1.1.2 創建Figma賬戶

任何人都可以創建免費的Figma賬戶。

1.通過電子郵箱地址注冊

步驟01 訪問Figma官網，單擊右上角的“Sign up”按鈕，如圖1-2所示。

步驟02 在彈出的頁面中輸入電子郵箱地址和密碼，如圖1-3和圖1-4所示。

步驟03 填寫完注冊信息后單擊“Create Account”按鈕進行提交，如圖1-5所示。

2.通過登錄谷歌賬戶（Google SSO）注冊

步驟01 訪問Figma官網，單擊右上角的“Sign up”按鈕。

步驟02 單擊頁面頂部的“Sign up with Google”按鈕。

步驟03 如果已經登錄谷歌賬戶，則會彈出確認授權信息窗口，否則會提示登錄谷歌賬戶。

步驟04 授權后，便可以輸入密碼，你的谷歌郵箱將收到一份授權郵件。

通過谷歌賬戶注冊的賬戶無法在Figma中修改電子郵箱地址和密碼，如果要修改電子郵箱地址或密碼，則需要將原有賬戶與Figma解綁。

1.1.3 登錄Figma

支持Figma登錄的應用有：Figma桌面應用、Figma網頁版、iOS或Android設備的Figma Mirror App。

你可以通過電子郵箱地址、谷歌賬戶和SAML SSO來登錄Figma。

1.通過電子郵箱地址登錄

步驟01 打開Figma官網，單擊右上角的“Log in”按鈕。

步驟02 在打開的頁面中輸入已注冊的電子郵箱地址和對應密碼。

步驟03 單擊“Log in”按鈕。

2.通過谷歌賬戶登錄

步驟01 打開Figma官網，單擊右上角的“Log in”按鈕。

步驟02 在彈出的窗口中單擊頂部的“Continue with Google”按鈕。

步驟03 如果你的谷歌賬戶已在瀏覽器上登錄，同意彈出的確認授權信息即可登錄成功；否則，輸入“Google郵箱地址或電話”和“密碼”進行授權，然后單擊“Next”按鈕進行登錄。

3.通過SAML SSO登錄

通過SAML SSO登錄Figma的方法與前兩種登錄方法類似，在此不再贅述。

1.1.4 下載與安裝Figma

1.下載

步驟01 打開Figma官網，展開“Products”（產品）下拉菜單，單擊“Downloads”（下載）鏈接進入下載頁面，如圖1-6所示。

步驟02 根據自己計算機的系統單擊相應鏈接進行下載，如圖1-7所示。

2.安裝

（1）在macOS中安裝

步驟01 在下載頁面中單擊“Desktop App for macOS”（適用于macOS的桌面應用）鏈接，將文件下載到本地，下載完成后雙擊Figma.zip進行解壓。

步驟02 將Figma從下載文件夾移至應用程序文件夾，如圖1-8所示。

步驟03 從下載文件夾中刪除Figma應用程序的壓縮包Figma.zip。

步驟04 在應用程序列表中打開Figma，如圖1-9所示。

（2）在Windows中安裝

步驟01 在下載頁面中單擊“Desktop App for Windows”（適用于Windows的桌面應用）鏈接，將文件下載到本地，下載完成后運行Figma Setup.exe并按提示進行安裝。

步驟02 從桌面或下載文件夾中刪除Figma安裝包。

步驟03 在桌面上打開Figma應用程序。

1.1.5 給手機安裝Figma Mirror App

iOS：運行版本不可低于11.0.1。

Android：運行版本不可低于Android 7.0。

Figma Mirror App：必須使用Figma賬戶登錄后才可以使用。

Figma Mirror App可在手機上預覽設計好的文件，按自己手機尺寸設計的頁面預覽體驗會更好，如圖1-10所示。

你可以在上面提到的Figma下載頁面中下載適用于iOS或Android的Figma Mirror App，也可以在App Store或Google Play Store中下載。

1.1.6 使用Figma Mirror App預覽設計文件和原型

1.Figma Mirror App預覽

為了查看產品開發完成后的最終效果，可以使用Figma Mirror App進行預覽。

要使用Figma Mirror App，需同時登錄桌面瀏覽器或桌面應用程序和Figma Mirror App。Figma Mirror App可以實時顯示用戶當前在桌面瀏覽器或桌面應用程序上選擇的畫框，如圖1-11所示。

步驟01 在Figma桌面應用程序或桌面瀏覽器中登錄Figma賬戶。

步驟02 使用該賬戶在手機上登錄Figma Mirror App。

步驟03 在桌面應用程序的設計文件中選擇要查看的畫框。

步驟04 Figma Mirror App中將會實時顯示所選的畫框。

2.瀏覽器預覽

步驟01 在Figma桌面應用程序或桌面瀏覽器中登錄Figma賬戶。

步驟02 打開要預覽的設計文件。

步驟03 用手機瀏覽器訪問https://www.figma.com/mirror，并登錄你的Figma賬戶。

步驟04 在設計文件中選擇要查看的畫框。

步驟05 手機瀏覽器中會實時顯示所選的畫框。

3.查看原型

在查看原型之前，需要提前在原型中添加原型鏈接。

如果你不是很了解Figma中的原型，可以閱讀本書的“3.3.2基礎原型”和“3.3.7構建完善的交互原型”。

步驟01 使用相同賬戶登錄Figma和Figma Mirror App。

步驟02 在Figma桌面應用程序中打開要預覽的文件。

步驟03 選擇原型的第一個畫框，如圖1-12所示。

步驟04 Figma Mirror App中將會同步顯示用戶在Figma中選擇的畫框，如圖1-13所示。

步驟05 可以在Figma Mirror App中按照在Figma應用程序中創建的原型鏈接進行交互操作。

使用Figma Mirror App預覽設計文件時，設計文件的顯示頁面將會等比縮放為設備尺寸。

使用瀏覽器預覽時，瀏覽器的地址欄和底部導航欄將會在手機屏幕上顯示出來，所以用這種方法不能體驗到真實的使用效果。可以用此方法查看H5的設計。