# Send Figma to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "figma", "name": "Figma", "source": "tencent", "type": "skill", "category": "数据分析", "sourceUrl": "https://clawhub.ai/maddiedreese/figma", "canonicalUrl": "https://clawhub.ai/maddiedreese/figma", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/figma", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=figma", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "assets/templates/brand-guidelines-template.json", "references/accessibility-guidelines.md", "references/design-patterns.md", "references/export-formats.md", "references/figma-api-reference.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "figma", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-29T12:13:29.358Z", "expiresAt": "2026-05-06T12:13:29.358Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=figma", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=figma", "contentDisposition": "attachment; filename=\"figma-2.1.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "figma" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/figma" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/figma", "downloadUrl": "https://openagent3.xyz/downloads/figma", "agentUrl": "https://openagent3.xyz/skills/figma/agent", "manifestUrl": "https://openagent3.xyz/skills/figma/agent.json", "briefUrl": "https://openagent3.xyz/skills/figma/agent.md" } } ``` ## Documentation ### Figma Design Analysis & Export Professional-grade Figma integration for design system analysis, asset export, and comprehensive design auditing. ### 1. File Operations & Analysis File inspection: Get complete JSON representation of any Figma file Component extraction: List all components, styles, and design tokens Asset export: Batch export frames, components, or specific nodes as PNG/SVG/PDF Version management: Access specific file versions and branch information Example usage: "Export all components from this design system file" "Get the JSON data for these specific frames" "Show me all the colors and typography used in this file" ### 2. Design System Management Style auditing: Analyze color usage, typography consistency, spacing patterns Component analysis: Identify unused components, measure usage patterns Brand compliance: Check adherence to brand guidelines across files Design token extraction: Generate CSS/JSON design tokens from Figma styles Example usage: "Audit this design system for accessibility issues" "Generate CSS custom properties from these Figma styles" "Find all inconsistencies in our component library" ### 3. Bulk Asset Export Multi-format exports: Export assets as PNG, SVG, PDF, or WEBP Platform-specific sizing: Generate @1x, @2x, @3x assets for iOS/Android Organized output: Automatic folder organization by format or platform Client packages: Complete deliverable packages with documentation Example usage: "Export all components in PNG and SVG formats" "Generate complete asset package for mobile app development" "Create client deliverable with all marketing assets" ### 4. Accessibility & Quality Analysis Contrast checking: Verify WCAG color contrast requirements Font size analysis: Ensure readable typography scales Interactive element sizing: Check touch target requirements Focus state validation: Verify keyboard navigation patterns Example usage: "Check this design for WCAG AA compliance" "Analyze touch targets for mobile usability" "Generate an accessibility report for this app design" ### Authentication Setup # Set your Figma access token export FIGMA_ACCESS_TOKEN="your-token-here" # Or store in .env file echo "FIGMA_ACCESS_TOKEN=your-token" >> .env ### Basic Operations # Get file information and structure python scripts/figma_client.py get-file "your-file-key" # Export frames as images python scripts/export_manager.py export-frames "file-key" --formats png,svg # Analyze design system consistency python scripts/style_auditor.py audit-file "file-key" --generate-html # Check accessibility compliance python scripts/accessibility_checker.py "file-key" --level AA --format html ### Design System Audit Workflow Extract file data → Get components, styles, and structure Analyze consistency → Check for style variations and unused elements Generate report → Create detailed findings and recommendations Manual implementation → Use findings to guide design improvements ### Asset Export Workflow Identify export targets → Specify frames, components, or nodes Configure export settings → Set formats, sizes, and naming conventions Batch process → Export multiple assets simultaneously Organize output → Structure files for handoff or implementation ### Analysis & Documentation Workflow Extract design data → Pull components, styles, and design tokens Audit compliance → Check accessibility and brand consistency Generate documentation → Create style guides and component specs Export deliverables → Package assets for development or client handoff ### scripts/ figma_client.py - Complete Figma API wrapper with all REST endpoints export_manager.py - Professional asset export with multiple formats and scales style_auditor.py - Design system analysis and brand consistency checking accessibility_checker.py - Comprehensive WCAG compliance validation and reporting ### references/ figma-api-reference.md - Complete API documentation and examples design-patterns.md - UI patterns and component best practices accessibility-guidelines.md - WCAG compliance requirements export-formats.md - Asset export options and specifications ### assets/ templates/design-system/ - Pre-built component library templates templates/brand-kits/ - Standard brand guideline structures templates/wireframes/ - Common layout patterns and flows ### With Development Workflows # Generate design tokens for CSS python scripts/export_manager.py export-tokens "file-key" --format css # Create component documentation python scripts/figma_client.py document-components "file-key" --output docs/ ### With Brand Management # Audit brand compliance in designs python scripts/style_auditor.py audit-file "file-key" --brand-colors "#FF0000,#00FF00,#0000FF" # Extract current brand colors for analysis python scripts/figma_client.py extract-colors "file-key" --output brand-colors.json ### With Client Deliverables # Generate client presentation assets python scripts/export_manager.py client-package "file-key" --template presentation # Create development handoff assets python scripts/export_manager.py dev-handoff "file-key" --include-specs ### Read-Only Operations This skill provides read-only access to Figma files through the REST API. It can: ✅ Extract data, components, and styles ✅ Export assets in multiple formats ✅ Analyze and audit design files ✅ Generate comprehensive reports ### What It Cannot Do ❌ Modify existing files (colors, text, components) ❌ Create new designs or components ❌ Batch update multiple files ❌ Real-time collaboration features For file modifications, you would need to develop a Figma plugin using the Plugin API. ### API Rate Limiting Built-in rate limiting and retry logic to handle Figma's API constraints gracefully. ### Error Handling Comprehensive error handling with detailed logging and recovery suggestions. ### Multi-Format Support Export assets in PNG, SVG, PDF, and WEBP with platform-specific sizing. ## Trust - Source: tencent - Verification: Indexed source record - Publisher: maddiedreese - Version: 2.1.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-04-29T12:13:29.358Z - Expires at: 2026-05-06T12:13:29.358Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/figma) - [Send to Agent page](https://openagent3.xyz/skills/figma/agent) - [JSON manifest](https://openagent3.xyz/skills/figma/agent.json) - [Markdown brief](https://openagent3.xyz/skills/figma/agent.md) - [Download page](https://openagent3.xyz/downloads/figma)