Skip to main content
figma-migration-deep-dive Migrate design systems between Figma files, or from other tools to Figma via API.
Use when migrating design tokens between files, syncing variables across libraries,
or building automated migration pipelines for Figma.
Trigger with phrases like "migrate figma", "figma migration",
"move figma library", "figma file migration", "sync figma files".
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill figma-migration-deep-dive명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Implement user sign-up and sign-in flows with Clerk.
Use when building authentication UI, customizing sign-in experience,
or implementing OAuth social login.
Trigger with phrases like "clerk sign-in", "clerk sign-up",
"clerk login flow", "clerk OAuth", "clerk social login".
Implement session management and middleware with Clerk.
Use when managing user sessions, configuring route protection,
or implementing token refresh and custom JWT templates.
Trigger with phrases like "clerk session", "clerk middleware",
"clerk route protection", "clerk token", "clerk JWT".
Configure enterprise SSO, role-based access control, and organization management.
Use when implementing SSO integration, configuring role-based permissions,
or setting up organization-level controls.
Trigger with phrases like "clerk SSO", "clerk RBAC",
"clerk enterprise", "clerk roles", "clerk permissions", "clerk organizations".
name figma-migration-deep-dive description Migrate design systems between Figma files, or from other tools to Figma via API.
Use when migrating design tokens between files, syncing variables across libraries,
or building automated migration pipelines for Figma.
Trigger with phrases like "migrate figma", "figma migration",
"move figma library", "figma file migration", "sync figma files".
allowed-tools Read, Write, Edit, Bash(npm:*), Bash(node:*) version 1.6.0 license MIT author Jeremy Longshore <jeremy@intentsolutions.io> tags ["saas","figma"] compatibility Designed for Claude Code
Figma Migration Deep Dive
Overview
Automate migration of design data between Figma files, from other tools to Figma, or from Figma styles to the Variables API. Covers inventory, extraction, transformation, and validation.
Prerequisites
Source and destination Figma file keys
FIGMA_PAT with file_content:read and file_variables:write (Enterprise) scopesUnderstanding of source file structure
Instructions
Step 1: Inventory Source File
const PAT = process.env .FIGMA_PAT !;
async function inventoryFile (fileKey : string const res = await fetch (
`https://api.figma.com/v1/files/${fileKey} ` ,
{ headers : { 'X-Figma-Token' : PAT } }
);
const file = await res.json ();
const inventory = {
name : file.name ,
pages : file.document .children .map ((p : any p.name ),
componentCount : Object .keys (file.components ).length ,
styleCount : Object .keys (file.styles
length
styles
fills
Object
values
styles
filter
(s : any
style_type
'FILL'
length
text
Object
values
styles
filter
(s : any
style_type
'TEXT'
length
effects
Object
values
styles
filter
(s : any
style_type
'EFFECT'
length
grids
Object
values
styles
filter
(s : any
style_type
'GRID'
length
let
0
function
countNodes
node : any
if
children
children
forEach
countNodes
document
as
any
totalNodes
return
const
await
inventoryFile
env
FIGMA_FILE_KEY
console
log
`File: ${inv.name} `
console
log
`Pages: ${inv.pages.join(', ' )} `
console
log
`Components: ${inv.componentCount} , Styles: ${inv.styleCount} `
console
log
`Total nodes: ${(inv as any ).totalNodes} `
Step 2: Extract Styles from Source async function extractAllStyles (fileKey : string const file = await fetch (
`https://api.figma.com/v1/files/${fileKey} ` ,
{ headers : { 'X-Figma-Token' : PAT } }
).then (r =>json ());
const styleNodeIds = Object .keys (file.styles );
const nodesRes = await fetch (
`https://api.figma.com/v1/files/${fileKey} /nodes?ids=${styleNodeIds.join(',' )} ` ,
{ headers : { 'X-Figma-Token' : PAT } }
).then (r =>json ());
const extracted = [];
for (const [nodeId, styleMeta] of Object .entries (file.styles ) as any []) {
const node = nodesRes.nodes [nodeId]?.document ;
if (!node) continue ;
extracted.push ({
name : styleMeta.name ,
type : styleMeta.style_type ,
nodeId,
data : {
fills : node.fills ,
strokes : node.strokes ,
effects : node.effects ,
style : node.style ,
characters : node.characters ,
},
});
}
return extracted;
}
Step 3: Transform and Map to Target
interface MigrationToken {
name : string ;
category : 'color' | 'typography' | 'effect' ;
source : { file : string ; nodeId : string };
value : any ;
}
function transformStyles (styles : any [], sourceFileKey : string MigrationToken [] {
return styles.map (style =>switch (style.type ) {
case 'FILL' :
const fill = style.data .fills ?.[0 ];
return {
name : style.name ,
category : 'color' as const ,
source : { file : sourceFileKey, nodeId : style.nodeId },
value : fill?.color
? {
r : Math .round (fill.color .r * 255 ),
g : Math .round (fill.color .g * 255 ),
b : Math .round (fill.color .b * 255 ),
a : fill.color .a ?? 1 ,
}
: null ,
};
case 'TEXT' :
return {
name : style.name ,
category : 'typography' as const ,
source : { file : sourceFileKey, nodeId : style.nodeId },
value : style.data .style
? {
fontFamily : style.data .style .fontFamily ,
fontSize : style.data .style .fontSize ,
fontWeight : style.data .style .fontWeight ,
lineHeight : style.data .style .lineHeightPx ,
}
: null ,
};
default :
return {
name : style.name ,
category : 'effect' as const ,
source : { file : sourceFileKey, nodeId : style.nodeId },
value : style.data .effects ,
};
}
}).filter (t =>value !== null );
}
Step 4: Write to Target (Variables API)
async function migrateToVariables (
targetFileKey : string ,
tokens : MigrationToken []
) {
const colorTokens = tokens.filter (t =>category === 'color' );
const payload = {
variableCollections : [{
action : 'CREATE' as const ,
id : 'temp_collection_1' ,
name : 'Migrated Colors' ,
}],
variables : colorTokens.map ((token, i ) => ({
action : 'CREATE' as const ,
id : `temp_var_${i} ` ,
name : token.name .replace (/\//g , '/' ),
variableCollectionId : 'temp_collection_1' ,
resolvedType : 'COLOR' as const ,
codeSyntax : { WEB : `--${token.name.toLowerCase().replace(/[\s/]+/g, '-' )} ` },
})),
variableModeValues : colorTokens.map ((token, i ) => ({
variableId : `temp_var_${i} ` ,
modeId : '' ,
value : {
r : token.value .r / 255 ,
g : token.value .g / 255 ,
b : token.value .b / 255 ,
a : token.value .a ,
},
})),
};
const res = await fetch (
`https://api.figma.com/v1/files/${targetFileKey} /variables` ,
{
method : 'POST' ,
headers : {
'X-Figma-Token' : PAT ,
'Content-Type' : 'application/json' ,
},
body : JSON .stringify (payload),
}
);
if (!res.ok ) throw new Error (`Variable creation failed: ${res.status} ${await res.text()} ` );
return res.json ();
}
Step 5: Validation async function validateMigration (
sourceFileKey : string ,
targetFileKey : string
): Promise <{ passed : boolean ; issues : string [] }> {
const sourceStyles = await extractAllStyles (sourceFileKey);
const targetVars = await fetch (
`https://api.figma.com/v1/files/${targetFileKey} /variables/local` ,
{ headers : { 'X-Figma-Token' : PAT } }
).then (r =>json ());
const issues : string [] = [];
const targetNames = new Set (
Object .values (targetVars.meta .variables ).map ((v : any v.name )
);
for (const style of sourceStyles) {
if (style.type === 'FILL' && !targetNames.has (style.name )) {
issues.push (`Missing in target: ${style.name} ` );
}
}
return { passed : issues.length === 0 , issues };
}
Output
Source file inventoried (components, styles, nodes)
Styles extracted and transformed to tokens
Tokens written to target file via Variables API
Migration validated with comparison report
Error Handling Error Cause Solution 403 on Variables POST Not Enterprise Use JSON export instead of Variables API Duplicate variable names Name collision in target Add prefix/suffix to migrated names Missing node data Node deleted between fetch and read Re-fetch with error handling Large file timeout File >100MB Use /nodes endpoint for specific pages
Examples Dry-run a styles→variables migration and review the mapping before writing (Steps 2-3):
node migrate.js --source ${SOURCE_FILE_KEY} --target ${TARGET_FILE_KEY} --dry-run
48 styles found in source (32 FILL, 12 TEXT, 4 EFFECT)
32 FILL styles → color variables in collection "Primitives"
Color/Brand/Primary → color/brand/primary #4F46E5
Color/Neutral/100 → color/neutral/100 #F5F5F5
2 styles skipped: gradient fills (no variable equivalent) — kept as styles
DRY RUN — no POST to /v1/files/{key}/variables performed
Then re-run without --dry-run to write via the Variables API and validate with Step 5 (GET /v1/files/{key}/variables/local count check). Transform rules: references/transform-and-map-to-target.md.
Resources
Next Steps For advanced troubleshooting, see figma-advanced-troubleshooting.
