前言

哈嘍，大家好，我是海怪。最近一周，我都在學(xué)習(xí) Figma。

起因是看到一些好看的網(wǎng)頁，總想自己實現(xiàn)一遍。但是，為了實現(xiàn)這個網(wǎng)頁，又要搞腳手架、又要搜集圖片素材、又要調(diào)樣式，最終出來的效果其實只是個無后端的前端項目。

那這和設(shè)計稿有什么區(qū)別？然后就想，不如我就學(xué)一學(xué) Figma 吧。學(xué)會了還能和公司設(shè)計師多個話題，何樂而不為呢。

然而，當(dāng)我真的使用 Figma 后，發(fā)現(xiàn)這個軟件并不是很符合前端的習(xí)慣。但在 Figma 里，需要另一套方法來達(dá)到對應(yīng)的效果，有時還需要用到一些 Hacky 手法。

不開玩笑，F(xiàn)igma 也有體操哦：https://www.figma.com/community/file/814242668822780225

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

工具進(jìn)化史

Figma 作為 2023 年最流行的前端設(shè)計軟件，我們先來講講設(shè)計工具的發(fā)展史（這是我從公司的設(shè)計師里聽來的）。

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

到了 Vue 和 React 初生的時代，蘋果的 Sketch 通過它的輕量化和美觀搶占了市場，順便把設(shè)計師和前端開發(fā)的電腦都統(tǒng)一成了 Mac。

隨著項目團(tuán)隊不斷發(fā)展，大家意識到協(xié)同合作的必要性，最終轉(zhuǎn)向使用了協(xié)同效率更高的 Figma。

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

界面初探

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

基礎(chǔ)元素

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

Frame

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

點(diǎn)擊這個 #號的時候，右側(cè)會有一些預(yù)覽的 Size 供你選擇：

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

Text

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

Circle

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

其它

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

看到這，有同學(xué)會問：網(wǎng)站組件部分就這么簡單？沒錯，就這么簡單！我們平常接觸的網(wǎng)頁基本上就是由這些幾何圖形構(gòu)成的。

布局

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

Constraints 布局

這個布局可以理解為 不會導(dǎo)致父元素高度坍塌的絕對定位。

隨便創(chuàng)建一父一子兩個 Frame（div），會看到右側(cè)會有 Constraints布局：

上面的 CSS 偽代碼為：

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

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

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

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

Auto Layout 布局

這個其實就是我們前端天天用的 Flex 布局了！flex-direction, align-items, justify-content等應(yīng)有盡有！

創(chuàng)建一個父 Frame，在里面隨便加一些元素，在右側(cè)找到 Auto Layout添加一下，會發(fā)現(xiàn)所有子元素都會被合理地安放，并會帶有對應(yīng)的上下左右的 Padding 和元素之間的間隔。

如果 Auto Layout 內(nèi)嵌 Auto Layout，那么就觸發(fā)了前端最熟悉的 flex嵌flex布局，在寬度/高度這里會有三個選項，分別為：

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

• Hug Contents: 內(nèi)容長度，可以理解為內(nèi)聯(lián)元素 display: inline或者 width: max-content

• Fill Container: 可以理解為 flex-grow: 1，當(dāng)所有子 item 都為 fill container則為均等寬度

在 Auto Layout 里的設(shè)置里，還有 space-between的配置。沒錯，就是 flex布局里的space-between：

其它屬性

右側(cè)還會有一些屬性，分別都有對應(yīng)的 CSS 屬性，比較直觀，不再贅述：

技巧

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

快捷鍵

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

aspect-ratio: 1

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

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

transform-origin: center center

普通拖拽畫圖形默認(rèn)中心點(diǎn)是： transform-origin: top left，如果需要居中畫圖形，需要按住 Cmd + 拖拽畫圓實現(xiàn)：

此時可以實現(xiàn) transform-origin: center center的效果。

選中內(nèi)部元素

