Kimi Design API 参考

@taco-slides/model TypeScript

633 个导出中已记录 556 个 · 大纲

model 包是 Kimi Design 文档与框架无关的唯一可信来源。它定义文档类型，负责加载、保存和校验文档，并把每次编辑记录为一组带撤销历史的操作。它不包含任何编辑器、渲染器或网络代码。

文档被规范化为按 ID 索引的扁平映射：pageOrder、pages、nodes 和 assets，外加一个 theme。每个页面指向一个从不裁剪的根画框或编组，因此页面是一块无边界的画布。容器持有有序的 children 列表。节点不存储父级指针，因此层级结构只有一个可信来源。assertDocument 会拒绝缺失的节点、环、被共享的子节点、不可达的节点、失效的引用以及格式错误的几何数据。

本包返回的值都是深度冻结的。要修改文档，请把 DocumentOperation 传给 applyOperations，或者分派给 DocumentStore；后者还会保存用于撤销、重做和分支的提交历史。

当前版本

本包当前写入的版本号，在构建本页时从源码读取。

文档与页面

DesignDocument 保存所有页面、节点、资源和主题资源。页面按 pageOrder 排序，每个页面指明自己的根节点。

type DesignDocument = DesignDocumentV1

源码

一个 Kimi Design 文档。此包返回的值都是深度冻结的；要修改，请使用 applyOperations 或通过 DocumentStore。

interface DesignDocumentV1

源码

CURRENT_DOCUMENT_SCHEMA_VERSION 版本下文档的存储结构。代码中请使用 DesignDocument 别名。

数据被规范化为以 ID 为键的扁平映射。assertDocument 会检查：每个页面根节点都存在，每个节点恰好能从一个页面到达且最多有一个父节点，不存在环，并且样式、变量、连接线、媒体节点和字体的引用都能解析。（ImagePaint.assetId 不会对照资源映射检查。）

readonly schemaVersion: typeof CURRENT_DOCUMENT_SCHEMA_VERSION源码

readonly id: DocumentId源码

readonly title: string源码

readonly pageOrder: readonly PageId[]源码

每个页面 ID 恰好出现一次，按显示顺序排列。

readonly pages: Readonly<Record<string, Page>>源码

readonly nodes: Readonly<Record<string, SceneNode>>源码

所有页面上的所有节点，以 NodeId 为键。

readonly assets: Readonly<Record<string, Asset>>源码

图片、视频和字体，以 AssetId 为键。

readonly theme: DocumentTheme源码

readonly components?: Readonly<Record<string, ComponentDefinition>>自 0.23.0源码

Reusable layer trees, keyed by ComponentId. Omitted when empty. Each component’s layers live in nodes under its rootId, on no page.

readonly metadata?: Readonly<Record<string, JsonValue>>源码

随文档保存的自由格式 JSON 数据。模型不会读取它。

interface Page

源码

文档中的一个页面。页面是无边界的画布：其根容器从不裁剪，因此顶层节点可以位于任何位置，根节点的 frame 只记录可见范围（见 pageRootFrame）。

readonly id: PageId源码

与该页面在 DesignDocument.pages 中的键一致。

readonly name: string源码

不能为空。

readonly rootId: NodeId源码

页面的根节点：没有父节点的画框或编组。

readonly guides?: readonly Guide[]自 0.11.0源码

页面画布上的标尺参考线，使用页面坐标。为空时省略。

readonly variableModes?: VariableModes自 0.26.0源码

The page’s mode per variable collection. Layers set to Auto inherit it; a collection left out uses the collection’s activeModeId.

readonly metadata?: Readonly<Record<string, JsonValue>>源码

interface Guide

自 0.11.0源码

标尺参考线：仅在编辑器中使用的直线，用于定位对象。渲染器从不绘制它，因此它永远不会出现在导出结果中。

readonly axis: "x" | "y"源码

“x” 表示位于 x = offset 处的竖直线；“y” 表示位于 y = offset 处的水平线。

readonly offset: number源码

沿坐标轴的位置，以文档单位表示，相对于承载该参考线的对象：页面参考线相对于页面原点，画框参考线相对于画框的左上角。

type DocumentSchemaVersion = number | SemanticVersion

源码

文档 schema 版本。当前文档使用 SemanticVersion；数字形式只在读取 0.0.0 版本之前保存的旧文件时使用。

type SemanticVersion = `${number}.${number}.${number}`

源码

major.minor.patch 形式的版本字符串，例如 "0.14.0"。

const CURRENT_DOCUMENT_SCHEMA_VERSION: "0.27.0"

源码

此包读写的 schema 版本。deserializeDocument 会把较旧的文档迁移到此版本，assertDocument 会拒绝任何其他版本。

function pageRootFrame( document: DesignDocument, pageId: PageId ): Rect | undefined

源码

页面根节点的 frame 即页面的可见范围：编辑器将其适配到屏幕上的区域，渲染器也据此确定场景尺寸。页面根节点从不裁剪，因此顶层节点可以位于其外部。

场景节点

SceneNode 是一个按 type 区分的联合类型：frame、group、text、code、shape、image、video 和 connector。形状再按 shape 进一步区分。每个节点都具有 NodeBase 的字段；除路径外，每个节点还通过一个框和旋转来定位（FramedNodeBase）。

type SceneNode = | FrameNode | GroupNode | TextNode | CodeNode | ShapeNode | ImageNode | VideoNode | ConnectorNode | InstanceNode

源码

页面树中的任意节点，通过其 type 字段区分。节点存放在扁平的 DesignDocument.nodes 映射中；容器按 ID 列出其子节点，父节点不被存储。

interface NodeBase

源码

每个 SceneNode 都具有的字段。

readonly id: NodeId源码

与该节点在 DesignDocument.nodes 中的键一致。

readonly name: string源码

图层名称。不能为空。

readonly visible: boolean源码

readonly locked: boolean源码

防止该节点在编辑器画布上被编辑。

readonly opacity: number源码

取值从 0（透明）到 1（不透明）。

readonly blendMode?: BlendMode自 0.8.0源码

该节点如何与其后方的内容合成；省略时为 normal。

readonly mask?: boolean自 0.8.0源码

蒙版会在其自身绘制的 alpha 之外隐藏其后续同级节点，而自身不绘制任何内容。隐藏的蒙版不遮罩任何内容。

readonly aspectRatioLocked?: boolean自 0.1.1源码

调整节点大小时保持宽高成比例。

readonly variableBindings?: VariableBindings源码

其值来自主题变量的属性。

readonly exportSettings?: readonly ExportSetting[]自 0.14.0源码

该节点导出区域中的各行，按顺序排列。为空时省略。

readonly expressions?: NodeExpressions自 0.24.0源码

Computed fields: expression source text keyed by field, for nodes under a component root only (see ComputableField and computableFieldsOf). The plain field keeps the base value, which the expression reads as stored and which is shown when the expression does not check. A field holds a variable binding or an expression, never both. Omitted when empty.

readonly condition?: string自 0.24.0源码

A boolean expression; when it is false the layer and its sublayers are left out of every instance. Only on layers under a component root, never on the root itself. An expression that does not check counts as no condition.

readonly constraints?: ResizeConstraints自 0.25.0源码

How the layer follows its frame when the frame is resized (see ResizeConstraints). Omitted means Left and Top: the layer keeps its position and size. Used for children of frames without auto layout and for absolute children of auto layout frames; ignored elsewhere. Never on a group: constraints set on a group are set on its layers, as in Figma.

readonly layoutPositioning?: "absolute"自 0.25.0源码

"absolute" takes a child of an auto layout frame out of the flow, like Figma’s “Ignore auto layout”: the layout neither moves it nor counts it when hugging, and it follows the frame’s size changes by its constraints. Ignored when the parent has no auto layout.

readonly variableModes?: VariableModes自 0.26.0源码

The mode this layer and its sublayers use for each variable collection (see VariableModes). A collection left out is Auto: the layer inherits the mode from its parent. On an instance, the modes apply to the component’s layers, so two instances of one component can show two modes.

readonly metadata?: Readonly<Record<string, JsonValue>>源码

与节点一起保存的自由格式 JSON 数据。模型不会读取它。

interface FramedNodeBase extends NodeBase

源码

所有由矩形定位的节点共有的字段：适用于除 PathNode 以外的所有类型，后者改用变换矩阵定位。

readonly frame: Rect源码

位置和未旋转时的尺寸，位于父节点的坐标系中（相对于父节点画框的左上角）。

readonly rotation: number源码

角度，单位为度，在屏幕上顺时针，绕画框中心旋转。

readonly flipX?: boolean源码

以局部水平中心为轴镜像渲染后的节点。

readonly flipY?: boolean源码

以局部垂直中心为轴镜像渲染后的节点。

frame、rotation 和翻转共同把局部点 $\mathbf{p}$（原点位于画框左上角）放到父节点中的

