### Get Components

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Examples for listing components within a team or file, and getting details for a specific component.

```typescript
GET /v1/teams/{team_id}/components
GET /v1/files/{file_key}/components
GET /v1/components/{key}
```

```typescript
// List all components in team
const components = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/components`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

// Get details for one component
const detail = await axios.get(
  `https://api.figma.com/v1/components/${componentKey}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

detail.data.componentPropertyDefinitions  // Available properties
```

--------------------------------

### Environment Setup

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example environment variables to set for authentication and configuration.

```bash
export FIGMA_TOKEN="figma_token_here"
export FIGMA_FILE_KEY="abc123xyz456"
export FIGMA_TEAM_ID="team_id"
```

--------------------------------

### Get Styles

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Examples for listing styles within a team and getting details for a specific style.

```typescript
GET /v1/teams/{team_id}/styles
GET /v1/styles/{key}
```

```typescript
const styles = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/styles`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

// Style types: FILL, STROKE, TEXT, EFFECT, GRID
```

--------------------------------

### Import Type Definitions

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of importing type definitions from the installed package.

```typescript
import type { GetFileResponse, Node } from '@figma/rest-api-spec'
```

--------------------------------

### Get oEmbed Data Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Example of fetching oEmbed metadata for Figma files and Makes, and how to use the returned HTML.

```typescript
const figmaUrl = 'https://www.figma.com/file/abc123/My-Design'

const response = await axios.get(
  'https://api.figma.com/v1/oembed',
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: { url: figmaUrl }
  }
)

console.log(`Title: ${response.data.title}`)
console.log(`Type: ${response.data.type}`)
console.log(`Thumbnail: ${response.data.thumbnail_url}`)
console.log(`HTML: ${response.data.html}`)
```

```html
<!-- Use the HTML from response -->
<div>
  {response.data.html}
</div>

<!-- Or create iframe manually -->
<iframe
  src="https://www.figma.com/embed?embed_host=share&url={fileUrl}"
  allowfullscreen
></iframe>
```

--------------------------------

### Get File

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/00-START-HERE.md

Example of how to fetch file data using the Figma REST API with TypeScript and Axios.

```typescript
import axios from 'axios'
import type { GetFileResponse } from '@figma/rest-api-spec'

