name: figma
description: Design and prototype interfaces in Figma - create, edit, and manage design files, components, and collaborate on design projects
category: design

Figma Skill

Overview

Enables Claude to interact with Figma for UI/UX design work, including creating and managing design files, viewing designs, exporting assets, and managing team collaboration.

Quick Install

curl -sSL https://canifi.com/skills/figma/install.sh | bash

Or manually:

cp -r skills/figma ~/.canifi/skills/

Setup

Configure via canifi-env:

# First, ensure canifi-env is installed:
# curl -sSL https://canifi.com/install.sh | bash

canifi-env set FIGMA_EMAIL "[email protected]"
canifi-env set FIGMA_PASSWORD "your-password"

Privacy & Authentication

Your credentials, your choice. Canifi LifeOS respects your privacy.

Option 1: Manual Browser Login (Recommended)

If you prefer not to share credentials with Claude Code:
1. Complete the Browser Automation Setup using CDP mode
2. Login to the service manually in the Playwright-controlled Chrome window
3. Claude will use your authenticated session without ever seeing your password

Option 2: Environment Variables

If you're comfortable sharing credentials, you can store them locally:

canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"

Note: Credentials stored in canifi-env are only accessible locally on your machine and are never transmitted.

Capabilities

• View and navigate design files, frames, and pages
• Export assets in various formats (PNG, SVG, PDF, JPG)
• Access and manage team libraries and components
• Review design comments and feedback
• Check file version history and restore previous versions
• Manage file sharing and permissions

Usage Examples

Example 1: Export Design Assets

User: "Export all icons from my Figma design file as SVGs"
Claude: I'll navigate to your Figma file and export the icons.
1. Opening Figma via Playwright MCP
2. Navigating to the specified file
3. Selecting icon frames
4. Exporting as SVG format
5. Downloading to your specified location

Example 2: View Design Feedback

User: "Show me all comments on my homepage design"
Claude: I'll pull up the comments on your homepage design.
1. Opening the design file in Figma
2. Navigating to the homepage frame
3. Displaying all comments with author and timestamp
4. Summarizing feedback themes

Example 3: Check Design Versions

User: "What changes were made to the login screen this week?"
Claude: I'll review the version history for the login screen.
1. Accessing file version history
2. Filtering changes from this week
3. Comparing versions to identify modifications
4. Summarizing key design changes

Authentication Flow

1. Navigate to figma.com via Playwright MCP
2. Enter email credentials
3. Handle password entry
4. Complete 2FA if required (via iMessage notification)
5. Maintain session cookies for subsequent requests

Error Handling

• Login Failed: Retry authentication up to 3 times, then notify via iMessage
• Session Expired: Re-authenticate automatically using stored credentials
• Rate Limited: Implement exponential backoff (1s, 2s, 4s, 8s)
• 2FA Required: Send code request notification via iMessage, wait for user input
• File Not Found: Prompt user to verify file URL or name
• Permission Denied: Notify user of access restrictions

Self-Improvement Instructions

When encountering new Figma UI patterns or workflows:
1. Document the specific interaction pattern
2. Note any selectors or navigation paths that changed
3. Suggest updates to this skill file via PR or Notion log
4. Track success/failure rates for common operations

Notes

• Figma files can be large; allow adequate loading time
• Some features require paid Figma plans
• Plugin interactions are limited via browser automation
• Real-time collaboration features may show other users' cursors
• FigJam boards use different UI patterns than design files