Figma MasterClass

Aiko · December 30, 2024, 7:06am

首先我們需要知道什麼是 Figma ——

Figma 是一個 基於瀏覽器 的協作式 UI 設計工具，從推出至今越來越受到 UI 設計師的青睞，也有很多的設計團隊投入了Figma 的懷抱，接下來我會帶大家深入了解 Figma，以及我們為什麼要使用 Figma。

基於瀏覽器有什麼好處呢

跨平台（Win,、Chrome、Linux、Mac）
無需保存
設計文件現在是一個 **連結，**這對工作流程是一個很大的改變

但我覺得文件存在本地更安全

Figma 支持 歷史版本恢復，免費版最多保存 30 天。專業或團隊版無限制
Figma 考慮了災難恢復，所有的基礎架構都分佈在 3 個 AWS 數據中心，其中任何一個數據中心意外發生故障，其它數據中心將繼續工作。
獲得了紅杉資本領投的 4000 萬美元 C 輪融資

Figma Security Policywww.figma.com/security/

Figma Raises $40MM Series C Round led by Sequoiawww.figma.com/blog/figma-series-c/

那它有 Sketch 快麼

我們知道基於原生 OS 開發的應用自然能更好的利用硬體資源，但 Figma 在 速度上完勝 Sketch，即使在處理大文件時也是如此。

Figma VS Sketch

Figma 有外掛麼，Sketch 上我依賴很多外掛完成工作

Figma 原生支持 很多 Sketch 需要外掛甚至依靠其它應用才能完成的功能，當然，Figma 也 支持外掛開發。

通過 Figma API 也可以與第三方工具整合：

哇，那它都有些什麼功能

Figma = Sketch（UI 設計）+ InVision（原型設計） + Zeplin（標注）+ Dropbox（雲端同步）+ Abstract（版本歷史）+ Craft-Freehand（即時討論） + Liveshare（即時分享）+ Team Library （團隊組件庫）+ Web API（第三方接入）+ …

下面我們來一起了解下 Figma 的一些功能和特性

– UI 設計

Figma 是為 UI 設計而生的設計工具，除了有和 Sketch 一樣基本的操作和功能，還有許多專為 UI 設計而生的強大功能。

– 原型設計

你可以在 Figma 裡面無縫完成從設計到原型Demo的切換，不需要反覆同步設計圖到第三方平台，我們同樣可以利用 Figma Mirror 在手機上預覽效果。

– 前端協作

工程師可以在設計圖上獲取標注、並且可以導出所需任何資源（包括 CSS、iOS、Android 樣式）

– 即時協作 + 內置評論

在 Figma 里，設計和協作可以是同時進行的，任何人都可以在設計圖的任何地方添加評論，你可以在評論中 @其他人 或將評論標記為已解決。

– 矢量網路（Vector Network）

– 團隊 Library

我們可以跨項目共享和更新 Component、Style，但需要注意的是免費版不能跨文件共享 Component。

– 原生支持 Web Font & Font Icon

Figma 原生支持 Google Fonts 和 Font Awesome。

Google Fonts

Font Awesome

Font Awesome 5fontawesome.com/

Google Fontsfonts.google.com

– 已經推出的 Web API 和即將推出的 Write API

通過 API可以快速輕鬆地對內部公司工作流程進行腳本改進，或將 Figma 與其他工具整合

Uber 和 GitHub 如何使用 Figma API

Uber 員工通過 Figma的 API 查看回饋到電視上的即時設計文件

GitHub Octicon 在 Figma 和 Github 倉庫中，未來可以通過 Write API 可以做到雙向同步

– 官方示例：使用 Figma API 同步網頁上的展示圖片內容

Figma API Docswww.figma.com/developers/docs

Figma API Demogithub.com/figma/figma-api-demo

啊，那上手會不會很難？

不用擔心，Figma 和 Sketch 有相似的介面和快速鍵，並且支持 導入 Sketch 文件
甚至比 Sketch 更容易上手

可能不算問題的問題

穩定的體驗需要科學上網
專業版每人每月 15 刀，企業團隊版每人每月 45 刀，年付會有優惠

我知道 Figma 很厲害了，但用 Sketch 有什麼問題麼？

Sketch 需要不斷更新和整理文件
很大程度上依靠第三方工具來填補 Sketch 的空白（版本控制、原型、向開發交付）
Sketch (Design) + Abstract (Version) + Zeplin (Handoff) + InVision (Present / Prototype)
我們用網盤同步設計時，大量的項目使 Sketch 文件的整理和排序容易混亂
我們的文件命名約定和版本控制難以得到控制
向開發交付需要通過第三方外掛或工具，多餘的步驟成本
卡

綜上總結下 Figma 的優點和缺點

優點

