Към всички skills

figma

sundial-org · Дизайн

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 report

Оригинален текст · няма потвърден превод на български

Първо прочетете инструкцията.

Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.

Оригинален SKILL.md
GitHub хранилище
Звезди на репото
370
Лиценз
Не е посочен. Проверете в репозитория.
Последна проверка на записа
Няма посочена дата

Добавете в своя инструмент.

Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.

npx skills add sundial-org/awesome-openclaw-skills

Страницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.

Откъс от SKILL.md

Началото на файла на автора, без превод.

Figma Design Analysis & Export

Professional-grade Figma integration for design system analysis, asset export, and comprehensive design auditing.

Core Capabilities

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"

Quick Start

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

Целият SKILL.md в GitHub