Figma Workflow

Connect Figma

Get a Figma access token

Go to Figma → Settings → Personal Access Tokens
Generate a new token with File content read access

Find your file key

The file key is in the Figma URL:

https://www.figma.com/file/ABC123xyz/My-Design
                            ^^^^^^^^^^^^
                            This is the file key

Connect in UI Inspect

Go to Settings → Integrations → Figma and add:

Access token
File key
Select the project to connect to

Browse and export frames

Once connected, you can browse all frames in your Figma file:

// List all frames
const frames = await client.figma.listFrames.query({
  integrationId: "integration-uuid",
});

// frames.frames = [
//   { id: "1:23", name: "Hero Section", pageName: "Homepage", width: 1440, height: 800 },
//   { id: "1:45", name: "Card Component", pageName: "Components", width: 400, height: 300 },
// ]

Export any frame as an image:

const exported = await client.figma.exportFrame.mutate({
  integrationId: "integration-uuid",
  nodeId: "1:23",
  scale: 2, // 2x for Retina
  format: "png",
});

// exported.imageUrl = "https://figma-alpha-api.s3.us-west-2.amazonaws.com/..."

Automated comparison pipeline

Combine Figma export with the diff engine for automated design verification:

// 1. Export design from Figma
const design = await client.figma.exportFrame.mutate({
  integrationId,
  nodeId: "1:23",
  scale: 2,
  format: "png",
});

// 2. Capture implementation screenshot (via CLI or extension)
const screenshot = captureScreenshot(".hero-section");

// 3. Run comparison
const comparison = await client.comparison.create.mutate({
  projectId,
  componentName: "hero-section",
  designImageUrl: design.imageUrl,
  implementationImageUrl: screenshot.url,
});

// 4. Analyze diff
const analysis = await client.diff.analyze.mutate({
  designImage: designBase64,
  implementationImage: screenshotBase64,
  ssim: true,
});

Export settings

Format	Use case
PNG	Best for pixel-perfect comparison (recommended)
SVG	Vector graphics, not suitable for pixel comparison
JPG	Smaller file size, but lossy compression adds noise

Scale	Use case
1x	Standard displays
2x	Retina displays (recommended default)
3x	High-DPI mobile screens
4x	Maximum detail for zoomed comparisons

Verify connection

Check if your Figma integration is still valid:

const status = await client.figma.verify.mutate({ id: "integration-uuid" });
// { connected: true, fileName: "My Design", lastModified: "2025-01-15T..." }

On this page