matheus23/elm-figma-api/1.0.0

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 : Bool
}

The root node of a document.

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

A single page in a document.

type alias Frame =
{ id : NodeId
, name : String
, isVisible : Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, clipContent : Bool
, layoutGrids : List LayoutGrid
, effects : List Effect
, isMask : Bool
}

A node of fixed size containing other nodes.

type alias Group =
{ id : NodeId
, name : String
, isVisible : Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, clipContent : Bool
, layoutGrids : List LayoutGrid
, effects : List Effect
, isMask : Bool
}

A logical grouping of nodes.

type alias BooleanGroup =
{ id : NodeId
, name : String
, isVisible : Bool
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, effects : List Effect
, isMask : Bool
, fills : List Paint
, strokes : List Paint
, strokeWeight : Float
, strokeAlign : StrokeAlign
, operation : BooleanOperation
}

A group that has a boolean operation (union, intersection, subtraction and exlusion) applied to it.

= UnionOperation
| IntersectOperation
| SubtractOperation
| ExcludeOperation

Type of boolean operation applied to the boolean group children.

type alias Vector =
{ id : NodeId
, name : String
, isVisible : Bool
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, effects : List Effect
, isMask : Bool
, fills : List Paint
, strokes : List Paint
, strokeWeight : Float
, strokeAlign : 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 : Bool
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, effects : List Effect
, isMask : Bool
, fills : List Paint
, strokes : List Paint
, strokeWeight : Float
, strokeAlign : StrokeAlign
, cornerRadius : Float
}

A rectangular vector shape.

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

A rectangular region of the canvas that can be exported.

type alias Text =
{ id : NodeId
, name : String
, isVisible : Bool
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, effects : List Effect
, isMask : Bool
, fills : List Paint
, strokes : List Paint
, strokeWeight : Float
, strokeAlign : StrokeAlign
, characters : String
, style : TextStyle
, characterStyleOverrides : List Int
, styleOverrides : Dict Int 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 : Bool
, backgroundColor : Color
, exportSettings : List ExportSetting
, blendMode : BlendMode
, preserveRatio : Bool
, horizontalConstraint : LayoutHorizontalConstraint
, verticalConstraint : LayoutVerticalConstraint
, transitionTo : Maybe NodeId
, opacity : Float
, boundingBox : BoundingBox
, clipContent : Bool
, layoutGrids : List LayoutGrid
, effects : List Effect
, isMask : 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

= ScaleConstraint Float
| WidthConstraint Float
| HeightConstraint Float

Sizing constraint for exports.

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

Format and size to export an asset at.

= PngFormat
| JpegFormat
| SvgFormat
| PdfFormat

Format to export an asset to.

Tree creation and manipulation

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.

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.