$$\mathbf{p}_\text{parent} = \begin{bmatrix} x + w/2 \\ y + h/2 \end{bmatrix} + R_\theta F \left(\mathbf{p} - \begin{bmatrix} w/2 \\ h/2 \end{bmatrix}\right), \quad R_\theta = \begin{bmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{bmatrix}, \quad F = \begin{bmatrix} \pm 1 & 0 \\ 0 & \pm 1 \end{bmatrix}$$

其中 $\theta$ 是以弧度表示的 rotation，$F$ 在每个已设置翻转的轴上取 $-1$。先翻转，再旋转。

readonly resizing?: NodeResizing自 0.15.0源码

填充尺寸和尺寸限制。为空时省略。

type ContainerNode = FrameNode | GroupNode

源码

拥有 children 的节点。用 isContainerNode 判断。

const isContainerNode: (node: SceneNode) => node is ContainerNode

源码

对画框和编组为 true，即拥有 children 的节点。

interface FrameNode extends FramedNodeBase

源码

拥有自身尺寸、填充、描边和效果的容器，可选择使用自动布局。每个页面的根节点是一个画框或编组；页面根节点从不裁切内容。

readonly type: "frame"源码

readonly children: readonly NodeId[]源码

按绘制顺序排列的子节点 ID：第一个子节点位于最底层。

readonly layout: Layout源码

子节点的定位方式：自由定位，或由堆叠或网格自动布局定位。

readonly style?: VisualStyle源码

readonly clipContent?: boolean源码

隐藏子节点中超出画框的部分。

readonly guides?: readonly Guide[]自 0.11.0源码

属于此画框并随其移动的标尺参考线。编辑器只在既未旋转也未翻转的顶层画框上显示它们。为空时省略。

interface GroupNode extends FramedNodeBase

源码

自身没有尺寸的容器：它的 frame 始终适配为其子节点边界的并集（见 fitGroupToChildren）。当 applyOperations 移除了编组的最后一个子节点时，该编组也会被移除。

readonly type: "group"源码

readonly variableBindings?: GroupVariableBindings源码

Properties whose values come from theme variables. A group’s size is computed from its layers, so it cannot bind width or height.

readonly children: readonly NodeId[]源码

按绘制顺序排列的子节点 ID：第一个子节点位于最底层。

readonly clipContent?: boolean源码

interface TextNode extends FramedNodeBase

源码

由带样式的段落组成的文本框。

readonly type: "text"源码

readonly paragraphs: readonly TextParagraph[]源码

readonly verticalAlign: "top" | "middle" | "bottom"源码

当 frame 比文本高时，文本在 frame 中的垂直位置。

readonly overflow: "clip" | "visible"源码

超出 frame 的文本是被裁掉还是仍然绘制。

readonly autoResize: "none" | "height" | "width-and-height"源码

none 保持 frame 的两个尺寸固定，height 保持宽度并让高度随文本变化，width-and-height 让两者都随文本变化。

readonly wrap: "none" | "word" | "character"源码

长行可以在何处换行：从不换行、在单词之间换行，或在任意字符之间换行。

type TextualNode = TextNode

源码

包含可编辑富文本的节点。目前只有 TextNode。

const isTextualNode: (node: SceneNode) => node is TextualNode

源码

对包含富文本的节点（TextNode）为 true。

interface CodeNode extends FramedNodeBase

源码

一段源代码。语法高亮在渲染时计算，只存储原始源代码。

readonly type: "code"源码

readonly source: string源码

readonly language: string源码

用于高亮的语言标识符。不能为空。

readonly fontFamily: string源码

统一应用于整段源代码，而不是单个文本片段。

readonly fontSize: number源码

统一应用于整段源代码，而不是单个文本片段。为正数。

readonly codeStyleId?: CodeStyleId源码

主题中的代码样式；省略时使用主题的 defaultCodeStyleId。

readonly codeStyleOverrides?: Partial< Pick< CodeStyle, "lineHeight" | "letterSpacing" | "background" | "foreground" | "syntax" > >源码

仅对此节点替换代码样式中对应值的取值。

readonly lineNumbers: boolean | number源码

false 隐藏行号，true 从 1 开始编号，数字则设置首行的行号。

readonly autoResize: "none" | "height" | "width-and-height"自 0.1.3源码

含义与 TextNode.autoResize 相同。

readonly wordWrap: boolean源码

按画框宽度对过长的源代码行自动换行。

readonly stroke?: Stroke自 0.1.4源码

绘制在代码块四周的描边。

readonly decorations: readonly CodeDecoration[]源码

interface CodeDecoration

源码

CodeNode 源代码中被标记的一段范围。

readonly from: number源码

在 source 中的起始偏移，以 UTF-16 码元计。

readonly to: number源码

结束偏移（不含），取值从 from 到源代码长度。

readonly kind: "emphasis" | "addition" | "deletion" | "annotation"源码

readonly label?: string源码

type ShapeNode = | RectangleNode | EllipseNode | PolygonNode | StarNode | LineNode | PathNode

源码

所有 type: "shape" 的节点，通过其 shape 字段区分。

interface RectangleNode extends FramedNodeBase

源码

填满其 frame 的矩形；VisualStyle.cornerRadius 为其设置圆角。

readonly type: "shape"源码

readonly shape: "rectangle"源码

readonly style: VisualStyle源码

interface EllipseNode extends FramedNodeBase

源码

填满其画框的椭圆，或椭圆的圆弧、扇形或圆环。

readonly type: "shape"源码

readonly shape: "ellipse"源码

readonly style: VisualStyle源码

readonly arc?: EllipseArc自 0.12.0源码

省略时绘制完整的椭圆。

interface EllipseArc

自 0.12.0源码

把椭圆变成圆弧、扇形或圆环，与 Figma 的弧形数据相同。角度以度为单位，在椭圆的参数角上从 x 轴正方向顺时针测量。扫描范围从起始角度到结束角度，任一方向上最多一整圈。

readonly startingAngle: number源码

readonly endingAngle: number源码

readonly innerRadius: number源码

内半径，以外半径的比例表示，取值从 0（扇形）到小于 1（圆环）。

interface PolygonNode extends FramedNodeBase

自 0.12.0源码

正多边形，其顶点经缩放以填满 frame，第一个顶点位于顶部中央，与 Figma 的绘制方式一致。

readonly type: "shape"源码

readonly shape: "polygon"源码

readonly pointCount: number源码

角的数量，为 3 到 60 之间的整数。

readonly style: VisualStyle源码

interface StarNode extends FramedNodeBase

自 0.12.0源码

星形，其外顶点和内顶点经缩放以填满 frame。

readonly type: "shape"源码

readonly shape: "star"源码

readonly pointCount: number源码

外顶点的数量，为 3 到 60 之间的整数。

readonly innerRadius: number源码

内顶点的距离，以外半径的比例表示，范围为 0 到 1。

readonly style: VisualStyle源码

interface LineNode extends FramedNodeBase

自 0.12.0源码

单条直线描边。与 Figma 一样，其 frame 高度为零：直线从 frame 局部坐标 (0, 0) 延伸到 (width, 0)，旋转使其绕 frame 中心转动。箭头就是带有箭头端点的直线。

readonly type: "shape"源码

readonly shape: "line"源码

readonly style: VisualStyle源码

readonly startCap: StrokeCap源码

readonly endCap: StrokeCap源码

interface PathNode extends NodeBase

源码

可编辑的矢量形状。与其他形状不同，它没有 frame 或旋转：transform 将矢量网络放置到父节点中，其边界由变换后的网络推导得出（见 getNodeBounds）。

readonly type: "shape"源码

readonly shape: "path"源码

readonly vectorNetwork: VectorNetwork自 0.2.0源码

路径的几何形状。

readonly transform: TransformMatrix源码

将网络坐标映射到父节点的坐标系。

readonly style: VisualStyle源码

readonly startCap?: StrokeCap自 0.22.0源码

The end points of an open path whose segments form one chain, each in order from the end of the one before (see openPathChainEnds): the start cap sits on the first segment’s start and the end cap on the last segment’s end, the same styles a line has. Omitted is round, which every path drew before 0.22.0. Closed paths and paths with branches or several chains ignore them, and so does a path with an inside or outside stroke.

readonly endCap?: StrokeCap自 0.22.0源码

interface ImageNode extends FramedNodeBase

源码

放置的图片。像素数据存放在 ImageAsset 中。

readonly type: "image"源码

readonly assetId: AssetId源码

必须指向一个类型为 image 的资源。

readonly fit: MediaFit源码

readonly crop?: Rect源码

要显示的源图片部分，以源像素表示。

readonly alt: string源码

用于无障碍访问的替代文本；可以为空。

interface VideoNode extends FramedNodeBase

源码

放置的视频。文件存放在 VideoAsset 中。

readonly type: "video"源码

readonly assetId: AssetId源码

必须指向一个类型为 video 的资源。

readonly fit: MediaFit源码

readonly crop?: Rect源码

要显示的视频画面部分，以源像素表示。

readonly alt: string源码

用于无障碍访问的替代文本；可以为空。

type MediaFit = "contain" | "cover" | "fill"

源码

图片或视频如何填满其 frame，与 CSS object-fit 相同。

interface ConnectorNode extends FramedNodeBase

源码

两点之间带描边的直线或箭头，每个端点都可以选择连接到某个节点。

readonly type: "connector"源码

readonly start: ConnectorEndpoint源码

readonly end: ConnectorEndpoint源码

readonly routing: "straight" | "elbow" | "curve"源码

readonly stroke: Stroke源码

readonly startCap: StrokeCap自 0.20.0源码

The end styles, the same set a line has (STROKE_CAPS). Before 0.20.0 a connector had only "none", "arrow" and "dot"; loading an older document turns "arrow" into "triangle-arrow" and "dot" into "circle-arrow".

readonly endCap: StrokeCap源码

readonly cornerRadius?: number自 0.21.0源码

How far, in pixels, each bend of an elbow connector is rounded, as Figma’s ConnectorNode.cornerRadius. A bend never rounds past half of either part of the line it joins, so a short part keeps a smaller curve. The ends and end styles are not rounded. Straight and curved connectors have no bends and ignore it. Missing means 0: sharp bends. Not negative.

readonly cornerSmoothing?: number自 0.21.0源码

How far each rounded bend of an elbow connector eases into the line, from 0 (a circular arc) to 1 (a continuous curve), the same fraction as a rectangle’s NodeVisualStyle.cornerSmoothing and drawn the same way. A smoothed bend takes up to (1 + cornerSmoothing) * cornerRadius of each part of the line it joins, capped at half of the shorter part, which also caps the smoothing. It has no effect without a corner radius, or on straight and curved connectors. Figma’s ConnectorNode has no smoothing; this extends it. Missing means 0.

interface ConnectorEndpoint

源码

译文已过期

One end of a ConnectorNode.

An end with nodeId attaches to that layer, and the page compiler places it from the layer’s frame each time, so it follows the layer when the layer moves or resizes. Where on the layer it goes is set by at most one of:

• side: the middle of that side, and an elbow connector leaves the layer at a right angle to it. Figma calls this a magnet (TOP, RIGHT, BOTTOM or LEFT in the plugin API’s ConnectorEndpointConnectedWithMagnet). On an ellipse, polygon or star the end is where the shape’s outline meets the line from its centre toward that side, so it sits on the drawn shape.
• anchor: a corner or edge middle of a polygon, star or ellipse arc (ConnectorAnchor); the end leaves along the outline’s outward direction there.
• point: a fixed point on the layer, as FigJam places an end dropped with Command or Ctrl held (ConnectorEndpointConnectedWithPosition). Figma stores it in the layer’s pixels; here it is a fraction of the layer’s width and height, so the point keeps its place when the layer resizes.

With none of them (Figma’s AUTO magnet), the end goes where the layer’s outline faces the other end. x and y are the end’s position in the connector’s frame; for an attached end they record where it was last placed and are replaced when the connector is drawn.

readonly nodeId?: NodeId源码

此端连接的节点。它必须与连接线位于同一页面。

readonly x: number源码

readonly y: number源码

readonly side?: ConnectorSide自 0.20.0源码

The side of the attached layer this end is pinned to. Needs nodeId, and cannot be set together with point or anchor.

readonly anchor?: ConnectorAnchor自 0.20.0源码

The key point on the attached shape’s outline this end is pinned to. Needs nodeId, and cannot be set together with side or point.

readonly point?: { readonly x: number; readonly y: number }自 0.20.0源码

The point on the attached layer this end is fixed to, as fractions of the layer’s width (x) and height (y) from its top-left corner: { x: 1, y: 0.5 } is the middle of the right side. Each fraction is between 0 and 1. Needs nodeId, and cannot be set together with side or anchor.

type ConnectorSide = "top" | "right" | "bottom" | "left"

自 0.20.0源码

A side of a layer that an attached connector end is pinned to.

interface ConnectorAnchor

自 0.20.0源码

A key point on a shape’s outline that an attached connector end is pinned to, found from the shape’s geometry each time the connector is drawn, so the end follows the shape when it moves, resizes or changes its points.

• vertex: corner index of the outline, counted as polygonPoints and starPoints list them (clockwise from the top point; a star’s outer tips are the even indices). On an ellipse arc, vertex 0 is where the arc starts and vertex 1 where it ends, on the outer rim.
• edge: the middle of the outline’s edge from vertex index to the next.

An index the shape does not have (for example after a polygon loses points), or an anchor on a layer without such points, leaves the end automatic, as if it had no anchor.

readonly kind: "vertex" | "edge"源码

readonly index: number源码

A whole number from 0.

type BlendMode = (typeof BLEND_MODES)[number]

源码

const BLEND_MODES: readonly [ "normal", "darken", "multiply", "color-burn", "lighten", "screen", "color-dodge", "overlay", "soft-light", "hard-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity" ]

自 0.8.0源码

可分离与不可分离的合成模式，采用 CSS mix-blend-mode 的术语。

画框可以用自动布局来定位子节点，而不必手动摆放。堆叠把子节点排成一行或一列，并可换到多行；网格把子节点放进等宽的列中。画框在每个轴上选择固定（Fixed）或包裹内容（Hug），而每个子节点在 NodeResizing 中选择是否填充父节点给出的空间，以及适用的尺寸限制。这些都遵循 Figma 的自动布局，包括它的规则：当某个堆叠子节点在某个轴上填充时，画框在该轴上停止包裹内容。

type Layout = AbsoluteLayout | AutoLayout

源码

interface AbsoluteLayout

源码

readonly kind: "absolute"源码

type AutoLayout = StackAutoLayout | GridAutoLayout

源码

interface StackAutoLayout extends AutoLayoutConstraints

源码

横排（"horizontal"）或竖排（"vertical"）的自动布局。主轴沿堆叠方向，交叉轴与之垂直。

readonly kind: "vertical" | "horizontal"源码

readonly gap: number源码

子节点在主轴上的间距。

readonly padding: LayoutPadding源码

readonly align: "start" | "center" | "end"源码

子节点在所在行内的交叉轴位置。子节点要横跨整行，需在 FramedNodeBase.resizing 中设置交叉轴填充。schema 0.15.0 移除了作用于整个画框的 "stretch"。

readonly justify: | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly"源码

子节点在每一行内沿主轴如何分布。space-* 取值用一个永不为负的自动间距代替 gap：space-between 把所有剩余空间放在子节点之间（只有一个子节点时它位于起点），space-around 在第一个子节点之前和最后一个之后各放半个间距，space-evenly 则各放一整个间距（两者都把单个子节点居中）。子节点溢出时，三者都从起点依次排列。schema 0.15.0 新增了 "space-around" 和 "space-evenly"。

readonly wrap?: boolean自 0.15.0源码

把放不下的子节点移到新的一行：横向堆叠换到新行，竖向堆叠换到新列。省略表示只有一行。

readonly wrapGap?: number自 0.15.0源码

换行后各行之间的间距。省略表示与 gap 相同。wrap 关闭时保留但不使用。

readonly alignContent?: "auto" | "space-between"自 0.15.0源码

换行后的各行如何分配交叉轴。"auto"（默认）按 align 排列各行，或在每个子节点都在交叉轴上填充时，把剩余空间平均分给各行；"space-between" 用永不为负的自动间距把各行分开。wrap 关闭时保留但不使用。

interface GridAutoLayout extends AutoLayoutConstraints

源码

readonly kind: "grid"源码

readonly columns: number源码

readonly columnGap: number源码

readonly rowGap: number源码

readonly padding: LayoutPadding源码

interface AutoLayoutConstraints

源码

画框自身的尺寸设置。尺寸限制已在 0.15.0 中移到 FramedNodeBase.resizing。

readonly widthSizing: LayoutSizing源码

"hug" 让画框在这个轴上按内容定尺寸。在堆叠中，若有子节点在同一轴上填充，画框改为保持其存储的尺寸，这与 Figma 在这种情况下停止包裹内容一致。网格仍保持包裹内容：其填充子节点占据所在的单元格，而单元格的尺寸由其他子节点决定。

readonly heightSizing: LayoutSizing源码

interface LayoutPadding

源码

readonly top: number源码

readonly right: number源码

readonly bottom: number源码

readonly left: number源码

type LayoutSizing = "fixed" | "hug"

源码

自动布局画框在一个轴上如何确定自身尺寸：保持存储的尺寸（Fixed，固定），或包裹内容（Hug）。填充父节点则在子节点上用 FramedNodeBase.resizing 设置。

interface NodeResizing

自 0.15.0源码

自动布局可以如何让节点的尺寸不同于其存储的画框。

把 width 或 height 设为 "fill"，会让堆叠或网格自动布局的子节点在该轴上占据父节点给出的空间：同一行中的填充子节点平分该行主轴上的剩余空间，交叉轴上的填充占据该行的交叉尺寸，网格子节点填满其单元格。这个标志在自动布局之外、对旋转的节点、编组和连接线都不起作用。节点不能在它包裹自身内容的轴上填充（自动布局画框的 "hug" 尺寸，或文本和代码节点的 autoResize）。

尺寸限制约束自动布局给节点的尺寸：填充子节点分得的空间，以及自动布局画框自身的包裹内容或固定尺寸。

readonly width?: "fill"源码

readonly height?: "fill"源码

readonly minWidth?: number源码

readonly maxWidth?: number源码

readonly minHeight?: number源码

readonly maxHeight?: number源码

译文已过期

A few rules are shared with the editor’s drop slots so both break a wrapping row or column at the same children. stackLineBreaks splits the children into lines from the sizes stackLineBreakSize gives; fillsAxis and canFillParent say when a child takes a Fill size.

type LayoutAxis = "width" | "height"

源码

节点的一个尺寸轴：宽度或高度。

function nodeResizing(node: SceneNode): NodeResizing | undefined

源码

节点的填充标志和尺寸限制；路径返回 undefined。

function canFillParent(node: SceneNode): boolean

源码

自动布局能否给 node 一个填充（Fill）尺寸：它的框必须就是它的画框（不是路径，没有旋转），并且它不能是编组或连接线，因为它们的尺寸来自其他节点。

function fillsAxis(node: SceneNode, axis: LayoutAxis): boolean

源码

node 是否在 axis 上填充其自动布局父节点。

function stackLineBreakSize(node: SceneNode, mainAxis: LayoutAxis): number

源码

拆分行时堆叠子节点所取的主轴尺寸：其框的尺寸，或在它于主轴上填充时取其最小尺寸。

function stackLineBreaks( layout: Pick<StackAutoLayout, "gap" | "justify" | "wrap">, availableMain: number, sizes: readonly number[] ): number[][]

源码

像 Figma 的换行那样把一行或一列拆分成多行：子节点保持顺序，一个子节点会超出 availableMain（画框去掉内边距后的主轴尺寸）时就开始新的一行。自动间距（between、around 或 evenly）在这里按零计算。不换行时只有一行。

sizes 是 stackLineBreakSize 给出的子节点主轴尺寸。按行分组返回子节点的索引；没有子节点时没有行。

The layout itself runs whenever the editor edits the document: withAutoLayoutOperations adds the node replacements that keep every affected auto layout frame laid out. layoutFrameTree lays out one frame and the frames inside it, and applyFrameLayout places one frame’s children. createFrameLayout makes a new layout of a given kind.

function withAutoLayoutOperations( document: DesignDocument, operations: readonly DocumentOperation[] ): readonly DocumentOperation[]

源码

operations followed by the node replacements that keep auto layout frames laid out after them: frames the operations touch are laid out again, deepest first, and nodes the operations leave filling a parent without auto layout become Fixed. In a document with components, a text whose content is computed is first sized for the text it shows (fitComputedTextContent), and the component cascade then runs (cascadeComponentChanges): instances of changed components are refitted to their hugging size, their dead override keys dropped, and their ancestors laid out again, nested components first. The operations come back unchanged when nothing needs it.

function layoutFrameTree( nodes: Record<string, SceneNode>, frameId: NodeId, changed: Set<NodeId> = new Set() ): Set<NodeId>

源码

Lays out the auto layout frame frameId in nodes (changed in place), then lays out again each child frame whose size it changed, so Fill sizes reach nested auto layouts, and each auto layout frame that constraints resized. Returns the IDs of every node it changed. The caller lays out hugging descendants first, deepest first, so their sizes are known.

function applyFrameLayout( frame: FrameNode, childNodes: readonly SceneNode[], layout: Layout ): AppliedFrameLayout

源码

Lays out one frame’s direct children with layout and returns the frame with its new size and the moved or resized children. Child frames are not laid out again here; layoutFrameTree does that.

interface AppliedFrameLayout

源码

A frame and its children after applyFrameLayout has placed them.

readonly frame: FrameNode源码

readonly children: ReadonlyMap<NodeId, SceneNode>源码

function createFrameLayout( kind: Layout["kind"], gap = DEFAULT_AUTO_LAYOUT_GAP ): Layout

源码

A new layout of the given kind. Auto layouts start with a fixed width, a hugged height, no padding and gap between children (a grid uses it for both its column and row gaps).

function frameLayoutGap(layout: Layout): number

源码

The gap a layout keeps between children: a stack’s gap or a grid’s column gap. Without an auto layout it is DEFAULT_AUTO_LAYOUT_GAP.

const DEFAULT_AUTO_LAYOUT_GAP: 24

源码

The gap, in pixels, a new auto layout starts with.

Resize constraints say how a layer follows its frame when the frame is resized, with Figma’s five options on each axis: Left, Right, Left and right, Center and Scale horizontally, and their vertical counterparts. They apply to the children of frames without auto layout and to the absolute children of auto layout frames (layoutPositioning: "absolute", Figma’s “Ignore auto layout”), which the layout leaves out of its flow. constrainChildren places a frame’s children for a change of its size; the editor’s frame resize, the selection box and group resizing all use it, and so does layoutFrameTree when a layout changes a frame’s size. scaleLayerInParent scales one layer the way a resized box does.

interface ResizeConstraints

自 0.25.0源码

A layer’s resize constraints, Figma’s five options on each axis. They act on the layer’s axis-aligned bounds in its frame (see constrainChildren).

readonly horizontal: HorizontalConstraint源码

readonly vertical: VerticalConstraint源码

type HorizontalConstraint = "left" | "right" | "left-right" | "center" | "scale"

自 0.25.0源码

How a layer’s horizontal position and width follow its frame’s width. "left", "right" and "center" keep the width and the distance to the left edge, the right edge or the center line; "left-right" keeps both distances, so the width changes with the frame; "scale" keeps the layer’s position and width as shares of the frame’s width.

type VerticalConstraint = "top" | "bottom" | "top-bottom" | "center" | "scale"

自 0.25.0源码

How a layer’s vertical position and height follow its frame’s height; the vertical counterpart of HorizontalConstraint.

const DEFAULT_RESIZE_CONSTRAINTS: ResizeConstraints

自 0.25.0源码

The constraints a layer has when it stores none: Left and Top, Figma’s default, which keeps the layer’s position and size.

function nodeConstraints(node: SceneNode): ResizeConstraints

自 0.25.0源码

A layer’s constraints, with DEFAULT_RESIZE_CONSTRAINTS when it stores none.

function followsConstraints(parent: FrameNode, child: SceneNode): boolean

自 0.25.0源码

Whether a child of parent is placed by its constraints when parent resizes: every child of a frame without auto layout, and only the absolute children (layoutPositioning: "absolute") of an auto layout frame, whose other children the layout places.

function constrainChildren( nodes: NodeRecord, parentId: NodeId, from: FrameSize, to: FrameSize ): readonly SceneNode[]

自 0.25.0源码

Places each child of the frame parentId for a resize of that frame from from to to, by the child’s constraints (NodeBase.constraints), as Figma does when a frame is resized. nodes holds the frame and its descendants before the change; the frame’s own record is only read for its children and layout, so it may hold either size.

• Constraints act on each child’s axis-aligned bounds in the frame. A child whose bounds change size is resized like a layer in a resized selection box (scaleLayerInParent): a rotated or flipped layer keeps its rotation and flips, and a frame’s own children follow by their constraints in turn.
• An auto layout frame’s flow children are left to its layout; only its absolute children move (followsConstraints). A child auto layout frame whose size changes is not laid out again here: the caller does that, as layoutFrameTree or the editor’s auto layout step do.
• A group has no constraints of its own. The layers of an upright group (not rotated or flipped) are placed one by one by their own constraints relative to the frame, and the group is fitted to them again. A rotated or flipped group moves and resizes as one layer, by the option its layers share on each axis, or Left or Top when they differ.

Returns every changed node, children before descendants, each at most once. An unchanged size returns an empty list.

The instance resolver calls this to lay out a resized instance whose component root has no auto layout: constrainChildren(nodes, rootId, componentRoot.frame, instance.frame), writing the result into its node record before it lays out auto layout frames with layoutFrameTree.

interface FrameSize

自 0.25.0源码

A frame’s size before or after a resize. Constraints only need sizes: children are placed relative to their frame’s top-left corner, so where the frame moves on the page does not matter.

readonly width: number源码

readonly height: number源码

function scaleLayerInParent( nodes: NodeRecord, node: SceneNode, scaleX: number, scaleY: number ): readonly SceneNode[]

自 0.25.0源码

Scales a layer’s position and size by (scaleX, scaleY) about its parent’s origin, in the parent’s coordinates, the way resizing a group or a selection box moves the layers inside it. Positions, sizes and vector geometry scale; stroke widths, corner radii, effects and font sizes do not.

• A rotated layer keeps its rotation and takes the size whose bounds are its old bounds scaled, when the rotation allows it (see the source of rotatedSize for the fallback near 45 degrees).
• A group’s descendants scale with it.
• A frame’s box scales and its children follow by their constraints (constrainChildren); an auto layout places its other children later.
• Text or code that grew with its content gets a fixed size.

Returns the layer followed by every changed descendant. nodes must hold the layer’s descendants.

The sizing helpers read and change a node’s Fixed, Hug or Fill sizing on each axis, keeping the rules of Figma’s resizing menu: only auto layout frames, instances of a component with auto layout, text and code can hug, and only children of an auto layout frame can fill. nodeAxisSizing is the one reader and withAxisSizing the one writer of Fixed and Hug: an instance’s sizing is its override of its component root’s sizing, so both take the document. withManualSize is the one place a size changed by hand (a resize, the Scale tool, a size variable) gets the sizing that keeps it: commands and drag previews pass their node through it.

type AxisSizing = "fixed" | "hug" | "fill"

源码

How a node is sized on one axis, as the width and height menus show it (Figma’s resizing menu): a stored size, its content’s size, or the space its auto layout parent gives it.

type SizingAxis = "width" | "height"

源码

The axis a sizing applies to.

function nodeAxisSizing( document: DesignDocument, node: SceneNode, axis: SizingAxis ): AxisSizing

源码

The node’s sizing on an axis: the one reader of it. Nodes that cannot hug or fill are Fixed. An auto layout frame’s is its layout’s; text and code read their automatic sizing. An instance has no layout of its own: its sizing is its override of its component root’s sizing (LayerSizingOverride, stored under the root’s path), and the root’s own sizing where it has none, which is what the instance resolver lays it out with. Fill is the node’s own resizing for every kind of node.

function canHugAxis(document: DesignDocument, node: SceneNode): boolean

源码

Auto layout frames hug their children, text and code blocks hug their content, and an instance hugs as its component root does: only when the root has auto layout.

function canFillAxis( document: DesignDocument, node: SceneNode, axis: SizingAxis, parent: SceneNode | undefined = parentNodeOf(document, node.id) ): boolean

源码

Whether the node can fill its parent on an axis: it must be a child of an auto layout frame, and not a path, group or connector, a rotated node, or (for the height) a line, whose height is always zero. Figma offers Fill container only on children of auto layout frames.

function withoutFill(node: SceneNode, axis: SizingAxis): SceneNode

源码

The node without a Fill flag on the axis.

function withoutAnyFill(node: SceneNode): SceneNode

源码

The node without any Fill flag, keeping its size limits.

function withAxisSizing( document: DesignDocument, node: SceneNode, axis: SizingAxis, sizing: "fixed" | "hug" ): SceneNode

源码

The node with its sizing on axis set to Fixed or Hug: the one writer of it, the counterpart of nodeAxisSizing. An auto layout frame stores it in its layout; an instance stores it as its override of its component root’s sizing. A node that has neither (a shape, a frame without auto layout, an instance of a component without auto layout) is returned as it is, and so is text or code, whose automatic sizing has rules of its own (sizingReplacements). Fill is not touched: see withoutFill.

type ManualSizeChange = "resize" | "scale" | "variable"

源码

How a layer’s size was changed by hand, as opposed to by a layout, a constraint or its content:

• "resize": a resize handle, a typed W or H, the box around a selection, a moved end of a line.
• "scale": the Scale tool, on one layer or on the box around a selection.
• "variable": a size variable bound to W or H.

function withManualSize( document: DesignDocument, before: SceneNode, after: SceneNode, change: ManualSizeChange, axes: readonly SizingAxis[] = changedSizeAxes(before, after) ): SceneNode

源码

after, the node before with a size changed by hand, with the sizing that change leaves: the one place the rule “a size set by hand is kept” is written. Every command that changes a size by hand, and every preview of one, passes its node through here, so the release commits what the drag drew and the next layout does not undo it.

• A resize, on each axis whose size changed: Fill and Hug become Fixed (an instance’s Hug too) and a size variable on the axis is dropped.
• The Scale tool, on each axis whose size changed: an instance’s Hug becomes Fixed, since its layers are its component’s and do not scale. A frame keeps Hug: its children scaled with it, so it hugs the scaled size. Fill and a size variable are left as they are.
• A size variable: Fill and Hug become Fixed on axes, which the caller names because the variable’s value may equal the size the node has.

A size that a layout, a constraint or the node’s content gives is not a change by hand and does not come here: the sizing stays.

function withManualSizes( document: DesignDocument, nodes: readonly SceneNode[], change: ManualSizeChange, only?: ReadonlySet<NodeId> ): readonly SceneNode[]

源码

nodes, the output of a resize or a scale of layers of document, each passed through withManualSize against the node it replaces. only limits the rule to the layers the user changed, where the others were only carried along (the descendants of a resized group or selection).

function withoutStretchWhereHugging( document: DesignDocument, node: SceneNode ): SceneNode

源码

The node without a stretching constraint on an axis it hugs: what the rule “no node hugs and stretches on the same axis” does to one node. Commands do not call it; stretchWhereHuggingReplacements applies the rule to every edit, on the axes the edit brings to break it.

function stretchWhereHuggingReplacements( previous: DesignDocument, next: DesignDocument, changedNodeIds: ReadonlySet<NodeId> ): readonly SceneNode[]

源码

The one place the rule “no node has a stretching constraint (Left and right, Top and bottom, Scale) on an axis whose sizing is Hug” is enforced. applyOperations calls it for every batch of operations, so every command, preview, paste, undo-able edit and replayed commit passes through it and no command applies the rule itself.

next is previous after the batch and changedNodeIds the nodes the batch wrote. The nodes looked at are the ones whose sizing or constraints can have changed:

• every changed node that still exists (its own layout, automatic text sizing, overrides, component or constraints may be new);
• every instance, at any depth and on any page or inside any component, of a component whose root or root sizing changed. An instance with a sizing override on the axis keeps its own sizing, so only the ones that follow the component can lose a constraint.

Only a break of the rule that the batch brings is removed: an axis of a node that hugs and stretches in next and did not in previous (the node is new, or it kept the rule on that axis there). A node that already hugged and stretched on an axis in previous, as a document stored before the rule existed can hold, is left on that axis exactly as the batch leaves it, so a batch that does not touch the break, or keeps it, can be reversed exactly.

Returned are those nodes, each with the stretching constraint turned into Left or Top on the axes that newly break the rule, in a stable order (the batch’s own, then the document’s). The sizing is never changed here, so one pass is enough. The cost is two sizing reads per changed node, two more for one that breaks the rule, and one comparison per component; the walk over every node of the document happens only for a batch that changed a component root’s sizing.

function sizingReplacements( document: DesignDocument, nodeIds: readonly NodeId[], axis: SizingAxis, sizing: AxisSizing ): ReadonlyMap<NodeId, SceneNode>

源码

The nodes that change when nodeIds are set to sizing on axis, by id. Nodes that cannot take that sizing are left out.

An instance follows every rule here as an auto layout frame does, through nodeAxisSizing and withAxisSizing, except the last part of the Hug rule: its layers are its component’s, so their Fill is not changed.

• Fill turns the node’s own Hug on the axis into Fixed (text and code stop sizing that axis to their content), drops a size variable on the axis, and turns a hugging stack parent Fixed on the axis, as Figma does: “If any child objects within an auto layout frame are set to Fill container, the parent frame will no longer hug contents and become Fixed for the axis.”
• Hug on an auto layout frame turns its stack children that fill the axis into Fixed. A grid keeps its Fill children: they take their cell.
• Fixed and Hug drop the node’s own Fill on the axis.

Hug leaves a stretching constraint on the axis for applyOperations to turn into Left or Top, as it does after every edit (stretchWhereHuggingReplacements).

function resizingReplacements( document: DesignDocument, nodeId: NodeId, resizing: NodeResizing | undefined ): ReadonlyMap<NodeId, SceneNode>

源码

The nodes that change when a node’s Fill flags and size limits are replaced with resizing (undefined removes them all). A newly set Fill follows the same rules as choosing Fill container in the sizing menu.

function isAutoLayoutFrame(node: SceneNode | undefined): node is AutoLayoutFrame

源码

Whether the node is a frame with a stack or grid auto layout.

function parentNodeOf( document: DesignDocument, nodeId: NodeId ): SceneNode | undefined

源码

The container that holds the node, or undefined for a page’s top level node.

function documentWithNodes( document: DesignDocument, nodes: ReadonlyMap<NodeId, SceneNode> ): DesignDocument

源码

The document with nodes replacing their stored versions.

Paint、描边与样式

填充和描边接受一个 Paint：纯色、渐变或图片。每个 paint 都可以隐藏（visible: false），并可以与同一图层上位于其下方的 paint 混合（blendMode），与 Figma 相同；参见 PaintVisibility。VisualStyle 汇集了节点的填充、描边、圆角和效果。矩形和画框可以用 CornerRadii 单独设置每个角的圆角；styleCornerRadii 读取样式绘制时使用的四个半径。描边同样可以用 StrokeSides 给每条边单独设置粗细；strokeSideWeights 读取描边绘制时使用的四个粗细。

interface VisualStyle

源码

readonly styleId?: NodeStyleId源码

readonly fills?: readonly Paint[]源码

readonly strokes?: readonly Stroke[]自 0.5.0源码

在填充之后绘制的有序描边，第一项位于最底层。

readonly cornerRadius?: number源码

所有角共用的一个半径。矩形和画框在有 cornerRadii 时改用它；多边形、星形和路径用这个半径给每个顶点倒圆角。

readonly cornerRadii?: CornerRadii自 0.16.0源码

矩形和画框各自独立的圆角半径。存在时在这些节点上代替 cornerRadius；其他形状忽略它。编辑器写入此字段时会清除 cornerRadius，因此两者中只有一个描述圆角。

readonly cornerSmoothing?: number自 0.9.0源码

圆角平滑，取值从 0（圆形圆角）到 1（完全连续的曲率），与 Figma 相同。它只影响具有半径的圆角，每个平滑后的圆角最多占用 (1 + smoothing) * radius 的边长。

对于矩形，渲染器首先将半径 $r$ 和平滑度 $s$ 限制在预算 $B = \tfrac12 \min(w, h)$ 以内，然后计算圆角占用每条边的长度：

$$r' = \min(r, B), \qquad s' = \min\bigl(s, \max(0, B / r' - 1)\bigr), \qquad p = \min\bigl((1 + s')\,r',\ B\bigr)$$

沿边进入圆角时，先由一段三次曲线平缓地离开该边，再由半径为 $r'$ 的圆弧转过 $90(1 - s')$ 度，最后由一段镜像的三次曲线平缓地接入下一条边。设 $\beta = 45 s'$ 度，圆弧在每条边上覆盖 $\ell$，三次曲线的控制距离为

$$\ell = \sqrt{2}\, r' \sin\!\Bigl(\frac{90(1 - s')}{2}\Bigr), \quad c = r' \tan\!\Bigl(\frac{\beta}{2}\Bigr) \cos\beta, \quad d = c \tan\beta, \quad b = \frac{p - \ell - c - d}{3}, \quad a = 2b$$

