Back

CompleteDocumentation

Everything you need to understand and work with Figma's node structure

Figma Node Structure Overview
Understanding the foundation of Figma's design data

Figma organizes all design elements in a hierarchical tree structure where each element is represented as a "node". Every visual element, from simple rectangles to complex components, inherits from a base node type and contains specific properties that define its appearance and behavior.

Key Concepts

  • •Nodes: Individual elements in the design tree
  • •Hierarchy: Parent-child relationships between nodes
  • •Properties: Attributes that define node appearance and behavior
  • •Types: Different categories of nodes (TEXT, RECTANGLE, FRAME, etc.)

Node Hierarchy Structure

BaseNode
├── PageNode (PAGE)
└── SceneNode
    ├── FrameNode (FRAME)
    ├── GroupNode (GROUP)
    ├── ComponentNode (COMPONENT)
    ├── InstanceNode (INSTANCE)
    ├── BooleanOperationNode (BOOLEAN_OPERATION)
    ├── VectorNode (VECTOR)
    ├── StarNode (STAR)
    ├── LineNode (LINE)
    ├── EllipseNode (ELLIPSE)
    ├── PolygonNode (POLYGON)
    ├── RectangleNode (RECTANGLE)
    ├── TextNode (TEXT)
    └── SliceNode (SLICE)

Data Flow

Figma's node data flows through several mechanisms:

  • Plugin API: Direct access to node properties and methods
  • Clipboard: Serialized node data for copy/paste operations
  • File Format: Persistent storage of node data in .fig files
  • REST API: External access to file and node data