前言

哈嘍，大家好，我是海怪。最近一週，我都在學習 Figma。

起因是看到一些好看的網頁，總想自己實現一遍。但是，爲了實現這個網頁，又要搞腳手架、又要蒐集圖片素材、又要調樣式，最終出來的效果其實只是個無後端的前端項目。

那這和設計稿有什麼區別？然後就想，不如我就學一學 Figma 吧。學會了還能和公司設計師多個話題，何樂而不爲呢。

然而，當我真的使用 Figma 後，發現這個軟件並不是很符合前端的習慣。但在 Figma 裏，需要另一套方法來達到對應的效果，有時還需要用到一些 Hacky 手法。

不開玩笑，Figma 也有體操哦：https://www.figma.com/community/file/814242668822780225

爲了能讓大部分前端上手 Figma，這篇文章就拋磚引玉一下。

工具進化史

Figma 作爲 2023 年最流行的前端設計軟件，我們先來講講設計工具的發展史（這是我從公司的設計師裏聽來的）。

在 jQuery 時代，大家還在用 Adobe 的 PhotoShop 和 Illustrator 來畫圖。前端每次都要在 PSD 上切圖，特別麻煩，或許這就是 “前端切圖仔” 的由來吧。

到了 Vue 和 React 初生的時代，蘋果的 Sketch 通過它的輕量化和美觀搶佔了市場，順便把設計師和前端開發的電腦都統一成了 Mac。隨着項目團隊不斷髮展，大家意識到協同合作的必要性，最終轉向使用了協同效率更高的 Figma。

Figma 支持網頁端和桌面端，各端使用體驗都非常流暢。我猜大部分前端接觸的還是網頁端，你也可以通過 這個鏈接 嘗試一下 Figma 的桌面端。

界面初探

工作區如上圖所示，你可以大致把它理解爲 Chrome 的元素審查器。

基礎元素

和我們前端開發一樣，開發頁面需要通過排列布局多個基礎組件 / 元素來完成，下面就簡單講講這些基礎元素用法。

Frame

第一個最最最常用的就是 Frame 了，你可以理解爲這是前端的 <div> 或小程序 / Android/iOS/RN 裏的 <view>，一切的 Container, Wrapper, Body, Header 都可以用 Frame 一把梭實現。

點擊這個#號的時候，右側會有一些預覽的 Size 供你選擇：

這些 Size 不僅可以幫助你直接創建一個同 Size 的 Frame，同時也可以給以後修改 Frame 的寬度和高度時，作一個參考。

Text

第二重要的就是 Text，名字即定義。可以理解爲前端的文本或小程序 / Android/iOS/RN 裏的 <text>，一切文本都由它來實現。

Circle

第三常用的是畫圓，主要使用場景是繪製頭像。

其它

剩下的這些圖形等你需要用到自然就會用了。比如你要畫一個下拉框，那就是 Retangle + Polygon 組合，要畫評分組件，那麼就用 Star，要畫箭頭就用 Arrow。

看到這，有同學會問：網站組件部分就這麼簡單？沒錯，就這麼簡單！我們平常接觸的網頁基本上就是由這些幾何圖形構成的。

佈局

佈局我們只需要瞭解 Constraints 佈局和 Auto Layout 佈局就可以了。

Constraints 佈局

這個佈局可以理解爲 不會導致父元素高度坍塌的絕對定位。

隨便創建一父一子兩個 Frame（div），會看到右側會有 Constraints 佈局：

上面的 CSS 僞代碼爲：

.parent {
  position: relative;
  .child {
    position: absolute;
    top: xxx;
    left: xxx;
  }
}

往往我們對絕對定位的印象是：子元素會浮動，如果父元素沒有內容，會導致父元素高度坍塌，類似這樣（父元素的高度爲文本高度）：

但是！要記住我們是在做設計，不是在寫前端。所以在 Figma 的世界裏，沒有高度坍塌的說法，也不會有 BFC（幹，我都快忘了 BFC 是啥了，反正就是你們想的那個 BFC）。

所以，對於一般的場景，Constraints 佈局都能滿足。誒，那滿足不了呢？看下面的 Auto Layout。

Auto Layout 佈局

這個其實就是我們前端天天用的 Flex 佈局了！flex-direction, align-items, justify-conten等應有盡有！

創建一個父 Frame，在裏面隨便加一些元素，在右側找到 Auto Layout 添加一下，會發現所有子元素都會被合理地安放，並會帶有對應的上下左右的 Padding 和元素之間的間隔。

如果 Auto Layout 內嵌 Auto Layout，那麼就觸發了前端最熟悉的 flex 嵌 flex 佈局，在寬度 / 高度這裏會有三個選項，分別爲：

• Fixed width: 固定長度，可以理解爲 width: 70px

• Hug Contents: 內容長度，可以理解爲內聯元素 display: inline或者 width: max-content

• Fill Container: 可以理解爲 flex-grow: 1，當所有子 item 都爲 fill container則爲均等寬度

在 Auto Layout 裏的設置裏，還有 space-between的配置。沒錯，就是 flex 佈局裏的space-between：

其它屬性

右側還會有一些屬性，分別都有對應的 CSS 屬性，比較直觀，不再贅述：

技巧

