skills.rest
daangn
daangnOFFICIAL
Explore all skills by this author →
Website𝕏@daangnteamGitHub

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
One-click install
npx skills add https://github.com/daangn/seed-design --skill seed-dev-figma-v3-migration-plugin
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
codesour-designcodesour-design

apply-design-system

Reconnects existing Figma designs to published design system components.

Community
Advanced
coinbasecoinbase
493

figma.audit-connect

Audit Figma Code Connect mapping files for accuracy and completeness.

Official
Advanced
tankpkgtankpkg
1

@tank/figma-plugin

Guide Figma plugin development using the Plugin API and Dev Mode codegen.

Official
Advanced