大家好，我是前端西瓜哥。

今天我們來看看 Figma 圖形對象的一些基本屬性。

這些屬性來自 fig 文件，更貼近 Figma 圖形的底層數(shù)據(jù)結(jié)構(gòu)。

Figma 也提供了 REST API 接口獲取設(shè)計稿的圖形樹結(jié)構(gòu)，且大多數(shù)屬性和 fig 文件的相同，文檔說明也更詳細。

但有些屬性在底層屬性上做了一層封裝，以提供更好的語義。比如在 REST API 的數(shù)據(jù)有 rotation 屬性，但 fig 文件并沒有，需要通過 transform 矩陣屬性計算出來。

https://www.figma.com/developers/api#node-types

基本屬性

guid：圖形 id 對象，用于唯一標(biāo)識圖形。

它有兩個屬性：sessionID（會話 id，每個 socket 連接一個唯一 id），以及 localID（一個自增 id），二者組合可得到一個在和本地圖形和其他客戶端圖形都不同的唯一 id，以便實現(xiàn)協(xié)同編輯。

{
  "sessionID": 1,
  "localID": 7
}

• phase：通常是 CREATED，表示創(chuàng)建。貌似使用了 quill 的 delta 風(fēng)格。不知道有沒有其他的值，比如 delete 這些。
• parentIndex：父節(jié)點 id。fig 的數(shù)據(jù)結(jié)構(gòu)是拍平的一維數(shù)組，加載時需要根據(jù) parentIndex 還原為圖形樹結(jié)構(gòu)。
• type：圖形（或者說是節(jié)點）類型，比如 ROUNDED_RECTANGLE（圓角矩形）、VECTOR（矢量網(wǎng)格）。還有一些非圖形的類型，如 VARIABLE（變量，比如顏色變量）。
• name：圖形名。
• visible：是否可見。
• locked：是否鎖定，鎖定的圖形不可選擇，不可通過光標(biāo)移動。

• opacity：不透明度，介于 0 到 1 之間。0 表示完全透明，1表示完全不透明。
• blendMode：混合模式，表示當(dāng)前節(jié)點和其下的圖層以何種形式混合。默認為 PASS_THROUGH（穿透）。
• size：一個對象，x 為寬，y 為高。屬性名不是 width 和 height，大概因為用了矢量結(jié)構(gòu)體。
• transform：一個表達 3x3 矩陣的對象，會對節(jié)點進行矩陣變換。

size 和 transform 可以表達一個變形的矩形，包括位移、旋轉(zhuǎn)、翻轉(zhuǎn)、斜切等。

這種表達方式很簡潔，方便做 GPU 并行渲染，也便于直轉(zhuǎn) SVG。

proportionsConstrained：是否鎖定寬高比。如果為 true，輸入框修改寬時，高會自動更新，保持原來的寬高比，反之同理。

cornerRadius：圓角半徑。

cornerSmoothing：平滑圓角程度，比如 60% 對應(yīng) iOS 圖標(biāo)的平滑程度。

horizontalConstraint / verticalConstraint：圖形的水平和垂直約束，指定在 frame（畫框）縮放時圖形縮放或移動的方式。

支持的類型值有：

• MIN：默認值，向左或向上保持固定距離。
• MAX：向右或向下保持固定距離。
• CENTER：向 frame 的中心點保持相對距離。
• STRETCH：拉伸，向左（上）和向右固定距離，縮放 frame 會引起圖形拉伸。
• SCALE：保持相對 frame 的比例關(guān)系。
• handleMirroring：拖拽控制點調(diào)整路片段（segment）時，入控制點（handleIn）和出控制點(handleOut)的鏡像關(guān)系。

有三種形式：

• NONE，默認值，無鏡像關(guān)系，兩個控制點各自獨立。
• ANGLE，角度一致但長度各自獨立，表現(xiàn)為：修改一個控制點，兩個控制點和路徑點都在一條直線上，但另一個控制點到路徑點的長度保持不變。
• ANGLE_AND_LENGTH，角度和長度相同，即完全 路徑點對稱，見下圖。