因此 $a + b + c + d + \ell = p$。当 $s' = 0$ 时，它就是普通的四分之一圆。

readonly shadows?: readonly Shadow[]源码

readonly layerBlur?: number自 0.7.0源码

将节点及其后代作为一个图层整体应用的高斯模糊半径。

readonly backgroundBlur?: number自 0.7.0源码

对节点形状后方的所有内容应用的高斯模糊半径。

interface CornerRadii

自 0.16.0源码

矩形或画框四个角各自的半径，与 Figma 的 topLeftRadius、topRightRadius、bottomRightRadius 和 bottomLeftRadius 相同。每个半径都是非负的单位数；渲染器把每个半径限制在较短边的一半，与统一半径的限制相同，因此相邻的角不会重叠。

readonly topLeft: number源码

readonly topRight: number源码

readonly bottomRight: number源码

readonly bottomLeft: number源码

const CORNER_KEYS: readonly ["topLeft", "topRight", "bottomRight", "bottomLeft"]

源码

按 Figma 面板顺序排列的四个角：左上、右上、右下、左下。

type CornerKey = (typeof CORNER_KEYS)[number]

源码

矩形或画框的一个角，名称与 CornerRadii 中的相同。

function styleCornerRadii( style: | Pick<VisualStyle, "cornerRadius" | "cornerRadii"> | undefined ): CornerRadii