const file = await axios.get<GetFileResponse>(
  `https://api.figma.com/v1/files/${fileKey}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)
```

--------------------------------

### Get Payments Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Example of how to retrieve payment and purchase information using the Figma API.

```typescript
const response = await axios.get(
  'https://api.figma.com/v1/payments',
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.payments.forEach(payment => {
  console.log(`${payment.order_name}: ${payment.amount}`)
  console.log(`  Date: ${payment.created_at}`)
  console.log(`  Status: ${payment.status}`)
})
```

--------------------------------

### Browser to Backend Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

Example of a browser making a request to a backend proxy for Figma API access.

```javascript
fetch('/api/figma/files/abc123')
```

--------------------------------

### Install NPM Package

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Command to install the Figma REST API spec package.

```bash
npm install @figma/rest-api-spec
```

--------------------------------

### Backend to Figma API Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

Example of a backend server making a direct request to the Figma API.

```http
https://api.figma.com/v1/files/abc123
```

--------------------------------

### Get Project Files

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Lists files within a project. This example demonstrates fetching files and logging their names, keys, modification dates, and the last modifying user.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/projects/${projectId}/files`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.files.forEach(file => {
  console.log(`${file.name} (${file.key})`)
  console.log(`  Modified: ${file.modified_at}`)
  console.log(`  Last user: ${file.last_modified_user?.name || 'Unknown'}`)
})
```

--------------------------------

### Get Developer Logs Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Example of how to fetch developer logs (API and MCP server requests) from the Figma API.

```typescript
const response = await axios.get(
  'https://api.figma.com/v1/developer_logs',
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.logs.forEach(log => {
  console.log(`${log.method} ${log.path}`)
  console.log(`  Status: ${log.status_code}`)
  console.log(`  Time: ${log.created_at}`)
})
```

--------------------------------

### Creating a Webhook

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

TypeScript example for creating a webhook with specified events and status.

```typescript
const webhookBody = {
  url: 'https://example.com/figma-webhook',
  team_id: 'team_id',
  events: ['FILE_UPDATE', 'COMPONENT_UPDATE'],
  status: 'ACTIVE',
  passcode: 'webhook-passcode'  // Verify webhook authenticity
}

await figmaClient.post('/v2/webhooks', webhookBody)
```

--------------------------------

### Get File Content

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of fetching the entire file content, including document, components, styles, and variables.

```typescript
GET /v1/files/{file_key}
```

```typescript
const file = await axios.get<GetFileResponse>(
  `https://api.figma.com/v1/files/${fileKey}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

// Access:
file.data.document           // Root node
file.data.components         // Component metadata
file.data.styles            // Style metadata
file.data.variables         // Variables (Enterprise)
file.data.name              // File name
file.data.lastModified      // Last edit timestamp
```

--------------------------------

### Get Webhook Requests Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

Example of how to retrieve logs of webhook delivery attempts using an HTTP GET request.

```typescript
const response = await axios.get(
  `https://api.figma.com/v2/webhooks/${webhookId}/requests`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.requests.forEach(request => {
  console.log(`Event: ${request.event_type}`)
  console.log(`Status: ${request.status}`)
  console.log(`Timestamp: ${request.created_at}`)
  if (request.error_message) {
    console.log(`Error: ${request.error_message}`)
  }
})
```

--------------------------------

### Get Component Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Retrieves detailed information about a specific component and logs its name, file key, node ID, description, and property definitions.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/components/${componentKey}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const component = response.data
console.log(`Component: ${component.name}`)
console.log(`File: ${component.file_key}`)
console.log(`Node ID: ${component.node_id}`)
console.log(`Description: ${component.description}`)

// Component properties
if (component.componentPropertyDefinitions) {
  Object.entries(component.componentPropertyDefinitions).forEach(
    ([propId, propDef]) => {
      console.log(`Property: ${propDef.name} (${propDef.type})`)
    }
  )
}
```

--------------------------------

### Create Webhook

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/00-START-HERE.md

Example of how to create a webhook to receive event notifications from Figma.

```typescript
await axios.post(
  'https://api.figma.com/v2/webhooks',
  {
    url: 'https://example.com/webhook',
    team_id: teamId,
    events: ['FILE_UPDATE']
  },
  { headers: { 'X-FIGMA-TOKEN': token } }
)
```

--------------------------------

### Get Style Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Retrieves detailed information about a specific style and logs its properties.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/styles/${styleKey}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const style = response.data
console.log(`Style: ${style.name}`)
console.log(`Type: ${style.style_type}`)  // FILL, STROKE, TEXT, EFFECT, GRID
console.log(`File: ${style.file_key}`)
console.log(`Published: ${style.publishedAt}`)
console.log(`Description: ${style.description}`)
```

--------------------------------

### Get Activity Logs Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Example of how to retrieve organization activity logs using the Figma API.

```typescript
const response = await axios.get(
  'https://api.figma.com/v1/activity_logs',
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.logs.forEach(log => {
  console.log(`${log.action_type} by ${log.user_name}`)
  console.log(`  Entity: ${log.entity_type}`)
  console.log(`  Time: ${log.created_at}`)
})
```

--------------------------------

### Get File Example Request

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-files.md

Retrieve the complete document structure as JSON.

```typescript
import axios from 'axios'
import type { GetFileResponse } from '@figma/rest-api-spec'

const fileKey = 'abc123xyz456'
const token = process.env.FIGMA_TOKEN

const response = await axios.get<GetFileResponse>(
  `https://api.figma.com/v1/files/${fileKey}`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: {
      depth: 2,  // Get pages and top-level objects
      branch_data: true
    }
  }
)

const { document, components, lastModified } = response.data
console.log(`File last modified: ${lastModified}`)
console.log(`Total components: ${Object.keys(components).length}`)
```

--------------------------------

### Get Current User Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Retrieve information about the authenticated user.

```typescript
const response = await axios.get(
  'https://api.figma.com/v1/me',
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const user = response.data
console.log(`Name: ${user.name}`)
console.log(`Email: ${user.email}`)
console.log(`ID: ${user.id}`)
console.log(`Workspace: ${user.workspace_id}`)
```

--------------------------------

### Get Comments Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Retrieve all comments from a file and log their details.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/files/${fileKey}/comments`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.comments.forEach(comment => {
  console.log(`${comment.user.name}: ${comment.message}`)
  console.log(`  Created: ${comment.created_at}`)
  console.log(`  On node: ${comment.file_key}:${comment.client_meta.node_id}`)
})
```

--------------------------------

### Get Dev Resources Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Retrieves all dev resources from a file and logs their names, types, URLs, and node IDs.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/files/${fileKey}/dev_resources`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.dev_resources.forEach(resource => {
  console.log(`${resource.name} (${resource.resource_type})`)
  console.log(`  URL: ${resource.url}`)
  console.log(`  Node: ${resource.node_id}`)
})
```

--------------------------------

### Get Current User

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of fetching information about the currently authenticated user.

```typescript
GET /v1/me
```

```typescript
const user = await axios.get(
  'https://api.figma.com/v1/me',
  { headers: { 'X-FIGMA-TOKEN': token } }
)

// Returns: { id, name, email, workspace_id, ... }
```

--------------------------------

### Get Component Set Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Retrieves detailed information about a component set and logs its name, description, and published date.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/component_sets/${setKey}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const componentSet = response.data
console.log(`Set: ${componentSet.name}`)
console.log(`Description: ${componentSet.description}`)
console.log(`Published at: ${componentSet.publishedAt}`)
```

--------------------------------

### Personal Access Token Usage

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

Examples of how to include a Personal Access Token in API requests.

```bash
Authorization: Bearer <FIGMA_TOKEN>
```

```bash
X-FIGMA-TOKEN: <FIGMA_TOKEN>
```

--------------------------------

### Install Figma REST API Types

Source: https://github.com/figma/rest-api-spec/blob/main/README.md

Install the @figma/rest-api-spec package as a dev dependency using npm.

```sh
npm install --save-dev @figma/rest-api-spec
```

--------------------------------

### Get Team Components Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Lists all published components in a team and logs their names, keys, file keys, and node IDs.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/components`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.components.forEach(component => {
  console.log(`${component.name} (${component.key})`)
  console.log(`  File: ${component.file_key}`)
  console.log(`  Node: ${component.node_id}`)
})
```

--------------------------------

### Get Team Component Sets Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Lists all published component sets in a team and logs their names, keys, and file keys.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/component_sets`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.component_sets.forEach(set => {
  console.log(`Component Set: ${set.name}`)
  console.log(`  Key: ${set.key}`)
  console.log(`  File: ${set.file_key}`)
})
```

--------------------------------

### List Components

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/00-START-HERE.md

Example of how to list components within a team using the Figma REST API with TypeScript and Axios.

```typescript
const components = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/components`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)
```

--------------------------------

### Create Webhook

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of creating a webhook to receive notifications for specific events.

```typescript
POST /v2/webhooks
```

```typescript
await axios.post(
  'https://api.figma.com/v2/webhooks',
  {
    url: 'https://example.com/webhook',
    team_id: teamId,
    events: ['FILE_UPDATE', 'COMPONENT_UPDATE'],
    passcode: 'secret_key'
  },
  { headers: { 'X-FIGMA-TOKEN': token } }
)

// Events: FILE_UPDATE, FILE_DELETE, COMPONENT_UPDATE,
//         LIBRARY_PUBLISH, COMMENT_CREATE, COMMENT_UPDATE,
//         COMMENT_DELETE, FILE_VERSION_UPDATE
```

--------------------------------

### Render as Image

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of rendering file content as an image in various formats.

```typescript
GET /v1/images/{file_key}?ids=ID1,ID2&format=png|svg|pdf|jpg
```

```typescript
const images = await axios.get(
  `https://api.figma.com/v1/images/${fileKey}`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: {
      ids: '1:2,1:3',
      format: 'png',        // png, svg, pdf, jpg
      scale: 2              // 0.01-4
    }
  }
)

