mcpField
F
figma-assets-manager

figma-assets-manager

github.com/sergekostenchukDesign & UI3250 installsUpdated 18w ago
Repository

About figma-assets-manager

A skill for managing Figma assets from inventory and export through preparation, auditing, and frontend handoff. It focuses on asset manifests and avoids unscoped design-file changes or unapproved external transfers.

Key features

  1. 01Inventory and audit assets
  2. 02Export selected nodes
  3. 03Prepare names and dimensions
  4. 04Create frontend handoff manifests
  5. 05Track formats, scales, and usage

Use cases

  1. 01List assets and export requirements
  2. 02Prepare assets for implementation
  3. 03Identify missing or oversized assets
  4. 04Hand off exported assets to frontend work

MCP support

The skill can use Figma MCP to export or download assets, and requires invoking `figma:figma-use` before using the Figma tool.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-assets-manager

After installing, type/figma-assets-managerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
asset-manifest-template.json
evals/
evals.json

Details

From the project README

Figma Assets Manager

Use this skill for asset extraction and preparation. It is not a generic image generator and it should not mutate design files unless explicitly scoped.

Modes

  • inventory: list available assets and export needs.
  • export: export selected nodes/assets in requested formats.
  • prepare: optimize naming, density, dimensions, and implementation placement.
  • handoff: produce a manifest for frontend integration.
  • audit: flag missing, oversized, duplicated, or inaccessible assets.

Workflow

  1. Confirm target nodes, formats, scales, intended code destination, and privacy.
  2. If Figma MCP export/download is needed, invoke figma:figma-use before the Figma tool.
  3. Prefer SVG for icons and simple vector marks; prefer raster formats for photography or complex bitmap media.
  4. Record license/usage assumptions if assets are third-party or brand-sensitive.
  5. Write or request an asset manifest with source node, output path, format, scale, dimensions, and intended use.
  6. For frontend integration, hand off to webapp-ui-skill or marketing-site-skill after export.

Output Shape

Use assets/asset-manifest-template.json or summarize the same fields in Markdown.

Boundaries

  • Do not upload private assets to optimization or CDN services without explicit approval.
  • Do not replace editable Figma vectors with flattened raster assets unless the target implementation requires it.
  • Do not assume fonts are licensed for web embedding; report missing font/license checks.

Validation And Eval

  • Validate that exports have source node, format, scale, dimensions, output path, and intended use.
  • Check that private assets remain local unless an approved external transfer is recorded.
  • Use evals/evals.json to test SVG export manifest behavior and private-asset external optimization refusal.

Comments

Markdown supported