源码

矩形或画框绘制时使用的半径：有 cornerRadii 时取它，否则每个角都取统一的 cornerRadius（缺省时为零）。

function uniformCornerRadii(radius: number): CornerRadii

源码

四个相等的半径。

function cornerRadiiAreUniform(radii: CornerRadii): boolean

源码

四个角半径相同时为 true。

function cornerRadiiAreRounded(radii: CornerRadii): boolean

源码

任一角有圆角时为 true。

function scaleCornerRadii(radii: CornerRadii, factor: number): CornerRadii

源码

把每个半径乘以 factor，与缩放工具的做法相同。

type Paint = SolidPaint | GradientPaint | ImagePaint

源码

interface PaintVisibility

自 0.18.0源码

所有 paint 共有的字段，与 Figma 的 Paint 相同：是否显示，以及如何与同一图层上位于其下方的 paint 混合。

readonly visible?: boolean自 0.18.0源码

为 false 时隐藏该 paint 而不删除它，如同 Figma 填充和描边列表中的眼睛按钮。默认为 true。

readonly blendMode?: BlendMode自 0.18.0源码

该 paint 如何与同一图层上位于其下方的 paint 混合：填充下方的填充，或描边下方的填充和描边。使用与节点 blendMode 相同的模式。默认为 "normal"。