使用 Figma 一些小技巧能大大提高畫頁面效率，下面簡單分享一些。

快捷鍵

實際上這些快捷鍵適用於整個 Mac 系統，比如你在 PhotoShop，日常截圖都可以用到。

aspect-ratio: 1

如果你想能畫 1 : 1 的正圓和正方形，可以按住 Shift 鍵 + 拖拽畫圓 實現：

按住 Shift 的意思是：等比例縮放，而默認拉出來的圖形是 1 : 1，所以按住 Shift 可以 1 : 1 縮放。

transform-origin: center center

普通拖拽畫圖形默認中心點是：transform-origin: top left，如果需要居中畫圖形，需要按住 Cmd + 拖拽畫圓實現：

此時可以實現 transform-origin: center center的效果。

選中內部元素

默認只能選中最外層的元素，按住 Cmd 鍵即可選中內部元素。可以理解爲默認選中會有 e.stopPropagation效果，而按住 Cmd 則會有穿透點擊的效果，不會出現 e.stopPropagation。

不過有的時候，我們沒有另一個元素 Hover，這時可以 Shift + R 打開參考線，然後拖一條參考線下來，再用上面的方法查看距離：

佈局

Width: X% | Height: Y%

Figma 世界中無法實現 width: X%！如果實現類似的效果，需要計算子 Frame 和父 Frame 的比例，然後設置 Constraints 爲 top 和 left and right。

比如上面的紅色 Frame 的寬度爲白色 Frame 寬度的 50%，且由於有了 Left and right 的制約，無論父 Frame 怎麼左右滑動，子 Frame 還是會保持 width: 50%，因此實現 width: 50%效果。

Margin

Figma 沒有地方可以設置 Marign。但實際上，你可以理解爲兩個元素擺放的位置間距即是 Margin-X，通過方向鍵的 上下左右 來調整，可以最終找到正確的 marign：

Padding

因爲我們是在做設計，所以 Marign 和 Padding 呈現的效果是一致的，不用太糾結，先看看是否能用上面的設置的 Marign 取代。

如果強迫症非要用 Padding，那麼可以給 Frame 加一個 Auto Layout，使用它的 Padding 來實現：

Absolute Position

如果你已經在用 Auto Layout，那麼所有元素都是 Flex 佈局的 Item，要實現浮動效果，可以用右上角的 Absolute Position。

既然要設定絕對定位，那麼要記得 Constratins 也要設置好對應的 top 和 right：

這樣纔會有：

.child {
  top: xxx;
  right: yyy;
}

Overflow: visible

默認情況下，Frame 都爲 overflow: hidden，把 Clip content 去掉即可實現 overflow: visible。

顏色變量

一般來說，一個頁面中不會有非常多種顏色，大部分的顏色都是可以複用的：

找到 Fill 或 Stroke，在右邊【四個點】的地方點加號，可以把當前顏色添加爲一個 CSS 顏色常量：

後續複用這個顏色即可。

組件

和我們寫前端代碼一樣，Figma 同樣有 “組件” 的概念，可以參考一下 [Ant Design 組件庫的 Figma](https://www.figma.com/file/treUws5aNFI3WbC57ngHCJ/%5BPreview%5D-Ant-Design-System-for-Figma-5.1?t=84cgsAn2NbqPv2id-0

要實現組件，選中希望創建組件的 Frame，點最上面的 Create Component

那麼這個 Frame 就變成了組件了，會發現左側的圖標也變成了 4 個菱形的 Icon，而不是 # 號：

Figma 的 “組件” 和“組件實例（空心菱形）”可以理解爲 Java 裏的 Class 和 Instance 的關係，“組件”裏的屬性爲類屬性（靜態屬性），修改後所有實例同時生效；“組件實例”裏的屬性則爲實例屬性，修改它們只會影響當前實例。

Figma 的組件也有 Props 概念，在 Properties 一欄你可以添加這個組件的 Props：

而且 Figma 會自動識別 Props 類型，當使用實例時，可以在右側更改對應的屬性來展現不同組件：

資源

當然，並不是所有設計內容都要我們手動實現，我們可以站在巨人肩膀上做設計。這裏列舉一些比較好用的資源位：

• Unsplash Figma 插件：可以直接插入網圖，不需要先把圖片下載再導入

• Figma Icon 資源：Icon 資源，實際上用 Google 也能搜出很多不同 Icon 資源

• Figma 社區：可以複製現成的 Figma 設計，同時也能看下其他設計師的優秀作品

• ... 如果大家想再深入學習 Figma，推薦直接看 Figma 的 YouTube 官方頻道，看下這兩個系列就好了：

• New to FIGMA? Get started with "figma for beginners"  tutorials

• Tutorials: Explore design features in Figma 這兩個系列足以秒殺所有教程，包括這篇文章 :)

最後

好了，你現在已經學會 Figma 的基礎使用了，剛開始練手時，我推薦大家抄一兩個頁面來玩一下，比如我就抄了 B 站的收銀臺：

然後參考下 我做的 Figma 設計稿。

最後，無論你是想和設計師多一個聊天話題，還是想自己設計網頁，又或者想進入設計這個新世界，Figma 是很值得大家學習的。那這期就先到這裏吧，我們下期再見！

Happy Design :)

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6LUX-gyoaINUQvHvLBSgvg