Anatomy

Generate numbered anatomy annotations with attribute tables directly in Figma

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

Output	Description
Component instance	Default variant rendered in the artwork area
Numbered markers	Pink dots with connector lines pointing to each element
Attribute table	Element name, type (instance or text indicator), and notes
Per-child sections	Nested 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