// Returns: { images: { [nodeId]: url_string } }
// URLs expire after 30 days
```

--------------------------------

### Get File Versions

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Retrieves the version history for a file. This example logs the first five versions, including their labels, IDs, creation dates, and the user who created them.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/files/${fileKey}/versions`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.versions.slice(0, 5).forEach(version => {
  console.log(`Version: ${version.label}`)
  console.log(`  ID: ${version.id}`)
  console.log(`  Created: ${version.created_at}`)
  if (version.user) {
    console.log(`  By: ${version.user.name}`)
  }
})
```

--------------------------------

### Style Usages Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Example of how to fetch and process style usage data from the Figma API.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/analytics/libraries/${fileKey}/style/usages`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.items.forEach(usage => {
  console.log(`${usage.style_name}`)
  console.log(`  Total uses: ${usage.total_uses}`)
  console.log(`  Files using: ${usage.files_using_style}`)
})
```

--------------------------------

### Webhook Event Format Examples

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

TypeScript examples illustrating the structure of different webhook event types.

```typescript
// FILE_UPDATE
{
  type: 'FILE_UPDATE',
  file_key: 'abc123',
  // Optional: specific changes
  changes?: {
    components_updated: true,
    styles_updated: true,
    // ... other changes
  }
}

// FILE_DELETE
{
  type: 'FILE_DELETE',
  file_key: 'abc123'
}

