Skip to main content

Node Types

In Figma, the Node is the basis for representing layers. There are many different types of nodes, each with their own set of properties.

In the Typings File, each node type is represented with an interface. The most general BaseNode is always one of those interfaces:

type BaseNode =
DocumentNode |
PageNode |
SceneNode

Most often, you will work with nodes contained within a page, also referred to as "scene nodes".

type SceneNode =
BooleanOperationNode |
CodeBlockNode |
ComponentNode |
ComponentSetNode |
ConnectorNode |
EllipseNode |
EmbedNode |
FrameNode |
GroupNode |
InstanceNode |
LineNode |
LinkUnfurlNode |
MediaNode |
PolygonNode |
RectangleNode |
SectionNode |
ShapeWithTextNode |
SliceNode |
StampNode |
StarNode |
StickyNode |
TextNode |
VectorNode |
WidgetNode |
MediaNode

Each node has a type property that tells you the type of the node. The list of node types is declared in NodeType. You will typically use node.type when examining a node.

type NodeType =
"BOOLEAN_OPERATION" |
"CODE_BLOCK" |
"COMPONENT" |
"COMPONENT_SET" |
"CONNECTOR" |
"DOCUMENT" |
"ELLIPSE" |
"EMBED" |
"FRAME" |
"GROUP" |
"INSTANCE" |
"LINE" |
"LINK_UNFURL" |
"MEDIA" |
"PAGE" |
"POLYGON" |
"RECTANGLE" |
"SHAPE_WITH_TEXT" |
"SLICE" |
"STAMP" |
"STAR" |
"STICKY" |
"TEXT" |
"VECTOR" |
"WIDGET"

In the Typings File, you will also find references to "mixin" interfaces. This is just a way to group related properties together. For example: pages, frames and groups can all have children, so they all have children-related properties such as .children, .appendChild.

Our node properties can't be modeled using traditional object-oriented class hierarchy which is why we use the concept of mixins. The ChildrenMixin define the properties that all nodes with children have (e.g. append, insert) and FrameNodes, PageNodes, etc all compose ChildrenMixin. However, a RectangleNode cannot have children and therefore does not inherit from ChildrenMixin.