填充

fillPaints：填充對應(yīng)的 Paint 數(shù)組。

比如下面是SOLID（純色）的表示。

fillPaints: [
  {
    "type": "SOLID",
    "color": {
      "r": 0.7631543278694153,
      "g": 0.9063313603401184,
      "b": 0.6506586074829102,
      "a": 1
    },
    "opacity": 1,
    "visible": true,
    "blendMode": "NORMAL" // 這里也有混合模式
  },
]

數(shù)組前面的填充會覆蓋掉后面的填充。

此外 Figma 還支持 IMAGE（圖片）、GRADIENT_LINEAR（線性漸變）、GRADIENT_LINEAR（徑向漸變）、GRADIENT_ANGULAR（旋轉(zhuǎn)漸變）、GRADIENT_DIAMOND（菱形漸變）、VIDEO （視頻）等 PaintType 類型。

fillGeometry：大概是填充對應(yīng)的圖形化描述，指向一個 Buffer 對象，能轉(zhuǎn)成類型數(shù)組，但不知道什么解析。

但如果使用開發(fā)者 REST API，這個屬性得到的是 SVG 的 Path 描述。

描邊

strokePatins：描邊數(shù)組，基本和 fillPaints 一樣。

strokeGeometry：同 fillGeometry。

strokeWeight：描邊寬度。

dashPattern：數(shù)字數(shù)組，描述虛線描邊的規(guī)則，指定連續(xù)的 “實線-虛線-實線-...” 這樣循環(huán)下去，參考 SVG 的 stroke-dasharray 屬性。

strokeAlign：描邊對齊，默認為 INSIDE（內(nèi)描邊），此外還有 CENTER（往兩邊擴展）、OUTSIDE（外描邊）。

strokeCap：描邊路徑兩端的樣式，默認為 NONE，除了經(jīng)典的 SQUARE、ROUND，還有特殊的 LINE_ARROW、CIRCLE_FILLED 等值，可以產(chǎn)生箭頭或其他特殊樣式。

strokeJoin：路徑轉(zhuǎn)角的處理方式。MITER（斜接）、 BEVEL（倒角） 和 ROUND（圓角）。

miterLimit：對斜角長度與線寬比例的閾值，在 strokeJoin 為 milter 時有效，表示為超過閾值時，尖角會變成 bevel。的效果。

編輯器 UI 上并沒有這個屬性，但有個 Miter angle 屬性，它和 miterLimit 的轉(zhuǎn)換關(guān)系為：miterLimit = miterLength / stroke-width = 1 / sin (theta / 2)。可以參考 SVG 的 stroke-milterlimit 屬性。

下圖中，藍色路徑的轉(zhuǎn)角突破了閾值，小于 28.96，于是從 miter 變成了bevel。

borderStrokeWeightsIndependent：邊框線是否各自獨立設(shè)置線寬。

borderTopWeight / borderBottomWeight / borderLeftWeight / borderRightWeight：圖形的 4 個邊框的寬度，當(dāng)前面這個 borderStrokeWeightsIndependent 屬性為 true 時會使用。

效果

effects：效果數(shù)組。

有這幾種效果：

• DROP_SHADOW：外陰影。
• INNER_SHADOW：內(nèi)陰影。
• BACKGROUND_BLUR：背景模糊，該圖層下的背景會被模糊掉，類似毛玻璃效果，通常這個圖形要設(shè)置透明度。
• FOREGROUND_BLUR：前景模糊（貌似就是高斯模糊）。

蒙版

mask：圖形是否作為蒙版，設(shè)置為蒙版圖形的前面的兄弟節(jié)點不在被蒙版區(qū)域的部分不會被渲染；

maskType：指定蒙版類型。默認是 ALPHA （基于透明度），此外還有 VECTOR（基于圖形輪廓線）、LUMINANCE（基于明度）。

結(jié)尾

還有不少特定圖形才有的屬性，比如文本對象特有的 fontSize，并不在本文的討論范圍內(nèi)，我們下篇文章再聊。