// COMMENT_CREATE / COMMENT_UPDATE / COMMENT_DELETE
{
  type: 'COMMENT_CREATE',
  file_key: 'abc123',
  comment_id: 'comment_456'
}

// LIBRARY_PUBLISH
{
  type: 'LIBRARY_PUBLISH',
  file_key: 'abc123',
  components_published: true,
  styles_published: true
}

// COMPONENT_UPDATE
{
  type: 'COMPONENT_UPDATE',
  file_key: 'abc123',
  component_id: 'comp_789'
}

// FILE_VERSION_UPDATE
{
  type: 'FILE_VERSION_UPDATE',
  file_key: 'abc123',
  version_id: 'version_123'
}
```

--------------------------------

### Get Specific Nodes

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of fetching specific nodes within a file using their IDs.

```typescript
GET /v1/files/{file_key}/nodes?ids=ID1,ID2
```

```typescript
const nodes = await axios.get(
  `https://api.figma.com/v1/files/${fileKey}/nodes`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: { ids: '1:2,1:3,1:4' }  // Comma-separated IDs
  }
)

// Returns: { nodes: { [nodeId]: NodeObject } }
```

--------------------------------

### Get Comment Reactions Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Retrieve reactions on a comment and log their details.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/files/${fileKey}/comments/${commentId}/reactions`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const reactions = response.data.reactions
reactions.forEach(reaction => {
  console.log(`${reaction.user.name} reacted: ${reaction.emoji}`)
})
```

--------------------------------

### Get Team Projects

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Lists projects within a team. This example demonstrates how to fetch projects and log their names, IDs, and file counts.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/projects`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.projects.forEach(project => {
  console.log(`Project: ${project.name}`)
  console.log(`  ID: ${project.id}`)
  console.log(`  Files: ${project.file_count}`)
})
```

--------------------------------

### Get Project Metadata

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Retrieves metadata about a specific project. This example shows how to fetch project details and log its name, creation date, and file count.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/projects/${projectId}/meta`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const project = response.data
console.log(`Project: ${project.name}`)
console.log(`Created: ${project.created_at}`)
console.log(`Files: ${project.file_count}`)
```

--------------------------------

### Query Parameters

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Examples of common query parameters used in API requests.

```typescript
// Comment
{
  message: string
  client_meta: {
    node_id: string
    x?: number
    y?: number
  }
}

// Webhook
{
  url: string
  team_id: string
  events: string[]
  status?: 'ACTIVE' | 'PAUSED'
  passcode?: string
}

// Variable
{
  variables: [
    {
      name: string
      initial_value: {
        type: 'COLOR' | 'FLOAT' | 'STRING' | 'BOOLEAN'
        value: any
      }
      variable_collection_id: string
    }
  ]
}
```

--------------------------------

### Authentication

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Personal Access Token and OAuth Bearer Token examples for authentication.

```typescript
// Personal Access Token
headers: { 'X-FIGMA-TOKEN': process.env.FIGMA_TOKEN }

// OAuth Bearer Token
headers: { 'Authorization': 'Bearer <oauth_token>' }
```

--------------------------------

### Get Team Styles Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Lists all published styles in a team and groups them by type (color, typography, effects).

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/teams/${teamId}/styles`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

// Group styles by type
const colorStyles = response.data.styles.filter(s => s.style_type === 'FILL')
const typeStyles = response.data.styles.filter(s => s.style_type === 'TEXT')
const effectStyles = response.data.styles.filter(s => s.style_type === 'EFFECT')

