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".
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill figma-migration-deep-diveDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository 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".
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
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.