interface SolidPaint extends PaintVisibility

源码

readonly kind: "solid"源码

readonly color: string源码

readonly opacity?: number源码

type GradientPaint = | LinearGradientPaint | RadialGradientPaint | AngularGradientPaint

源码

interface LinearGradientPaint extends PaintVisibility

源码

readonly kind: "linear-gradient"源码

readonly angle: number源码

readonly stops: readonly GradientStop[]源码

readonly opacity?: number源码

interface RadialGradientPaint extends PaintVisibility

自 0.6.0源码

从中心点向外扩散的渐变。

readonly kind: "radial-gradient"源码

readonly center?: PaintAnchor源码

默认为边界的中心。

readonly radius?: PaintAnchor源码

椭圆半径，以边界的比例表示；默认为宽度和高度的一半。

readonly stops: readonly GradientStop[]源码

readonly opacity?: number源码

interface AngularGradientPaint extends PaintVisibility

自 0.6.0源码

围绕中心点旋转扫过的渐变。

readonly kind: "angular-gradient"源码

readonly center?: PaintAnchor源码

默认为边界框的中心。

readonly angle?: number源码

起始角度，单位为度，从 x 轴正方向顺时针计算；默认为 0。

readonly stops: readonly GradientStop[]源码

readonly opacity?: number源码

