seed-dev-figma-v3-migration-plugin

Maintains type-safe V2-to-V3 component mappings for the Figma migration plugin.

1.1k|89|Updated Mar 11, 2021

Search Tags:#Figma #mapping #Type Safety #typeScript #Design system #component migration #figma api

Ready to run

npx skills add https://github.com/daangn/seed-design --skill seed-dev-figma-v3-migration-plugin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: seed-dev-figma-v3-migration-plugin
Source: https://github.com/daangn/seed-design/tree/main/skills/seed-dev-figma-v3-migration-plugin
Command: npx skills add https://github.com/daangn/seed-design --skill seed-dev-figma-v3-migration-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Keeping Figma V2-to-V3 component migration mappings accurate is error-prone: component metadata changes over time, property keys must match generated definitions exactly, and manual mapping edits easily break type safety. This Skill guides the full maintenance workflow for the figma-v3-migration plugin.

Core Features & Use Cases

Metadata Synchronization: Runs bun extract to pull the latest V3 component metadata from the Figma API into generated .d.ts files.
Mapping Authoring: Guides creation and update of ComponentMapping files with variant maps, property conversion logic, and nested childrenMappings.
Type-Safe Validation: Verifies mappings with bun run typecheck:main so invalid property names or variant values fail at compile time.
Use Case: A designer publishes a new V3 Action Button variant. Use this Skill to re-extract metadata, update buttons.ts variant mappings, and confirm type safety before committing.

Quick Start

Update the Figma V3 migration mappings for the button components and verify them with the typecheck command.

Frequently Asked Questions about seed-dev-figma-v3-migration-plugin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I update Figma V2 to V3 component migration mappings?▼

Run `bun extract` in tools/figma-v3-migration to sync the latest metadata, review changes in the generated component-set files, then update the matching mapping files in src/main/mapping. Finish by running `bun run typecheck:main` to verify type safety.

How do I add a new component mapping to the Figma migration plugin?▼

Check the generated V2 and V3 `.d.ts` files for exact component names and property keys, create a mapping file using the ComponentMapping type with variantMap and calculateProperties, then export it from mapping/index.ts and run the typecheck command.

Why does the Figma extract command fail?▼

Extraction fails when the FIGMA_PERSONAL_ACCESS_TOKEN environment variable is missing or expired. Generate a new token in Figma Settings under Personal access tokens, export it, and rerun `bun extract`.

Why do I get 'Property does not exist' type errors in mapping files?▼

This error means the property key does not match the generated metadata exactly. Open the component's generated `.d.ts` file and copy the precise `PropertyName#NodeId` key and variant options into your mapping.

Can the migration plugin handle nested child components?▼

Yes, parent mappings support a childrenMappings array containing separate ComponentMapping definitions for child components. The action-sheet mapping demonstrates this with menu group and menu item child mappings.