console.log(`Colors: ${colorStyles.length}`)
console.log(`Typography: ${typeStyles.length}`)
console.log(`Effects: ${effectStyles.length}`)
```

--------------------------------

### Get Local Variables Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Retrieves local variables defined in a file and logs their names, collection IDs, and modes.

```typescript
const response = await axios.get(
  `https://api.figma.com/v1/files/${fileKey}/variables/local`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.variables.forEach(variable => {
  console.log(`${variable.name}`)
  console.log(`  Type: ${variable.variable_collection_id}`)
  console.log(`  Modes:`) 
  Object.entries(variable.values).forEach(([modeId, value]) => {
    console.log(`    - Mode ${modeId}: ${value}`)
  })
})
```

--------------------------------

### Get all image URLs from a file

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-files.md

This example shows how to retrieve download URLs for all image fills within a Figma file using the /v1/files/{file_key}/images endpoint.

```typescript
// Get all image URLs from a file
const response = await axios.get<GetImageFillsResponse>(
  `https://api.figma.com/v1/files/${fileKey}/images`,
  {
    headers: { 'X-FIGMA-TOKEN': token }
  }
)

// Map from image reference to download URL
const imageUrls = response.data.images
for (const [imageRef, url] of Object.entries(imageUrls)) {
  console.log(`Image ${imageRef}: ${url}`)
}
```

--------------------------------

### Get version history

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-files.md

This example shows how to retrieve the version history for a file using the /v1/files/{file_key}/versions endpoint and how to use a version ID to fetch a specific file version.

```typescript
// Get version history
const response = await axios.get<GetFileVersionsResponse>(
  `https://api.figma.com/v1/files/${fileKey}/versions`,
  {
    headers: { 'X-FIGMA-TOKEN': token }
  }
)

// List recent versions
response.data.versions.slice(0, 10).forEach(version => {
  console.log(`${version.id}: ${version.label} (${version.createdAt})`)
})

// Use version ID with get file endpoint
const oldFileResponse = await axios.get<GetFileResponse>(
  `https://api.figma.com/v1/files/${fileKey}`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: { version: response.data.versions[1].id }
  }
)
```

--------------------------------

### Create Comment Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Post a new comment on a file.

```typescript
const response = await axios.post(
  `https://api.figma.com/v1/files/${fileKey}/comments`,
  {
    message: 'This button needs more padding',
    client_meta: {
      node_id: '1:2',  // Node ID from file structure
      x: 100,
      y: 200
    }
  },
  { headers: { 'X-FIGMA-TOKEN': token } }
)

console.log(`Comment created: ${response.data.id}`)
```

--------------------------------

### Efficient API Usage Examples

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/README.md

Examples demonstrating efficient API usage patterns to avoid unnecessary data fetching.

```http
// ✓ Good: Fetch only needed nodes
GET /v1/files/{key}/nodes?ids=1:2,5:10

// ✓ Good: Limit tree depth
GET /v1/files/{key}?depth=2

// ✓ Good: Get vector data only when needed
GET /v1/files/{key}?geometry=paths

// ✗ Avoid: Fetching entire file repeatedly
GET /v1/files/{key}  // Don't call this in a loop
```

--------------------------------

### Minimal Axios Client

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

A basic Axios client setup for interacting with the Figma API.

```typescript
import axios from 'axios'

const figmaClient = axios.create({
  baseURL: 'https://api.figma.com/v1',
  headers: { 'X-FIGMA-TOKEN': process.env.FIGMA_TOKEN },
  timeout: 10000
})

export async function getFile(fileKey: string) {
  const { data } = await figmaClient.get(`/files/${fileKey}`)
  return data
}

export async function getImages(fileKey: string, nodeIds: string[]) {
  const { data } = await figmaClient.get(
    `/images/${fileKey}`,
    { params: { ids: nodeIds.join(','), format: 'png' } }
  )
  return data
}
```

--------------------------------

### Access Environment Variables

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of accessing environment variables in TypeScript.

```typescript
const token = process.env.FIGMA_TOKEN
const fileKey = process.env.FIGMA_FILE_KEY
const teamId = process.env.FIGMA_TEAM_ID
```

--------------------------------

### Get All Components

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

A utility function to collect all component nodes from the document.

```typescript
const components: ComponentNode[] = []

function traverse(node: Node) {
  if (node.type === 'COMPONENT') {
    components.push(node as ComponentNode)
  }
  if ('children' in node) {
    node.children?.forEach(traverse)
  }
}
```

--------------------------------

### Post Comment

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of posting a comment on a specific node within a file.

```typescript
POST /v1/files/{file_key}/comments
```

```typescript
await axios.post(
  `https://api.figma.com/v1/files/${fileKey}/comments`,
  {
    message: 'Feedback here',
    client_meta: {
      node_id: '1:2',  // Which node to comment on
      x: 100,          // Optional: position
      y: 200
    }
  },
  { headers: { 'X-FIGMA-TOKEN': token } }
)
```

--------------------------------

### Sync Design Changes to Database

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

This example demonstrates how to set up a webhook to sync design changes to a database when a Figma file is updated.

```typescript
import express from 'express'
import axios from 'axios'

const app = express()
const token = process.env.FIGMA_TOKEN

