Skip to main content

Figma Integration

The Figma integration allows you to connect your Figma workspace to Serval, enabling automated access management, design workflow automation, and comprehensive audit trails for your design assets.

Features

  • Access Management: Control who has access to your Figma files and projects
  • Audit Trail: Track all design access and modifications
  • Workflow Automation: Automate design review and approval processes
  • Asset Security: Ensure design assets are accessed only by authorized team members

Prerequisites

Before setting up the Figma integration, you’ll need:
  1. A Figma account with appropriate permissions
  2. The ability to generate personal access tokens in your Figma account settings

Setup Instructions

Step 1: Generate a Figma Personal Access Token

  1. Log in to your Figma account
  2. Navigate to Account SettingsPersonal access tokens
  3. Click Create new token
  4. Give your token a descriptive name (e.g., “Serval Integration”)
  5. Copy the generated token - you’ll need it in the next step
Make sure to copy your token immediately. Figma will not show it again after you close the dialog.

Step 2: Configure the Integration in Serval

  1. Navigate to SettingsIntegrations in Serval
  2. Find Figma in the list of available integrations
  3. Click Connect
  4. Fill in the configuration form:
    • Instance Name (optional): A friendly name to identify this Figma workspace (e.g., “Design Team”, “Marketing”)
    • Personal Access Token: Paste the token you generated in Step 1
  5. Click Save to complete the setup

Step 3: Verify the Connection

After saving, Serval will automatically test the connection to ensure everything is working properly. You should see a success message confirming the integration is active.

Configuration Options

Instance Name

The instance name helps you distinguish between multiple Figma workspaces if your organization uses separate Figma accounts for different teams or purposes. This is optional but recommended for clarity.

Personal Access Token

Your Figma personal access token grants Serval read access to your Figma files and projects. This token is securely stored and encrypted in Serval.

Usage Examples

Accessing Figma Files in Workflows

Once configured, you can use the Figma integration in your Serval workflows:
import { figma } from "serval/integrations";

// Get current user information
const me = await figma.apiRequest({
  path: "/v1/me",
  method: "GET"
});

// Get file information
const file = await figma.apiRequest({
  path: "/v1/files/{fileKey}",
  method: "GET",
  pathParams: {
    fileKey: "your-file-key"
  }
});

Common Use Cases

  1. Design Access Reviews: Automatically review and audit who has access to sensitive design files
  2. Onboarding Workflows: Grant new team members access to relevant Figma projects
  3. Offboarding Workflows: Revoke access when team members leave
  4. Design Approval Workflows: Create approval processes for design changes

API Reference

The Figma integration provides access to the Figma REST API v1. Key endpoints include:
  • /v1/me - Get current user information
  • /v1/files/{fileKey} - Get file metadata and content
  • /v1/projects/{projectId}/files - List files in a project
  • /v1/teams/{teamId}/projects - List projects for a team
For complete API documentation, refer to the Figma API Documentation.

Troubleshooting

Connection Failed

If you see a connection error:
  1. Verify your personal access token is correct and hasn’t expired
  2. Ensure you have the necessary permissions in Figma
  3. Check that your Figma account is active

Missing Files or Projects

If you can’t see certain files or projects:
  1. Confirm you have access to those resources in Figma
  2. Check if the files are in a team or organization you have access to
  3. Ensure your token has the necessary scopes

Security Considerations

  • Personal access tokens are encrypted at rest in Serval
  • Tokens are only transmitted over secure HTTPS connections
  • We recommend rotating your tokens periodically
  • Use instance names to clearly identify which Figma workspace each token accesses

Support

For additional help with the Figma integration:
  • Contact your Serval administrator
  • Reach out to Serval support
  • Consult the Figma API Documentation for API-specific questions