matheus23 / elm-figma-api / Figma.Document

This module provides several data structures to describe a Figma document and functions which operate on it.

Document node types


type Node
    = DocumentNode Document
    | CanvasNode Canvas
    | FrameNode Frame
    | GroupNode Group
    | BooleanGroupNode BooleanGroup
    | VectorNode Vector
    | StarNode Vector
    | LineNode Vector
    | EllipseNode Vector
    | RegularPolygonNode Vector
    | RectangleNode Rectangle
    | SliceNode Slice
    | TextNode Text
    | ComponentNode Component
    | InstanceNode Instance

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.


type Tree

Represents a multiway tree made of Node's.


type alias NodeId =
String

A value which uniquely identifies a node in the document.


type alias Document =
{ id : NodeId
, name : String
, isVisible : Basics.Bool 
}

The root node of a document.


type alias Canvas =
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, backgroundColor : Color
, exportSettings : List ExportSetting 
}

A single page in a document.


type alias 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 
}

A node of fixed size containing other nodes.


type alias Group =
{ 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.


type alias BooleanGroup =
{ 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 BooleanOperation
    = UnionOperation
    | IntersectOperation
    | SubtractOperation
    | ExcludeOperation

Type of boolean operation applied to the boolean group children.


type alias Vector =
{ 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.


type alias Rectangle =
{ 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.


type alias Slice =
{ id : NodeId
, name : String
, isVisible : Basics.Bool
, exportSettings : List ExportSetting
, boundingBox : Figma.Geometry.BoundingBox 
}

A rectangular region of the canvas that can be exported.


type alias Text =
{ 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.


type alias Component =
Frame

A reusable component node. It has the same fields of Frame.


type alias Instance =
{ 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.

Export constraints and settings


type ExportConstraint
    = ScaleConstraint Basics.Float
    | WidthConstraint Basics.Float
    | HeightConstraint Basics.Float

Sizing constraint for exports.


type alias ExportSetting =
{ suffix : String
, format : ExportFormat
, constraint : ExportConstraint 
}

Format and size to export an asset at.


type ExportFormat
    = PngFormat
    | JpegFormat
    | SvgFormat
    | PdfFormat

Format to export an asset to.

Tree creation and manipulation

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.