{ "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": { "downloadMode": "redirect", "downloadUrl": "/downloads/figma", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=figma", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "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" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-23T16:43:11.935Z", "expiresAt": "2026-04-30T16:43:11.935Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard", "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "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." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/figma", "agentPageUrl": "https://openagent3.xyz/skills/figma/agent", "manifestUrl": "https://openagent3.xyz/skills/figma/agent.json", "briefUrl": "https://openagent3.xyz/skills/figma/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "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." ], "prompts": [ { "label": "New install", "body": "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." }, { "label": "Upgrade existing", "body": "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." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Figma Design Analysis & Export", "body": "Professional-grade Figma integration for design system analysis, asset export, and comprehensive design auditing." }, { "title": "1. File Operations & Analysis", "body": "File inspection: Get complete JSON representation of any Figma file\nComponent extraction: List all components, styles, and design tokens\nAsset export: Batch export frames, components, or specific nodes as PNG/SVG/PDF\nVersion management: Access specific file versions and branch information\n\nExample usage:\n\n\"Export all components from this design system file\"\n\"Get the JSON data for these specific frames\"\n\"Show me all the colors and typography used in this file\"" }, { "title": "2. Design System Management", "body": "Style auditing: Analyze color usage, typography consistency, spacing patterns\nComponent analysis: Identify unused components, measure usage patterns\nBrand compliance: Check adherence to brand guidelines across files\nDesign token extraction: Generate CSS/JSON design tokens from Figma styles\n\nExample usage:\n\n\"Audit this design system for accessibility issues\"\n\"Generate CSS custom properties from these Figma styles\"\n\"Find all inconsistencies in our component library\"" }, { "title": "3. Bulk Asset Export", "body": "Multi-format exports: Export assets as PNG, SVG, PDF, or WEBP\nPlatform-specific sizing: Generate @1x, @2x, @3x assets for iOS/Android\nOrganized output: Automatic folder organization by format or platform\nClient packages: Complete deliverable packages with documentation\n\nExample usage:\n\n\"Export all components in PNG and SVG formats\"\n\"Generate complete asset package for mobile app development\"\n\"Create client deliverable with all marketing assets\"" }, { "title": "4. Accessibility & Quality Analysis", "body": "Contrast checking: Verify WCAG color contrast requirements\nFont size analysis: Ensure readable typography scales\nInteractive element sizing: Check touch target requirements\nFocus state validation: Verify keyboard navigation patterns\n\nExample usage:\n\n\"Check this design for WCAG AA compliance\"\n\"Analyze touch targets for mobile usability\"\n\"Generate an accessibility report for this app design\"" }, { "title": "Authentication Setup", "body": "# Set your Figma access token\nexport FIGMA_ACCESS_TOKEN=\"your-token-here\"\n\n# Or store in .env file\necho \"FIGMA_ACCESS_TOKEN=your-token\" >> .env" }, { "title": "Basic Operations", "body": "# Get file information and structure\npython scripts/figma_client.py get-file \"your-file-key\"\n\n# Export frames as images\npython scripts/export_manager.py export-frames \"file-key\" --formats png,svg\n\n# Analyze design system consistency\npython scripts/style_auditor.py audit-file \"file-key\" --generate-html\n\n# Check accessibility compliance\npython scripts/accessibility_checker.py \"file-key\" --level AA --format html" }, { "title": "Design System Audit Workflow", "body": "Extract file data → Get components, styles, and structure\nAnalyze consistency → Check for style variations and unused elements\nGenerate report → Create detailed findings and recommendations\nManual implementation → Use findings to guide design improvements" }, { "title": "Asset Export Workflow", "body": "Identify export targets → Specify frames, components, or nodes\nConfigure export settings → Set formats, sizes, and naming conventions\nBatch process → Export multiple assets simultaneously\nOrganize output → Structure files for handoff or implementation" }, { "title": "Analysis & Documentation Workflow", "body": "Extract design data → Pull components, styles, and design tokens\nAudit compliance → Check accessibility and brand consistency\nGenerate documentation → Create style guides and component specs\nExport deliverables → Package assets for development or client handoff" }, { "title": "scripts/", "body": "figma_client.py - Complete Figma API wrapper with all REST endpoints\nexport_manager.py - Professional asset export with multiple formats and scales\nstyle_auditor.py - Design system analysis and brand consistency checking\naccessibility_checker.py - Comprehensive WCAG compliance validation and reporting" }, { "title": "references/", "body": "figma-api-reference.md - Complete API documentation and examples\ndesign-patterns.md - UI patterns and component best practices\naccessibility-guidelines.md - WCAG compliance requirements\nexport-formats.md - Asset export options and specifications" }, { "title": "assets/", "body": "templates/design-system/ - Pre-built component library templates\ntemplates/brand-kits/ - Standard brand guideline structures\ntemplates/wireframes/ - Common layout patterns and flows" }, { "title": "With Development Workflows", "body": "# Generate design tokens for CSS\npython scripts/export_manager.py export-tokens \"file-key\" --format css\n\n# Create component documentation\npython scripts/figma_client.py document-components \"file-key\" --output docs/" }, { "title": "With Brand Management", "body": "# Audit brand compliance in designs\npython scripts/style_auditor.py audit-file \"file-key\" --brand-colors \"#FF0000,#00FF00,#0000FF\"\n\n# Extract current brand colors for analysis\npython scripts/figma_client.py extract-colors \"file-key\" --output brand-colors.json" }, { "title": "With Client Deliverables", "body": "# Generate client presentation assets\npython scripts/export_manager.py client-package \"file-key\" --template presentation\n\n# Create development handoff assets\npython scripts/export_manager.py dev-handoff \"file-key\" --include-specs" }, { "title": "Read-Only Operations", "body": "This skill provides read-only access to Figma files through the REST API. It can:\n\n✅ Extract data, components, and styles\n✅ Export assets in multiple formats\n✅ Analyze and audit design files\n✅ Generate comprehensive reports" }, { "title": "What It Cannot Do", "body": "❌ Modify existing files (colors, text, components)\n❌ Create new designs or components\n❌ Batch update multiple files\n❌ Real-time collaboration features\n\nFor file modifications, you would need to develop a Figma plugin using the Plugin API." }, { "title": "API Rate Limiting", "body": "Built-in rate limiting and retry logic to handle Figma's API constraints gracefully." }, { "title": "Error Handling", "body": "Comprehensive error handling with detailed logging and recovery suggestions." }, { "title": "Multi-Format Support", "body": "Export assets in PNG, SVG, PDF, and WEBP with platform-specific sizing." } ], "body": "Figma Design Analysis & Export\n\nProfessional-grade Figma integration for design system analysis, asset export, and comprehensive design auditing.\n\nCore Capabilities\n1. File Operations & Analysis\nFile inspection: Get complete JSON representation of any Figma file\nComponent extraction: List all components, styles, and design tokens\nAsset export: Batch export frames, components, or specific nodes as PNG/SVG/PDF\nVersion management: Access specific file versions and branch information\n\nExample usage:\n\n\"Export all components from this design system file\"\n\"Get the JSON data for these specific frames\"\n\"Show me all the colors and typography used in this file\"\n2. Design System Management\nStyle auditing: Analyze color usage, typography consistency, spacing patterns\nComponent analysis: Identify unused components, measure usage patterns\nBrand compliance: Check adherence to brand guidelines across files\nDesign token extraction: Generate CSS/JSON design tokens from Figma styles\n\nExample usage:\n\n\"Audit this design system for accessibility issues\"\n\"Generate CSS custom properties from these Figma styles\"\n\"Find all inconsistencies in our component library\"\n3. Bulk Asset Export\nMulti-format exports: Export assets as PNG, SVG, PDF, or WEBP\nPlatform-specific sizing: Generate @1x, @2x, @3x assets for iOS/Android\nOrganized output: Automatic folder organization by format or platform\nClient packages: Complete deliverable packages with documentation\n\nExample usage:\n\n\"Export all components in PNG and SVG formats\"\n\"Generate complete asset package for mobile app development\"\n\"Create client deliverable with all marketing assets\"\n4. Accessibility & Quality Analysis\nContrast checking: Verify WCAG color contrast requirements\nFont size analysis: Ensure readable typography scales\nInteractive element sizing: Check touch target requirements\nFocus state validation: Verify keyboard navigation patterns\n\nExample usage:\n\n\"Check this design for WCAG AA compliance\"\n\"Analyze touch targets for mobile usability\"\n\"Generate an accessibility report for this app design\"\nQuick Start\nAuthentication Setup\n# Set your Figma access token\nexport FIGMA_ACCESS_TOKEN=\"your-token-here\"\n\n# Or store in .env file\necho \"FIGMA_ACCESS_TOKEN=your-token\" >> .env\n\nBasic Operations\n# Get file information and structure\npython scripts/figma_client.py get-file \"your-file-key\"\n\n# Export frames as images\npython scripts/export_manager.py export-frames \"file-key\" --formats png,svg\n\n# Analyze design system consistency\npython scripts/style_auditor.py audit-file \"file-key\" --generate-html\n\n# Check accessibility compliance\npython scripts/accessibility_checker.py \"file-key\" --level AA --format html\n\nWorkflow Patterns\nDesign System Audit Workflow\nExtract file data → Get components, styles, and structure\nAnalyze consistency → Check for style variations and unused elements\nGenerate report → Create detailed findings and recommendations\nManual implementation → Use findings to guide design improvements\nAsset Export Workflow\nIdentify export targets → Specify frames, components, or nodes\nConfigure export settings → Set formats, sizes, and naming conventions\nBatch process → Export multiple assets simultaneously\nOrganize output → Structure files for handoff or implementation\nAnalysis & Documentation Workflow\nExtract design data → Pull components, styles, and design tokens\nAudit compliance → Check accessibility and brand consistency\nGenerate documentation → Create style guides and component specs\nExport deliverables → Package assets for development or client handoff\nResources\nscripts/\nfigma_client.py - Complete Figma API wrapper with all REST endpoints\nexport_manager.py - Professional asset export with multiple formats and scales\nstyle_auditor.py - Design system analysis and brand consistency checking\naccessibility_checker.py - Comprehensive WCAG compliance validation and reporting\nreferences/\nfigma-api-reference.md - Complete API documentation and examples\ndesign-patterns.md - UI patterns and component best practices\naccessibility-guidelines.md - WCAG compliance requirements\nexport-formats.md - Asset export options and specifications\nassets/\ntemplates/design-system/ - Pre-built component library templates\ntemplates/brand-kits/ - Standard brand guideline structures\ntemplates/wireframes/ - Common layout patterns and flows\nIntegration Examples\nWith Development Workflows\n# Generate design tokens for CSS\npython scripts/export_manager.py export-tokens \"file-key\" --format css\n\n# Create component documentation\npython scripts/figma_client.py document-components \"file-key\" --output docs/\n\nWith Brand Management\n# Audit brand compliance in designs\npython scripts/style_auditor.py audit-file \"file-key\" --brand-colors \"#FF0000,#00FF00,#0000FF\"\n\n# Extract current brand colors for analysis\npython scripts/figma_client.py extract-colors \"file-key\" --output brand-colors.json\n\nWith Client Deliverables\n# Generate client presentation assets\npython scripts/export_manager.py client-package \"file-key\" --template presentation\n\n# Create development handoff assets\npython scripts/export_manager.py dev-handoff \"file-key\" --include-specs\n\nLimitations & Scope\nRead-Only Operations\n\nThis skill provides read-only access to Figma files through the REST API. It can:\n\n✅ Extract data, components, and styles\n✅ Export assets in multiple formats\n✅ Analyze and audit design files\n✅ Generate comprehensive reports\nWhat It Cannot Do\n❌ Modify existing files (colors, text, components)\n❌ Create new designs or components\n❌ Batch update multiple files\n❌ Real-time collaboration features\n\nFor file modifications, you would need to develop a Figma plugin using the Plugin API.\n\nTechnical Features\nAPI Rate Limiting\n\nBuilt-in rate limiting and retry logic to handle Figma's API constraints gracefully.\n\nError Handling\n\nComprehensive error handling with detailed logging and recovery suggestions.\n\nMulti-Format Support\n\nExport assets in PNG, SVG, PDF, and WEBP with platform-specific sizing." }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/maddiedreese/figma", "publisherUrl": "https://clawhub.ai/maddiedreese/figma", "owner": "maddiedreese", "version": "2.1.0", "license": null, "verificationStatus": "Indexed source record" }, "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" } }