# Figma

## Figma – Connector Configuration

### Step 1: Access Figma & Developer Platform

* Sign in to your Figma account at [Figma](https://www.figma.com/)
* Navigate to the [Figma Developer Platform](https://www.figma.com/developers)
* You need a Figma account to create applications (free account works)

> ⚠️ **Note**: Some API features require a Figma Professional or Organization plan.

***

### Step 2: Create Your Application

1. **Access Developer Settings**:
   * Go to **Account Settings** → **Connected apps**
   * Or visit: `https://www.figma.com/developers/apps`
2. **Create New App**:
   * Click **"Create new app"**
   * Fill in the application details:
     * **App name** (e.g., "Appmixer Design Integration")
     * **App description** - Describe your integration's purpose
     * **App website** - Your organization's website (optional)

***

### Step 3: Configure OAuth Settings

1. **OAuth Configuration**:
   * In your app settings, configure OAuth details
   * Set your callback URL for OAuth flow
2. **Set Callback URL**:
   * Add your OAuth redirect URI in the **"Callback URL"** field
   * For Appmixer, set the redirect URI to:

```http
https://[YOUR_API_BASE]/auth/figma/callback
```

Example:

```http
https://api.appmixer.com/auth/figma/callback
```

3. **OAuth Scopes**:
   * Figma OAuth provides access to:
     * **File access** - Read and write files
     * **Team access** - Access team information
     * **Webhook access** - Register and manage webhooks

***

### Step 4: Copy Your OAuth Credentials

After creating your application, you'll find:

* **Client ID** - Your OAuth application identifier
* **Client Secret** - Your OAuth application secret

⚠️ **Important**: Keep your Client Secret secure and never expose it in client-side code!

***

### Step 5: Personal Access Token (Alternative)

For server-to-server integrations, you can use personal access tokens:

1. **Generate Personal Access Token**:
   * Go to **Account Settings** → **Personal access tokens**
   * Click **"Create new token"**
   * Give it a descriptive name
   * Select appropriate scopes:
     * **File content** - Read file structure and content
     * **File comments** - Read and write comments
     * **File dev resources** - Access dev mode resources
2. **Token Security**:
   * Copy the token immediately (it won't be shown again)
   * Store securely and treat like a password
   * Tokens inherit your account permissions

***

### Step 6: Webhook Configuration (Optional)

Figma supports webhooks for real-time file updates:

1. **Create Webhook**:
   * Use the [Webhooks API](https://www.figma.com/developers/api#webhooks)
   * POST to `https://api.figma.com/v2/webhooks`
2. **Webhook Events**:
   * `FILE_UPDATE` - File content changes
   * `FILE_DELETE` - File deletion
   * `FILE_VERSION_UPDATE` - New version created
   * `LIBRARY_PUBLISH` - Library component published
3. **Webhook Payload Example**:

```json
{
  "event_type": "FILE_UPDATE",
  "file_key": "ABC123",
  "timestamp": "2023-01-01T12:00:00Z"
}
```

***

### Step 7: Connector Configuration

1. Go to the Appmixer BackOffice -> Configuration.
2. Add new configuration: `acme:figma`.
3. Add your `clientId` and `clientSecret` keys with values from Figma.

![alt text](https://802996127-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIAGKHlIqVKJe9agnFr14%2Fuploads%2Fgit-blob-8b586707d5c8479c35ca31b722cd90704b6790ec%2Ffigma1.png?alt=media)

![alt text](https://802996127-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIAGKHlIqVKJe9agnFr14%2Fuploads%2Fgit-blob-65d2fcc3c9bfd29b74c84528f2b7d86ab21b55ba%2Ffigma2.png?alt=media)

***

### Step 8: Rate Limits

**Rate Limits**:

* **Personal tokens**: 1000 requests per hour
* **OAuth apps**: 1000 requests per hour per user
* **Burst limit**: 120 requests per minute
* **File access**: Additional limits on large files

***

### Important Notes

⚠️ **File Access**:

* OAuth apps can only access files the user has permission to view
* Team files require appropriate team membership
* Private files require explicit sharing

⚠️ **API Limitations**:

* Read-only API (cannot modify file content via API)
* Comments and dev resources can be modified
* File exports have size and complexity limits

⚠️ **Webhook Delivery**:

* Webhooks may be delayed during high traffic
* Implement proper retry logic for failed deliveries
* Validate webhook signatures for security

***

### Useful Links

* [Figma API Documentation](https://www.figma.com/developers/api)
* [OAuth Documentation](https://www.figma.com/developers/api#oauth2)
* [Webhooks Guide](https://www.figma.com/developers/api#webhooks)
* [Plugin Development](https://www.figma.com/plugin-docs/)
* [Community Forum](https://forum.figma.com/c/developers-api/)
* [Rate Limits](https://www.figma.com/developers/api#rate-limiting)

***