app.post('/figma-sync', express.json(), async (req, res) => {
  const event = req.body

  if (event.event_type === 'FILE_UPDATE') {
    // Fetch updated file
    const fileRes = await axios.get<GetFileResponse>(
      `https://api.figma.com/v1/files/${event.file_key}`,
      { headers: { 'X-FIGMA-TOKEN': token } }
    )

    // Sync components to database
    Object.entries(fileRes.data.components).forEach(
      ([nodeId, component]) => {
        database.upsert('components', {
          id: nodeId,
          name: component.name,
          file: event.file_key,
          updated_at: event.timestamp
        })
      }
    )
  }

  res.json({ ok: true })
})
```

--------------------------------

### NotFoundErrorResponseWithErrMessage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/errors.md

Example of a 404 Not Found error response with an 'err' message.

```json
{
  "err": "File not found",
  "status": 404
}
```

--------------------------------

### Import Usage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/types.md

Demonstrates how to import specific types from the '@figma/rest-api-spec' package.

```typescript
import type {
  GetFileResponse,
  DocumentNode,
  RectangleNode,
  Color,
  Paint,
} from '@figma/rest-api-spec'
```

--------------------------------

### List All Webhooks

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

Get all webhooks created by your token/application.

```typescript
const response = await axios.get(
  'https://api.figma.com/v2/webhooks',
  { headers: { 'X-FIGMA-TOKEN': token } }
)

console.log(`Total webhooks: ${response.data.webhooks.length}`)
response.data.webhooks.forEach(webhook => {
  console.log(`- ${webhook.id}: ${webhook.url}`)
  console.log(`  Status: ${webhook.status}`)
  console.log(`  Events: ${webhook.events.join(', ')}`)
})
```

--------------------------------

### Accessing Original Component

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/node-types.md

Example of how to access the main component of an InstanceNode and its properties.

```typescript
if (node.type === 'INSTANCE') {
  const mainComponent = node.mainComponent
  if (mainComponent?.componentPropertyDefinitions) {
    // Access available properties
  }
}
```

--------------------------------

### Error Handling

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example of how to handle common HTTP errors returned by the Figma API.

```typescript
try {
  const response = await axios.get(url, config)
  return response.data
} catch (error) {
  switch (error.response?.status) {
    case 400:
      console.error('Bad request - check parameters')
      break
    case 403:
      console.error('Forbidden - check token/permissions')
      break
    case 404:
      console.error('Not found - check file key/node ID')
      break
    case 429:
      console.error('Rate limited - implement backoff')
      // Wait based on X-RateLimit-Reset header
      break
    case 500:
      console.error('Server error - retry later')
      break
  }
}
```

--------------------------------

### Exporting with Plugin Data

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-files.md

Example of how to export a Figma file including plugin-specific data and how to access it.

```typescript
// Export file with plugin-specific data
const response = await axios.get<GetFileResponse>(
  `https://api.figma.com/v1/files/${fileKey}`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: {
      plugin_data: 'plugin_id_1,plugin_id_2,shared'
    }
  }
)

// Access plugin data
const node = response.data.document.children[0]
if (node.pluginData) {
  console.log('Plugin-specific data:', node.pluginData)
}
if (node.sharedPluginData) {
  console.log('Shared plugin data:', node.sharedPluginData)
}
```

--------------------------------

### Create/Update Variables Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Creates or updates variables in a file, including color and float types, and logs the number of variables affected.

```typescript
const body = {
  variables: [
    {
      name: 'Primary Color',
      initial_value: {
        type: 'COLOR',
        value: 'FF0000FF'  // Red in RGBA hex
      },
      variable_collection_id: 'collectionId'
    },
    {
      name: 'Font Size',
      initial_value: {
        type: 'FLOAT',
        value: 16
      },
      variable_collection_id: 'collectionId'
    }
  ]
}

