Skip to main content
The anatomy skill documents a component’s internal structure — every element gets a numbered marker and an entry in an attribute table.

​
What you get

Numbered markers

Pink dots with connector lines pointing to each element in the component instance.

Attribute table

Element name, type, visibility, and key properties listed for every child.
The skill also generates per-child sections for nested component instances, annotating their internal elements separately.

​
What you need

  • A Figma link to a component set or standalone component
  • Figma Console MCP connected via the Desktop Bridge plugin

​
How to use

Reference the skill and paste your Figma link: 
@create-anatomy https://www.figma.com/design/abc123/Components?node-id=100:200

​
Custom destination

Place the annotation in a different file or page by adding a destination link: 
@create-anatomy https://www.figma.com/design/abc123/Components?node-id=100:200

Destination: https://www.figma.com/design/xyz789/Docs?node-id=0-1

​
What it generates

OutputDescription
Component instanceDefault variant rendered in the artwork area
Numbered markersPink dots with connector lines pointing to each element
Attribute tableElement name, type (instance or text indicator), and notes
Per-child sectionsNested component instances annotated with their own markers and tables
Hidden elements are made visible in the artwork and labeled as “(hidden)” in the table, so no structural information is lost.

​
How it works

1

Extract

The skill reads child layers, element types, and visibility from the component via the Console MCP.
2

Import template

The anatomy documentation template is imported from the library, instantiated, and detached into an editable frame.
3

Render

The skill fills header fields, creates a default component instance, positions numbered markers on each element, and builds the attribute table.
4

Validate

A screenshot is captured and checked for completeness. Issues are fixed automatically for up to 3 iterations.
The skill renders programmatically, so the output is consistent and repeatable. Running it on the same component produces identical results.

​
Tips for better output

  • Use component sets: The skill expects a component set (the dashed-border container in Figma) or a standalone component, not an instance
  • Name your layers: Layer names become the element labels in the attribute table. Descriptive names like “Leading icon” produce better documentation than “Frame 47”
  • Hidden elements matter: Hidden children represent toggleable boolean properties. They are included in the anatomy and labeled “(hidden)” so the full structure is documented