This module provides several data structures to describe a Figma document and functions which operate on it.
A Figma document consists as tree of nodes. It starts with a
DocumentNode
, which has one or more CanvasNode
's children — called Pages in the UI —
which in turn contain nodes for frames, images, vector shapes, etc.
Represents a multiway tree made of Node
's.
String
A value which uniquely identifies a node in the document.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
}
The root node of a document.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
}
A single page in a document.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, clipContent : Basics.Bool
, layoutGrids : List Figma.Layout.LayoutGrid
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
}
A node of fixed size containing other nodes.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, clipContent : Basics.Bool
, layoutGrids : List Figma.Layout.LayoutGrid
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
}
A logical grouping of nodes.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
, fills : List Figma.Appearance.Paint
, strokes : List Figma.Appearance.Paint
, strokeWeight : Basics.Float
, strokeAlign : Figma.Appearance.StrokeAlign
, operation : BooleanOperation
}
A group that has a boolean operation (union, intersection, subtraction and exlusion) applied to it.
Type of boolean operation applied to the boolean group children.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
, fills : List Figma.Appearance.Paint
, strokes : List Figma.Appearance.Paint
, strokeWeight : Basics.Float
, strokeAlign : Figma.Appearance.StrokeAlign
}
A vector network, consisting of vertices and edges. This data structure is reused multiple times to represent lines, regular polygons, stars and other document elements.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
, fills : List Figma.Appearance.Paint
, strokes : List Figma.Appearance.Paint
, strokeWeight : Basics.Float
, strokeAlign : Figma.Appearance.StrokeAlign
, cornerRadius : Basics.Float
}
A rectangular vector shape.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, exportSettings : List ExportSetting
, boundingBox : Figma.Geometry.BoundingBox
}
A rectangular region of the canvas that can be exported.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
, fills : List Figma.Appearance.Paint
, strokes : List Figma.Appearance.Paint
, strokeWeight : Basics.Float
, strokeAlign : Figma.Appearance.StrokeAlign
, characters : String
, style : Figma.Appearance.TextStyle
, characterStyleOverrides : List Basics.Int
, styleOverrides : Dict Basics.Int Figma.Appearance.TextStyleOverride
}
A text box.
Frame
A reusable component node. It has the same fields of Frame
.
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
, blendMode : Figma.Appearance.BlendMode
, preserveRatio : Basics.Bool
, horizontalConstraint : Figma.Layout.LayoutHorizontalConstraint
, verticalConstraint : Figma.Layout.LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Basics.Float
, boundingBox : Figma.Geometry.BoundingBox
, clipContent : Basics.Bool
, layoutGrids : List Figma.Layout.LayoutGrid
, effects : List Figma.Appearance.Effect
, isMask : Basics.Bool
, componentId : NodeId
}
An instance of a component. Changes to the original component result in the same changes applied to the instance.
Sizing constraint for exports.
{ suffix : String
, format : ExportFormat
, constraint : ExportConstraint
}
Format and size to export an asset at.
Format to export an asset to.
singleton : Node -> Tree
Creates a singleton tree. This corresponds to tree v []
.
tree : Node -> List Tree -> Tree
Construct a tree from a node and a list of children.
node : Tree -> Node
Return the node of a tree.
children : Tree -> List Tree
Return the children of a tree as a list.
foldl : (Node -> b -> b) -> b -> Tree -> b
Fold over all the nodes in a tree, left to right, depth first.
toRosetree : Tree -> Tree Node
Return a Rosetree data structure, which can be used with the Elm Rosetree package.