Skip to main content
API specs document all configurable properties for a component: values, defaults, required vs. optional, and usage examples. This gives engineers a clear reference for implementing the component.

​
What you need

  • A Figma link to the component
  • Figma MCP connected (Console MCP with Desktop Bridge, or native Figma MCP)
  • Any additional context about properties, accepted values, or nested component configurations
Mention which properties are required, what the defaults are, and any sub-components that have their own configuration (e.g., a trailing button inside a section heading).

​
How to use

Reference the skill and paste your Figma link. Include context about the component’s properties, accepted values, and sub-component configurations for a more accurate spec: 
@create-api https://www.figma.com/design/abc123/Components?node-id=100:200

This is a section heading with leading content (primary/secondary labels),
trailing content (text button, icon button, or none), and density options.
The label is required, subtitle is optional. Default trailing content is none.

​
What it generates

The agent inspects your component’s variant axes, boolean toggles, content slots, and variable modes, then renders a documentation frame in your Figma file:
SectionWhat it covers
Main property tableAll top-level properties with values, required status, defaults, and notes
Sub-component tablesSeparate tables for configurable nested elements (e.g., trailing content options)
Configuration examples1–4 examples showing common setups
The agent looks at three sources in Figma to find all configurable properties:
  • Variant axes: properties visible in variant names (size, type, state)
  • Instance properties: boolean toggles and content options only visible when inspecting a single instance
  • Variable modes: properties controlled at the container level (shape, density)
Transient interactive states like hover and pressed are not included as API properties. Those are handled at runtime by the platform. Only persistent states like disabled, selected, and loading appear as properties.

​
How it works

The API skill is heavily AI-driven — the agent classifies properties, determines required vs. optional status, writes descriptions, and designs configuration examples, while deterministic scripts handle template rendering. 25% Deterministic 75% AI Reasoning
1

Extract

The skill reads variant axes, boolean toggles, content slots, and variable modes from the component via the Figma MCP.
2

Classify properties

Each property is categorized as required or optional, and defaults are identified.
3

Discover sub-components

Nested component instances are resolved to find their own configurable properties.
4

Import template

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

Render

The skill fills header fields, builds property tables, sub-component tables, and configuration examples.
6

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

  • Describe content slots with multiple options: if a slot can contain different content types (icon, avatar, image, none), list them explicitly. For example: “leading content can be an icon, avatar, or image”
  • Note required vs. optional: mention which properties must always be set and which have defaults
  • Mention sub-components: if your component has configurable nested elements (e.g., a trailing button inside a section heading), describe their configuration options
  • Specify defaults: tell the agent which values are the default configuration
  • Distinguish persistent from transient states: mention states like disabled, selected, or loading that should become properties. Transient states like hover and pressed are handled at runtime and won’t appear in the API