const response = await axios.post(
  `https://api.figma.com/v1/files/${fileKey}/variables`,
  body,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

console.log(`Created/updated ${response.data.variables.length} variables`)
```

--------------------------------

### TypeScript Usage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/README.md

Shows how to import and use TypeScript types from the '@figma/rest-api-spec' package for type-safe API interactions.

```typescript
import type {
  GetFileResponse,
  DocumentNode,
  ComponentNode,
  TextNode,
  GetFileResponse
} from '@figma/rest-api-spec'

const file: GetFileResponse = await getFile(fileKey, token)
const doc: DocumentNode = file.document

// TypeScript ensures type safety
function processNode(node: Node): void {
  if (node.type === 'TEXT') {
    const textNode = node as TextNode
    console.log(textNode.characters)  // ✓ Autocomplete
  }
}
```

--------------------------------

### Publish Version Updates

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

This example shows how to use a webhook to notify a team via Slack when a new version of a Figma file is published.

```typescript
app.post('/figma-notify', express.json(), async (req, res) => {
  const event = req.body

  if (event.event_type === 'FILE_VERSION_UPDATE') {
    // Notify team of new version
    await slack.post(`#design-updates`, {
      text: `New version of ${event.file_name}`,
      attachments: [{
        color: '#0099ff',
        fields: [{
          title: 'File',
          value: event.file_name,
          short: true
        }],
        actions: [{
          type: 'button',
          text: 'View in Figma',
          url: `https://figma.com/file/${event.file_key}`
        }]
      }]
    })
  }

  res.json({ ok: true })
})
```

--------------------------------

### Rate Limiting Delay Calculation

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/quick-reference.md

Example code to calculate and implement a delay based on the X-RateLimit-Reset header.

```typescript
const resetTime = parseInt(response.headers['x-ratelimit-reset'])
const delay = resetTime * 1000 - Date.now()
await new Promise(r => setTimeout(r, delay))
```

--------------------------------

### Environment Variables for Authentication

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

Setting environment variables for Personal Access Tokens and OAuth client credentials.

```bash
# Personal Access Token\nexport FIGMA_TOKEN="your-token-here"\n\n# OAuth Client credentials (for server-side apps)\nexport FIGMA_CLIENT_ID="your-client-id"\nexport FIGMA_CLIENT_SECRET="your-client-secret"
```

--------------------------------

### JavaScript/TypeScript Client Configuration with Fetch

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

Configuring the native Fetch API for interacting with the Figma API.

```typescript
const token = process.env.FIGMA_TOKEN\n\nasync function fetchFromFigma(endpoint: string) {\n  const response = await fetch(`https://api.figma.com/v1${endpoint}`, {\n    headers: {\n      'X-FIGMA-TOKEN': token,\n      'Content-Type': 'application/json'\n    }\n  })\n\n  if (!response.ok) {\n    throw new Error(`API Error: ${response.status}`)\n  }\n\n  return response.json()\n}
```

--------------------------------

### OAuth Token Usage

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

How to include an OAuth token in API requests.

```bash
Authorization: Bearer <OAUTH_TOKEN>
```

--------------------------------

### Get File Nodes Example Request

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-files.md

Retrieve specific nodes from a file by ID.

```typescript
// Get specific nodes from a file
const nodeIds = '1:2,5:10,10:20'  // Comma-separated IDs

const response = await axios.get<GetFileNodesResponse>(
  `https://api.figma.com/v1/files/${fileKey}/nodes`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: {
      ids: nodeIds,
      depth: 3,
      geometry: 'paths'  // Get vector paths
    }
  }
)

// Response contains a nodes map
const { nodes } = response.data
nodes['1:2']?.children?.forEach(child => {
  console.log(`Child: ${child.name} (${child.type})`)
})
```

--------------------------------

### JavaScript/TypeScript Client Configuration with Axios

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

Configuring an Axios instance for interacting with the Figma API.

```typescript
import axios from 'axios'\n\nconst figmaClient = axios.create({\n  baseURL: 'https://api.figma.com/v1',\n  headers: {\n    'X-FIGMA-TOKEN': process.env.FIGMA_TOKEN\n  }\n})\n\n// Using the configured client\nconst file = await figmaClient.get(`/files/${fileKey}`)
```

--------------------------------

### Create Dev Resource Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-specialized.md

Adds a new dev resource to a file, specifying its node, name, URL, and type.

```typescript
const body = {
  file_key: fileKey,
  node_id: '1:2',
  name: 'Button Component',
  url: 'https://github.com/example/button.tsx',
  resource_type: 'CODE'
}

const response = await axios.post(
  'https://api.figma.com/v1/dev_resources',
  body,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

console.log(`Created resource: ${response.data.id}`)
```

--------------------------------

### Get Team Webhooks

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

Get all webhooks configured for a specific team.

```typescript
const response = await axios.get(
  `https://api.figma.com/v2/teams/${teamId}/webhooks`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

response.data.webhooks.forEach(webhook => {
  console.log(`Team Webhook: ${webhook.id}`)
})
```

--------------------------------

### Delete Webhook Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

Example of how to unregister a webhook using an HTTP DELETE request.

```typescript
await axios.delete(
  `https://api.figma.com/v2/webhooks/${webhookId}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

console.log('Webhook deleted')
```

--------------------------------

### Export multiple nodes as PNG images

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-files.md

This example demonstrates how to export multiple nodes as PNG images using the /v1/images endpoint, including how to iterate through the response and download the images.

```typescript
// Export multiple nodes as PNG images
const nodeIds = '1:2,1:3,1:4'

const response = await axios.get<GetImagesResponse>(
  `https://api.figma.com/v1/images/${fileKey}`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: {
      ids: nodeIds,
      scale: 2,  // 2x scale
      format: 'png'
    }
  }
)