interface GradientStop

源码

readonly offset: number源码

readonly color: string源码

interface PaintAnchor

自 0.6.0源码

被绘制形状边界内的一个点，以其宽度和高度的比例表示。

readonly x: number源码

readonly y: number源码

interface ImagePaint extends PaintVisibility

自 0.6.0源码

使用图片资源进行绘制。

readonly kind: "image"源码

readonly assetId: AssetId源码

readonly fit?: ImagePaintFit源码

默认为 cover。

readonly opacity?: number源码

type ImagePaintFit = "contain" | "cover" | "fill"

自 0.6.0源码

图片绘制如何缩放到被绘制形状的边界中。

interface Stroke

源码

readonly paint: Paint源码

readonly width: number源码

每条边的粗细。有 sides 时，编辑器让它保持为最大的一条边的粗细。

readonly dash?: readonly number[]源码

readonly position?: StrokePosition自 0.0.1源码

旧的操作或文档省略此字段时默认为 center。

readonly sides?: StrokeSides自 0.17.0源码

上、右、下、左四条边各自的粗细，在矩形和画框上代替 width。其他形状、连接线和代码块忽略它。粗细为 0 的边不绘制，粗细不同的边之间的角跟随形状的圆角。

readonly join?: StrokeJoin自 0.22.0源码

How the stroke turns a corner where two segments meet, as Figma’s strokeJoin. Omitted keeps what the layer drew before 0.22.0: round on paths, ellipses, polygons, stars, lines and connectors, and on rectangles drawn as paths (rounded or with gradient, image or several fills); miter on frames, other rectangles and code blocks. See defaultStrokeJoin. Rectangles and frames with side weights ignore it.

readonly miterAngle?: number自 0.22.0源码

The miter angle in degrees, as Figma’s “Miter angle” (the REST API’s strokeMiterAngle): a miter join whose corner is sharper than this is drawn beveled. Only a miter join uses it. It is more than 0 and at most 180; omitted is DEFAULT_STROKE_MITER_ANGLE, Figma’s default of about 28.96 degrees, which is a miter limit of 4 (limit = 1 / sin(angle / 2)).

readonly dashCap?: DashCap自 0.22.0源码

The ends of every dash of a dashed stroke, as Figma’s “Dash cap”. None stops a dash flat; round and square extend it by half the stroke width. Omitted keeps what the layer drew before 0.22.0: round on the layers whose join defaults to round, none on the others (see defaultDashCap). A solid stroke ignores it.

type StrokePosition = "center" | "inside" | "outside"

自 0.0.1源码

描边绘制在轮廓的哪一侧。

interface StrokeSides

自 0.17.0源码

矩形或画框四条边的描边粗细。Figma 每个节点只保存一组边粗细，这里则是 VisualStyle.strokes 中的每个描边各自携带一组。

readonly top: number源码

readonly right: number源码

readonly bottom: number源码

readonly left: number源码

const STROKE_SIDE_KEYS: readonly ["top", "right", "bottom", "left"]

源码

按 wire 格式和面板所用顺序排列的四条描边边。

type StrokeSideKey = (typeof STROKE_SIDE_KEYS)[number]

源码

描边的一条边，名称与 StrokeSides 中的相同。

function strokeSideWeights(stroke: Pick<Stroke, "width" | "sides">): StrokeSides

源码

描边绘制时每条边的粗细：sides，或四条边都取 width。

function widestStrokeSide(sides: StrokeSides): number

源码

四条边粗细中的最大值。

type StrokeCap = (typeof STROKE_CAPS)[number]

源码

const STROKE_CAPS: readonly [ "none", "round", "square", "line-arrow", "triangle-arrow", "reversed-triangle", "circle-arrow", "diamond-arrow" ]

自 0.12.0源码

译文已过期

Stroke end caps as Figma names them. None ends the stroke flat at the endpoint; round and square extend it by half the stroke width; the arrow caps draw a head in the stroke’s paint whose size follows the stroke width. Lines and connectors share these end styles and draw them the same way. Heads are always solid, even on a dashed stroke.

A stroke also sets how its corners join, how each dash of a dashed stroke ends, and the miter angle below which a miter join is beveled, as in Figma’s Stroke settings. A stroke that sets none of these draws as layers did before schema 0.22.0: defaultStrokeJoin and defaultDashCap give those defaults. Figma sets a miter angle where Skia takes a miter limit; miterLimitFromAngle and miterAngleFromLimit convert between them. Only an open path with one unbranched chain of segments takes end points (openPathChain).

type StrokeJoin = (typeof STROKE_JOINS)[number]

源码

How a stroke’s corners join: sharp (miter), cut off (bevel) or round.

const STROKE_JOINS: readonly ["miter", "bevel", "round"]

自 0.22.0源码

The stroke joins, as Figma names them (MITER, BEVEL, ROUND).

type DashCap = (typeof DASH_CAPS)[number]

源码

How each dash of a dashed stroke ends: flat at the dash (none), round or square.

const DASH_CAPS: readonly ["none", "round", "square"]

自 0.22.0源码

The ends of each dash of a dashed stroke, as in Figma’s Dash cap menu.

const DEFAULT_STROKE_MITER_ANGLE: number

自 0.22.0源码

Figma’s default miter angle in degrees, 2 * asin(1 / 4): the angle at which a miter limit of 4 bevels.

function strokeMiterAngle(stroke: Pick<Stroke, "miterAngle">): number

源码

A stroke’s miter angle, or Figma’s default when it has none.

function miterLimitFromAngle(angle: number): number

自 0.22.0源码

The miter limit a miter angle gives, as SVG and Skia use it: the longest a miter may be, as a multiple of half the stroke width, before the join is beveled. A corner sharper than angle degrees has a longer miter.

function miterAngleFromLimit(limit: number): number

源码

The miter angle, in degrees, that a miter limit of at least 1 gives.

function defaultStrokeJoin( node: SceneNode, style: VisualStyle | undefined ): StrokeJoin

自 0.22.0源码

The join a stroke of node draws with when it names none: what the layer drew before schema 0.22.0, round on layers stroked along a path and miter on layers stroked around a box. style is the layer’s resolved style.

function defaultDashCap( node: SceneNode, style: VisualStyle | undefined ): DashCap

自 0.22.0源码

The dash ends a dashed stroke of node draws with when it names none: round on layers stroked along a path and none on layers stroked around a box, as before schema 0.22.0.

const DEFAULT_PATH_STROKE_CAP: StrokeCap

源码

The end style an open path draws when it names none: round, as before 0.22.0.

function openPathChain(network: VectorNetwork): readonly VectorSegment[] | null

自 0.22.0源码

The segments of network when they form one open chain in order: each segment starts where the one before it ends, and the first segment’s start and the last segment’s end are each touched by that segment only. Only such a path takes end points (PathNode.startCap and endCap). Returns null for a closed, branched or empty network.

interface Shadow

源码

readonly kind?: ShadowKind自 0.7.0源码

旧文档省略此字段时默认为投影。

readonly x: number源码

readonly y: number源码

readonly blur: number源码

readonly spread: number源码

readonly color: string源码