默認(rèn)只能選中最外層的元素，按住 Cmd鍵即可選中內(nèi)部元素。可以理解為默認(rèn)選中會有 e.stopPropagation效果，而按住 Cmd則會有穿透點(diǎn)擊的效果，不會出現(xiàn) e.stopPropagation。

查看距離

默認(rèn)是無法直接看到兩個元素的距離的，需要先選中一個元素，然后按住 option鍵，Hover 到另一個元素上，才會有距離：

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

布局

Width: X% | Height: Y%

Figma 世界中無法實現(xiàn) width: X%！如果實現(xiàn)類似的效果，需要計算子 Frame 和父 Frame 的比例，然后設(shè)置 Constraints 為 top 和 left and right。

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

Margin

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

Padding

因為我們是在做設(shè)計，所以 Marign 和 Padding 呈現(xiàn)的效果是一致的，不用太糾結(jié)，先看看是否能用上面的設(shè)置的 Marign 取代。

如果強(qiáng)迫癥非要用 Padding，那么可以給 Frame 加一個 Auto Layout，使用它的 Padding 來實現(xiàn)：

Absolute Position

如果你已經(jīng)在用 Auto Layout，那么所有元素都是 Flex 布局的 Item，要實現(xiàn)浮動效果，可以用右上角的 Absolute Position。

既然要設(shè)定絕對定位，那么要記得 Constratins 也要設(shè)置好對應(yīng)的 top和 right：

這樣才會有：

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

Overflow: visible

默認(rèn)情況下，F(xiàn)rame 都為 overflow: hidden，把 Clip content去掉即可實現(xiàn) overflow: visible。

記錄顏色

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

找到 Fill或 Stroke，在右邊【四個點(diǎn)】的地方點(diǎn)加號，可以把當(dāng)前顏色添加為一個 CSS 顏色常量：

后續(xù)復(fù)用這個顏色即可。

組件

和我們寫前端代碼一樣，F(xiàn)igma 同樣有“組件”的概念，可以參考一下 Ant Design 組件庫的 Figma。

要實現(xiàn)組件，選中希望創(chuàng)建組件的 Frame，點(diǎn)最上面的 Create Component

那么這個 Frame 就變成了組件了，會發(fā)現(xiàn)左側(cè)的圖標(biāo)也變成了4 個菱形的 Icon，而不是 #號：

Figma 的“組件”和“組件實例（空心菱形）”可以理解為 Java 里的 Class 和 Instance 的關(guān)系，“組件”里的屬性為類屬性（靜態(tài)屬性），修改后所有實例同時生效；“組件實例”里的屬性則為實例屬性，修改它們只會影響當(dāng)前實例。

暫時無法在飛書文檔外展示此內(nèi)容

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

而且 Figma 會自動識別 Props類型，當(dāng)使用實例時，可以在右側(cè)更改對應(yīng)的屬性來展現(xiàn)不同組件：

資源

當(dāng)然，并不是所有設(shè)計內(nèi)容都要我們手動實現(xiàn)，我們可以站在巨人肩膀上做設(shè)計。這里列舉一些比較好用的資源位：

• Unsplash Figma 插件：可以直接插入網(wǎng)圖，不需要先把圖片下載再導(dǎo)入

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

• Figma 社區(qū)：可以復(fù)制現(xiàn)成的 Figma 設(shè)計，同時也能看下其他設(shè)計師的優(yōu)秀作品

• ...

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

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

• Tutorials: Explore design features in Figma

這兩個系列足以秒殺所有教程，包括這篇文章 :)

最后

好了，你現(xiàn)在已經(jīng)學(xué)會 Figma 的基礎(chǔ)使用了，剛開始練手時，我推薦大家抄一兩個頁面來玩一下，比如我就抄了 B 站的收銀臺：

然后參考下 我做的 Figma 設(shè)計稿。

最后，無論你是想和設(shè)計師多一個聊天話題，還是想自己設(shè)計網(wǎng)頁，又或者想進(jìn)入設(shè)計這個新世界，F(xiàn)igma 是很值得大家學(xué)習(xí)的。那這期就先到這里吧，我們下期再見！

Happy Design :)