文件存儲在雲端
不用同步，在任何電腦上都可以訪問
沒有傳統中文件的概念（不用來回傳文件）
設計稿永遠是最新的
在線協作
可以同時處理一個文件
可以一起查看文件而無需共享屏幕
任何人都可以對設計稿評論
多平台（Win,、Chrome、Linux、Mac）
快
內置原型功能（更易用）
內置版本控制
內置批量重命名（可以使用正則表達式）
更強大的組件（後面會說到）
可以訪問和修改組件中任何層的任何屬性而無需將其分離
更容易交付給開發，只需分享一個連結
工程師可以及時查看標注，自己導出切圖
為 UI 優化的功能
智能排列（統一調整間距，重新排列內容）
批量圖片置入
Layout（卡 Padding、標示切圖大小、影響約束區域）
Web Font & Font Icon
Style（字體、顏色、描邊、陰影）分開
Figma 中的字體 Style 不用管對齊方式，只包含文字本身屬性

缺點

中英文混排時文字的 fallback，到目前為止對中文的支持依然有些問題
外掛較少，缺少很多拓展性功能
如果要轉平台，需要從頭開始移植
不能斷網工作，同步受網路影響
快速穩定的體驗需要 科學上網
價格略貴
專業版每人每月 15 刀，企業團隊版每人每月 45 刀
不能按比例縮放
不支持動態按鈕
不支持陰影擴展
不支持多層描邊
- *

如何利用 Figma 改進我們的工作流程呢？

0. 首先我們需要了解幾個概念：

「Group（組）」是一種對圖層進行分組的方法，組本身不是對象，意味著 組不影響約束也不具有可以自定義的邊界。
「Frame（框架）」是一個容器，它是 Constraints 所參照的父級，最重要的是 有自己的大小和邊界。
「Artboard（畫板）」可以理解為一種命名習慣，我們可以製作一個 Frame 並將其稱為「畫板」
「Constraints（約束）」類似於 Sketch 裡面的 Resizing ，用來給圖層設置布局改變時圖層的響應策略。
「Component（組件）」類似於 Sketch 裡面的 Symbol，但使用起來會更加靈活
「Instance（實例）」 Component 的一個實例，會隨 Maser Component 改變
「Styles（樣式）」我們可以定義字體、顏色、陰影等屬性的 Style 用來共享

1. 我們可以通過即時協作更快地疊代

疊代時間可以從幾天縮短到幾分鐘，不會再有下面的場景：

「等下，我在同步 Sketch Library。」
「把源文件發我，我改下再發你。」
「你的文件是最新版麼？」

2. 我們的工作流程會更加的無縫和具有包容性

設計文件現在是一個連結，這意味著：

設計師可以更輕鬆地 並行工作，我們可以同時修改一個文件（一個文件可能就是一個項目）。
工程師可以更早的查看設計稿並進行技術評審。
利益相關者或任何有連結的人都可以看到設計從想法到實現的整個過程。
設計現在是一個整體而不是在過程被分割成多個文件。

3. 我們從設計到程式碼的過渡會更快且具有一致性

在 Figma 中，我們更容易的以前端的思維方式進行設計。

首先，Figma 和 Sketch 的一個重要區別就是在 Figma 中我們使用 Frames 而不是畫板，這有什麼區別呢？

Frames 可以互相嵌套。

當我們把一個較小的 Frame 拖到另一個較大的 Frame 上時前者會自動成為後者的子元素。

元素的定位和約束相對於其父級 Frame

我們可以使用 Frames 將屏幕劃分為不同的內容區域，然後在不同的區域內嵌套組件。與自動分組、相對定位和約束相結合，我們可以快速輕鬆的建構一致性且響應式的設計。

易於前端理解

因為 Figma 中的 Frames 類似於 HTML 中的容器（div）。工程師能夠直觀的看到嵌套在各自容器中的 UI 元素，這意味著他們在開發時會對布局有更好的了解。

4. 我們的設計系統將更靈活和易用

Sketch 有 Symbol，Figma 有 Component。不同之處在於 Component 比 Symbol 更靈活，我們可以用更少的組件做更多的事情

Component 為何比 Symbol 更靈活？

在 Sketch 中，我們可以使用 Symbol Overrides 來編輯文本或交換嵌套 Symbols。但是如果想要更改其他屬性（字體大小，邊框粗細或背景顏色等），則必須創建一個新的 Symbol。

要解決這個問題，你可以將每個屬性單獨做一個 Symbol 然後把他們嵌套在一起，但數量會越來越多，這對於大型項目和複雜的 UI，維護會越來越複雜和難以使用。

使用 Figma 時，我們可以訪問和修改 Component 中任何層的屬性，而無需將其從 Master Component 中分離。

1.創建一個 Component，然後將其複製以創建兩個 Instances

2.對 Master Component 的更改會立即同步到其所有 Instances

3.除非更改了 Master Component 的屬性，否則任何屬性都將被覆蓋

與 Symbol 相比，Component 為何更易用？

首先，在創建 Component 時，我們不必擔心**命名結構（**icon/app/search）。
和 Sketch 不同的是，重命名 Master Components 時它將自動更新到所有的 Instances。
要創建一個 Component 類別，只需將它們分組到一個 Frame 中，並將該 Frame 命名為該類別即可，這意味著我們只需拖拖拽拽就可以輕鬆地重新組織 Component。
訪問 Figma 中的 Component 比訪問 Sketch 中的 Symbol 更容易。我們可以不必考慮命名結構來從嵌套菜單中一層層去找。相反，我們可以看到 Component 的縮略圖列表。
要將 Component 添加到畫布或更換 Instances，只需拖到畫布即可。