type ShadowKind = "drop" | "inner"

自 0.7.0源码

投影绘制在节点后方；内阴影绘制在节点内部。

矢量网络

路径保存一个可编辑的矢量网络：顶点、顶点之间的线段、可选的切线约束，以及由有向环构成的填充区域。SVG 路径数据只是一种交换格式。

interface VectorNetwork

自 0.2.0源码

构成路径形状的顶点、线段和填充区域。

readonly vertices: readonly VectorVertex[]源码

readonly segments: readonly VectorSegment[]源码

readonly constraints?: readonly VectorTangentConstraint[]源码

省略时等同于空的约束列表。

readonly regions: readonly VectorRegion[]源码

按绘制顺序从后到前排列。

interface VectorVertex

自 0.2.0源码

VectorNetwork 中的一个点，使用网络坐标。

readonly id: VectorVertexId源码

readonly x: number源码

readonly y: number源码

readonly cornerRadius?: number自 0.10.0源码

该顶点处的圆角半径，覆盖节点样式的圆角半径。只有恰好连接两条线段的顶点才会被圆角化；渲染器会将半径限制为相邻较短线段长度的一半。

type VectorSegment = | VectorLineSegment | VectorCubicSegment | VectorEllipticalArcSegment

自 0.2.0源码

VectorNetwork 中两个顶点之间的边。

interface VectorLineSegment extends VectorSegmentBase

源码

readonly kind: "line"源码

interface VectorCubicSegment extends VectorSegmentBase

源码

readonly kind: "cubic"源码

readonly startHandle: VectorHandle源码

readonly endHandle: VectorHandle源码

interface VectorEllipticalArcSegment extends VectorSegmentBase

源码

用于精确迁移和 SVG 互转的兼容几何。编辑器最初只创建并直接编辑直线段和三次曲线段。

readonly kind: "elliptical-arc"源码

readonly radiusX: number源码

readonly radiusY: number源码

readonly xAxisRotation: number源码

readonly largeArc: boolean源码

readonly sweep: boolean源码

interface VectorHandle

源码

readonly id: VectorHandleId源码

readonly dx: number源码

控制点相对于线段端点的水平偏移。

readonly dy: number源码

控制点相对于线段端点的垂直偏移。

interface VectorTangentConstraint

源码

将交汇于同一顶点的两个端点控制柄关联起来。成对的约束让分支网络能够描述彼此独立的平滑延续，而不必为整个顶点指定一种含糊的平滑模式。

readonly vertexId: VectorVertexId源码

readonly handleIds: readonly [VectorHandleId, VectorHandleId]源码

readonly mode: "angle" | "angle-and-length"源码

仅镜像角度，或同时镜像角度和控制柄长度。

interface VectorRegion

自 0.2.0源码

VectorNetwork 中的一块填充区域，由线段组成的环围成。

readonly id: VectorRegionId源码

readonly windingRule: "nonzero" | "evenodd"源码

readonly loops: readonly VectorRegionLoop[]源码

readonly fills?: readonly Paint[]源码

省略时继承路径解析后的填充；空数组表示禁用填充。

interface VectorRegionLoop

源码

readonly segments: readonly VectorSegmentReference[]源码

readonly implicitClose?: true源码

为填充而闭合一条开放的链，但不添加或描边另一条边，与 SVG 对开放子路径的隐式填充闭合一致。

interface VectorSegmentReference

源码

readonly segmentId: VectorSegmentId源码

readonly direction: "forward" | "reverse"源码

type VectorWindingRule = VectorRegion["windingRule"]

源码

function vectorNetworkFromSvgPathData( pathData: string, windingRule: VectorWindingRule = "nonzero" ): VectorNetwork

源码

将 SVG 路径转换为确定性的、节点局部的矢量网络拓扑。相对命令、简写命令、水平命令、垂直命令和二次曲线命令会被规范化。椭圆弧保留为精确的兼容线段。

function vectorRegionToSvgPathData( network: VectorNetwork, region: VectorRegion ): string

源码

将一个可填充区域投影为 SVG 路径数据。

function vectorRegionPathDataById( network: VectorNetwork, regionId: string ): string | undefined

源码

投影第一个匹配的区域，适合保留了区域 ID 的调用方使用。

function vectorNetworkToStrokePathData(network: VectorNetwork): string

源码

将网络中的每条边各投影一次，用于与 SVG 兼容的描边和边界计算。区域环会尽可能保留作者绘制的链；其余的图边会成为独立的子路径，因为 SVG 无法表示分支连接。

function transformVectorPoint( x: number, y: number, transform: TransformMatrix ): { readonly x: number; readonly y: number }

源码

对一个点应用与 SVG 兼容的仿射矩阵。

function scaleVectorNetwork( network: VectorNetwork, scale: { readonly x: number; readonly y: number }, anchor: { readonly x: number; readonly y: number } ): VectorNetwork

源码

译文已过期

Scales a vector network in its own coordinate space around one anchor. An elliptical arc keeps its exact shape: see scaleEllipticalArc.

function assertValidPathData(pathData: string): void

源码

function isClosedPathData(pathData: string): boolean

源码

当每个子路径都闭合回到其起点时返回 true。

文本

文本节点保存由带样式的文本片段（run）组成的段落。每个文本片段指明一个主题 TextStyle，并可带有直接覆盖；段落则添加对齐、间距、缩进和列表标记。

interface TextParagraph

源码

TextNode 的一个段落：其文本片段加上段落级布局。

readonly runs: readonly TextRun[]源码

readonly direction?: "auto" | "ltr" | "rtl"源码

省略或显式设置为 auto 时，根据段落内容确定书写方向。

readonly align?: "left" | "center" | "right" | "justify"源码

readonly spacingBefore?: number源码

readonly spacingAfter?: number源码

readonly indent?: { readonly left: number; readonly right: number; readonly firstLine: number; }源码

readonly list?: { readonly kind: "ordered" | "unordered"; readonly level: number; readonly start?: number; readonly marker?: TextListMarker; }源码

使该段落成为列表项。

interface TextRun

源码

共享同一样式的一段文本。

readonly text: string源码

readonly styleId?: TextStyleId源码

主题文本样式；省略时为主题的 defaultTextStyleId。

readonly overrides?: TextStyleOverrides源码

在样式之上直接应用的格式。

interface TextListMarker

源码

显示在列表段落前的项目符号或编号，及其样式。

readonly text?: string源码

自定义标记文本；提供时不能为空。

readonly styleId?: TextStyleId源码

readonly overrides?: TextStyleOverrides源码

readonly gap?: number源码

标记与段落文本之间的间距。非负。

interface TextStyle

源码

readonly name: string源码

readonly fontFamily: string源码

readonly fontAssetId?: AssetId源码

readonly fontFallbackAssetIds?: readonly AssetId[]源码

在 fontAssetId 之后按顺序尝试的嵌入字体资源。

readonly language?: string源码

采用规范大小写的 BCP 47 语言标签，用于文本整形和断行。

readonly fontSize: number源码

readonly fontWeight: number源码

readonly lineHeight: number源码

readonly letterSpacing?: number源码

readonly color: string源码

readonly italic?: boolean源码

readonly underline?: boolean源码

readonly strikethrough?: boolean自 0.2.0源码

在文本中间绘制一条删除线。

readonly openTypeFeatures?: Readonly<Record<string, boolean | number>>自 0.2.0源码

相对于字体 OpenType 特性默认值的显式调整。

readonly fontVariations?: Readonly<Record<string, number>>自 0.2.0源码

显式指定的可变字体轴坐标，以四字节 OpenType 标签为键。

type TextStyleOverrides = & Partial<Omit<TextStyle, "name" | "fontAssetId" | "fontFallbackAssetIds">> & { readonly fontAssetId?: AssetId | null; readonly fontFallbackAssetIds?: readonly AssetId[]; }

自 0.2.1源码

在单个文本片段或列表标记上直接设置的文本格式。

字体资源需要明确的清除语义，因为省略某个覆盖项会继承所选主题样式。将主字体设为 null 会清除继承的 fontAssetId，而空的回退列表会清除继承的回退字体。

function assertTextStyleOverrides( value: unknown ): asserts value is TextStyleOverrides

源码

校验一个独立的、由作者设置的文本片段或列表标记的文本样式覆盖。

const MAX_TEXT_FONT_FALLBACK_ASSETS: 4095

源码

规范上限；保留文本还另外携带一个主字体资源。

type OpenTypeTag = Brand<string, "OpenTypeTag">

自 0.2.0源码

由四个字符组成的 OpenType 特性标签或轴标签。使用 openTypeTag 创建。

function openTypeTag(value: string): OpenTypeTag

源码

OpenType 特性标签和变体标签恰好由四个可打印的 ASCII 字节组成。

资源与字体

图片、视频和字体存放在文档的资源映射中，通过 AssetId 引用。字体来自 Google Fonts（GoogleFontsSource）或电脑上安装的字体（LocalFontSource）；本地字体只记下名称，其文件从不存入文档。

type Asset = ImageAsset | VideoAsset | FontAsset

源码

存储在 DesignDocument.assets 中的文件，通过其 kind 字段区分类型。

interface ImageAsset

源码

ImageNode 和 ImagePaint 使用的图片文件。

readonly id: AssetId源码

与该资源在 DesignDocument.assets 中的键一致。

readonly kind: "image"源码

readonly mimeType: string源码

readonly source: AssetSource源码

readonly width?: number源码

固有宽度（像素），已知时提供。

readonly height?: number源码

固有高度（像素），已知时提供。

interface VideoAsset

源码

VideoNode 使用的视频文件。

readonly id: AssetId源码

