Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · Data Analysis
Figma
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
skill openclawclawhub Free
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
⬇ 0 downloads ★ 0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- 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
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 2.1.0
Provenance
- Publisher
- maddiedreese
- Source page
- View original listing
- Canonical URL
- Open canonical page
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.
Category context
Data access, storage, extraction, analysis, reporting, and insight generation.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
5 Docs1 Config
- SKILL.md
- references/accessibility-guidelines.md
- references/design-patterns.md
- references/export-formats.md
- references/figma-api-reference.md
- assets/templates/brand-guidelines-template.json