// Download images
for (const [nodeId, imageUrl] of Object.entries(response.data.images)) {
  if (imageUrl) {
    console.log(`Node ${nodeId}: ${imageUrl}`)
    // Image URLs expire after 30 days
  }
}
```

--------------------------------

### ForbiddenErrorResponseWithErrMessage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/errors.md

Example of a 403 Forbidden error response with an 'err' message.

```json
{
  "err": "Insufficient permissions to access this file",
  "status": 403
}
```

--------------------------------

### InternalServerErrorResponseWithErrMessage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/errors.md

Example of a 500 Internal Server Error response with an 'err' message.

```json
{
  "err": "Internal server error",
  "status": 500
}
```

--------------------------------

### BadRequestErrorResponseWithErrMessage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/errors.md

Example of a 400 Bad Request error response with an 'err' message.

```json
{
  "err": "Invalid node ID format",
  "status": 400
}
```

--------------------------------

### TooManyRequestsErrorResponseWithErrMessage Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/errors.md

Example of a 429 Too Many Requests error response with an 'err' message, including response headers for rate limiting.

```json
{
  "err": "You have exceeded the rate limit",
  "status": 429
}
```

--------------------------------

### Get Webhook

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-webhooks.md

Retrieve details about a specific webhook.

```typescript
const response = await axios.get(
  `https://api.figma.com/v2/webhooks/${webhookId}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)

const webhook = response.data
console.log(`Webhook: ${webhook.id}`)
console.log(`URL: ${webhook.url}`)
console.log(`Status: ${webhook.status}`)
console.log(`Created: ${webhook.created_at}`)
console.log(`Last trigger: ${webhook.last_triggered_at || 'Never'}`)
```

--------------------------------

### Building a Component Library

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-components.md

Asynchronously builds a component library by fetching all components and their detailed information from a team.

```typescript
async function buildComponentLibrary(teamId: string, token: string) {
  // Get all components
  const componentsRes = await axios.get(
    `https://api.figma.com/v1/teams/${teamId}/components`,
    { headers: { 'X-FIGMA-TOKEN': token } }
  )

  const library = {}

  for (const component of componentsRes.data.components) {
    // Get detailed info for each component
    const detailRes = await axios.get(
      `https://api.figma.com/v1/components/${component.key}`,
      { headers: { 'X-FIGMA-TOKEN': token } }
    )

    library[component.name] = {
      key: component.key,
      fileKey: component.file_key,
      nodeId: component.node_id,
      description: detailRes.data.description,
      properties: detailRes.data.componentPropertyDefinitions || {}
    }
  }

  return library
}
```

--------------------------------

### Remove Reaction Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Delete a reaction from a comment.

```typescript
await axios.delete(
  `https://api.figma.com/v1/files/${fileKey}/comments/${commentId}/reactions`,
  {
    headers: { 'X-FIGMA-TOKEN': token },
    params: { emoji: '👍' }
  }
)
```

--------------------------------

### Add Reaction Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

React with an emoji to a comment.

```typescript
const response = await axios.post(
  `https://api.figma.com/v1/files/${fileKey}/comments/${commentId}/reactions`,
  { emoji: '👍' },
  { headers: { 'X-FIGMA-TOKEN': token } }
)
```

--------------------------------

### Delete Comment Example

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/api-comments-users.md

Remove a comment from a file.

```typescript
await axios.delete(
  `https://api.figma.com/v1/files/${fileKey}/comments/${commentId}`,
  { headers: { 'X-FIGMA-TOKEN': token } }
)
```

--------------------------------

### OAuth 2.0 Authorization Endpoint

Source: https://github.com/figma/rest-api-spec/blob/main/_autodocs/configuration.md

The URL for initiating the OAuth 2.0 authorization flow.

```bash
https://www.figma.com/oauth?\n  client_id=<CLIENT_ID>&\n  redirect_uri=<REDIRECT_URI>&\n  scope=<SCOPES>&\n  state=<STATE>&\n  response_type=code
```