与该资源在 DesignDocument.assets 中的键一致。

readonly kind: "video"源码

readonly mimeType: string源码

readonly source: AssetSource源码

readonly width?: number源码

固有宽度（像素），已知时提供。

readonly height?: number源码

固有高度（像素），已知时提供。

interface FontAsset

源码

一个字体字面（font face），由 TextStyle.fontAssetId、TextStyle.fontFallbackAssetIds 和 CodeStyle.fontAssetId 引用。

readonly id: AssetId源码

与该资源在 DesignDocument.assets 中的键一致。

readonly kind: "font"源码

readonly mimeType: string源码

来源为 Google Fonts 时必须为 font/woff2，来源为本地字体时必须为 font/ttf 或 font/otf。

readonly source: FontAssetSource源码

readonly family: string源码

readonly weight: number源码

取值 1 到 1000，与 CSS font-weight 相同。

readonly style: "normal" | "italic" | "oblique"源码

type AssetSource = | { readonly kind: "url"; readonly url: string } | { readonly kind: "data"; readonly data: string }

源码

资源字节的来源：一个 URL，或存储在文档中的数据。

type FontAssetSource = AssetSource | GoogleFontsSource | LocalFontSource

自 0.13.0源码

字体文件的来源。

interface GoogleFontsSource

自 0.13.0源码

由 Google Fonts 以许多小型 WOFF2 文件提供的字体族，每个文件覆盖 Unicode 的一部分（由 Google Fonts CSS 中的 unicode-range 声明）。应用为每个内置字体族保存文件列表，只加载包含文档所用字符的文件。

readonly kind: "google-fonts"源码

readonly family: string源码

Google Fonts 字体族名称，例如“Noto Sans SC”。

interface LocalFontSource

自 0.19.0源码

选择该字体的人的电脑上安装的字体，通过浏览器的本地字体访问 API（window.queryLocalFonts()）读取。文档只记下字体名称而不携带字体文件，因此一台电脑上安装的字体列表不会进入文档；只有文档中文本用到的字体才会被记下。在没有安装该字体的电脑上，应用会把这段文本显示为使用了缺失的字体。

readonly kind: "local"源码

readonly family: string源码

已安装字体的字体族名称，例如 “Helvetica Neue”。

readonly postScriptName: string源码

字面的 PostScript 名称，用于在已安装的字体中识别它。

readonly styleName: string源码

已安装字体的样式名称，例如 “Bold Italic”。

readonly sha256: string源码

字面字体文件的 SHA-256，为 64 位小写十六进制数字。PostScript 名称相同但字节不同的已安装字面是该字体的另一个版本，排版结果可能不同。

主题、样式与变量

主题保存共享的节点样式、文本样式和代码样式、命名颜色以及变量集合。节点可以把受支持的属性绑定到变量；绑定的值同时也写在节点上，因此解除绑定后外观保持不变。

interface DocumentTheme

源码

文档共享的样式、命名颜色和变量。节点通过 ID 引用它们，并可以在其上保留直接覆盖的值。

readonly defaultTextStyleId: TextStyleId源码

未指定文本样式的文本片段所使用的文本样式。

readonly defaultCodeStyleId: CodeStyleId源码

未指定代码样式的代码节点所使用的代码样式。

readonly colors: Readonly<Record<string, string>>源码

命名颜色，以名称为键。

readonly nodeStyles: Readonly<Record<string, NodeStyle>>源码

readonly textStyles: Readonly<Record<string, TextStyle>>源码

readonly codeStyles: Readonly<Record<string, CodeStyle>>源码

readonly variableCollections?: Readonly<Record<string, VariableCollection>>源码

存储在本文档中的变量集合。跨文档共享的库有意不在支持范围内。

interface NodeStyle extends Omit<VisualStyle, "styleId">

源码

readonly name: string源码

interface CodeStyle

源码

提供调色板颜色，以及新建代码节点时使用的默认排版设置。

readonly name: string源码

readonly fontFamily: string源码

readonly fontAssetId?: AssetId源码

readonly fontSize: number源码

readonly lineHeight: number源码

readonly letterSpacing?: number自 0.1.2源码

字符之间额外增加的间距。

readonly background: string源码

readonly foreground: string源码

readonly syntax: Readonly<Record<string, string>>源码

interface VariableCollection

源码

readonly name: string源码

readonly defaultModeId: VariableModeId源码

readonly activeModeId?: VariableModeId源码

译文已过期

The mode this document shows where no page or layer chooses one (see VariableModes). It defaults to defaultModeId when omitted.

readonly modeOrder: readonly VariableModeId[]源码

readonly modes: Readonly<Record<string, VariableMode>>源码

readonly variables: Readonly<Record<string, VariableDefinition>>源码

interface VariableMode

源码

readonly name: string源码

type VariableDefinition = | VariableDefinitionBase<"color", string> | VariableDefinitionBase<"number", number> | VariableDefinitionBase<"string", string> | VariableDefinitionBase<"boolean", boolean>

源码

type VariableType = "color" | "number" | "string" | "boolean"

源码

type VariableValue = string | number | boolean

源码

type VariableProperty = | "visibility" | "opacity" | "width" | "height" | "cornerRadius" | "fillColor" | "strokeColor" | "strokeWidth" | "gap" | "wrapGap" | "columnGap" | "rowGap" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textColor"

源码

type VariableBindings = Readonly<Partial<Record<VariableProperty, VariableId>>>

源码

const VARIABLE_PROPERTY_TYPES: Readonly<Record<VariableProperty, VariableType>>

源码

interface LocatedVariable

源码

readonly collectionId: string源码

readonly collection: VariableCollection源码

readonly variableId: VariableId源码

readonly variable: VariableDefinition源码

function findVariable( theme: DocumentTheme, variableId: VariableId | string ): LocatedVariable | undefined

源码

function resolveVariableValue( theme: DocumentTheme, variableId: VariableId | string, modes?: VariableModes ): VariableValue | undefined

源码

The variable’s value in the mode its collection shows under modes (the modes in effect at a layer, see variableModesAt): the inherited choice, else the collection’s active mode, else its default mode. A mode without a value reads the default mode’s value.

function listVariablesForProperty( theme: DocumentTheme, property: VariableProperty ): readonly LocatedVariable[]

源码

function variableSupportsProperty( variable: VariableDefinition, property: VariableProperty ): boolean

源码

function nodeSupportsVariableProperty( node: SceneNode, property: VariableProperty ): boolean

源码

### Variable modes

A page, frame, group, component or instance can choose a mode per variable collection in variableModes. A collection it leaves out is Auto: the layer inherits the mode from its parent, up to the page, and a page without one uses the collection’s activeModeId. An instance’s modes apply to its component’s layers. Stored bound values are written for the active modes; the resolver and the page compiler write them again for layers under other modes.

type VariableModes = Readonly<Record<string, VariableModeId>>

自 0.26.0源码

A variable mode per collection, keyed by collection ID. A collection left out is Auto: the layer takes the mode of its parent, up to the page, and a page without one uses the collection’s activeModeId (else its defaultModeId). Omitted when empty.

function inheritVariableModes( parent: VariableModes | undefined, own: VariableModes | undefined ): VariableModes | undefined

自 0.26.0源码

The modes a layer uses: its parent’s modes with the layer’s own choices on top. A collection the layer leaves out (Auto) keeps the parent’s mode. Returns parent itself when own chooses nothing.

function variableModeFor( collectionId: string, collection: VariableCollection, modes?: VariableModes ): VariableModeId

自 0.26.0源码

The mode a collection shows under modes: the inherited choice, else the collection’s activeModeId, else its defaultModeId.

function variableModesAt( document: DesignDocument, nodeId: NodeId ): VariableModes | undefined

自 0.26.0源码

The modes in effect at a stored node: the page’s modes, then each ancestor’s, then the node’s own. A layer of a component (outside any page) starts from the document’s active modes at the component root; an instance applies its own modes on top when it is resolved. Undefined means every collection shows its active mode.

function inheritedVariableModes( document: DesignDocument, nodeId: NodeId ): VariableModes | undefined

自 0.26.0源码

The modes a stored node inherits: variableModesAt its parent, or the page’s modes for a page root. The node’s own choices are not included.

function locatedVariableValue( located: LocatedVariable, modes?: VariableModes ): VariableValue | undefined

自 0.26.0源码

resolveVariableValue for a variable already found with findVariable.

function applyVariableBindings( document: DesignDocument, node: SceneNode, modes: VariableModes | undefined ): SceneNode

自 0.26.0源码

Writes each of the node’s variable bindings in the modes modes into the bound field (see withVariableValue). A binding to a missing variable, or one the node cannot take, is skipped. A text layer that sizes itself is measured again. Returns node itself when it has no bindings.

function withVariableValue( theme: DocumentTheme, node: SceneNode, property: VariableProperty, value: VariableValue ): SceneNode

自 0.26.0源码

Writes one variable value into the node field it is bound to, the way the editor does when a variable is applied: a color drives the bottom fill or the first stroke, a radius sets every corner, a text property restyles every run. Sizes and opacity are clamped. A value of the wrong type changes nothing.

function bindingsDependOnModes( theme: DocumentTheme, node: SceneNode, modes: VariableModes | undefined ): boolean

自 0.26.0源码

Whether a node’s variable bindings read any collection in a mode other than its active mode under modes. Stored values are written for the active modes, so only such a node needs applyVariableBindings.

function variableModesKey( theme: DocumentTheme, modes: VariableModes | undefined ): string

自 0.26.0源码

A stable text form of modes for cache keys: the collections in sorted order. Modes that match a collection’s active mode are left out, so Auto and an explicit choice of the active mode give the same key.