Anima Common Errors
Overview
Use this guide to diagnose design-to-code failures without widening design-file
access or leaking tokens. Start from a reproducible file/node/settings tuple
and use a least-privilege development credential for all verification.
Prerequisites
- A sanitized error record with the design file identifier, node identifier,
selected generation settings, timestamp, and request ID where available.
- Scoped Anima and Figma credentials held in a secret store; never paste a
personal access token into a ticket, source file, or shared diagnostic log.
- A staging or disposable design fixture so fixes can be reproduced without
mutating a production design file.
Instructions
- Classify the failure as authentication, file/node resolution, generator
configuration, timeout/rate limit, or rendered-output quality.
- Reproduce it with the smallest approved frame/component and the diagnostic
commands, capturing only sanitized results.
- Correct the matching design input, entitlement, or generation configuration
and rerun only that fixture.
- Validate the generated file location, lint/build result, and visual review
before updating a broader component set.
Error Reference
Authentication Errors
| Error |
Root Cause |
Fix |
Invalid Anima token |
Token not provisioned or expired |
Request new token from Anima team |
Invalid Figma token |
PAT expired or revoked |
Generate new PAT: Figma > Settings > Access Tokens |
Unauthorized |
Token lacks file access |
Ensure Figma PAT has file read permission |
File & Node Errors
| Error |
Root Cause |
Fix |
File not found |
Wrong file key |
Extract from Figma URL: figma.com/file/{KEY}/... |
Node not found |
Invalid node ID |
Copy node link from Figma: right-click > Copy link |
No renderable content |
Selected a page or group |
Select a frame, component, or component set |
Empty files array |
Node is empty or hidden |
Unhide layers; ensure node has visible content |
Code Generation Errors
// Common generation error handler
async function safeGenerate(anima: Anima, params: any) {
try {
return await anima.generateCode(params);
} catch (err: any) {
if (err.message?.includes('rate limit')) {
console.error('Rate limited — wait 60s before retrying');
} else if (err.message?.includes('timeout')) {
console.error('Generation timed out — simplify the Figma node');
} else if (err.message?.includes('Invalid settings')) {
console.error('Invalid settings combo — check framework/styling/uiLibrary compatibility');
} else {
console.error('Generation error:', err.message);
}
return null;
}
}
Output Quality Issues
| Symptom |
Cause |
Fix |
| Messy layout |
No auto-layout in Figma |
Convert frames to auto-layout |
| Wrong colors |
Hardcoded hex instead of Figma variables |
Use Figma color variables/styles |
| Missing text |
Text is inside masked groups |
Flatten masks before generating |
| Extra wrappers |
Deeply nested groups |
Flatten group hierarchy |
| Wrong component names |
Unnamed Figma layers |
Name layers descriptively |
Valid Settings Combinations
| Framework |
Language |
Styling |
UI Library |
react |
typescript, javascript |
tailwind, css, styled-components |
none, mui, antd, shadcn |
vue |
typescript, javascript |
tailwind, css |
none |
html |
javascript |
css, tailwind |
none |
Diagnostic Script
# Verify Figma token
curl -s "https://api.figma.com/v1/me" \
-H "X-Figma-Token: ${FIGMA_TOKEN}" | jq '.handle // .err'
# Verify file access
curl -s "https://api.figma.com/v1/files/${FIGMA_FILE_KEY}" \
-H "X-Figma-Token: ${FIGMA_TOKEN}" | jq '.name // .err'
Output
- Error classified and root cause identified
- Valid settings matrix for reference
- Diagnostic commands for token and file verification
Examples
When a staging generation returns Node not found, compare the copied node ID
with the approved Figma link, then run the file-access diagnostic using a scoped
development token. Regenerate only that small frame after correcting the ID and
confirm files are emitted to the expected generated-code directory. If access
is denied, the node remains hidden, or output is empty, stop the run and ask
the file owner to correct permissions or visibility; do not expand the token’s
scope or substitute a personal token to get past the error.
Error Handling
| Failure |
Response |
| Token is invalid, expired, or over-scoped |
Stop the diagnostic, replace it through managed secret rotation, and avoid logging the value. |
| File or node cannot be resolved |
Verify the approved link and visibility with the design owner before retrying. |
| Generator times out or rate-limits |
Use bounded backoff or simplify the fixture; do not fan out uncontrolled retries. |
| Generated output is unsafe or wrong |
Keep it out of the main branch, correct source design/settings, and rerun targeted validation. |
Resources
Next Steps
For collecting debug data, see anima-debug-bundle.
1---2name: anima-common-errors3description: Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trigger: "anima error", "anima not working", "anima debug", "figma to code error".4license: MIT5---6# Anima Common Errors
7
8## Overview
9
10Use this guide to diagnose design-to-code failures without widening design-file
11access or leaking tokens. Start from a reproducible file/node/settings tuple
12and use a least-privilege development credential for all verification.
13
14## Prerequisites
15
16- A sanitized error record with the design file identifier, node identifier,
17 selected generation settings, timestamp, and request ID where available.
18- Scoped Anima and Figma credentials held in a secret store; never paste a
19 personal access token into a ticket, source file, or shared diagnostic log.
20- A staging or disposable design fixture so fixes can be reproduced without
21 mutating a production design file.
22
23## Instructions
24
251. Classify the failure as authentication, file/node resolution, generator
26 configuration, timeout/rate limit, or rendered-output quality.
272. Reproduce it with the smallest approved frame/component and the diagnostic
28 commands, capturing only sanitized results.
293. Correct the matching design input, entitlement, or generation configuration
30 and rerun only that fixture.
314. Validate the generated file location, lint/build result, and visual review
32 before updating a broader component set.
33
34## Error Reference
35
36### Authentication Errors
37
38| Error | Root Cause | Fix |
39|-------|-----------|-----|
40| `Invalid Anima token` | Token not provisioned or expired | Request new token from Anima team |
41| `Invalid Figma token` | PAT expired or revoked | Generate new PAT: Figma > Settings > Access Tokens |
42| `Unauthorized` | Token lacks file access | Ensure Figma PAT has file read permission |
43
44### File & Node Errors
45
46| Error | Root Cause | Fix |
47|-------|-----------|-----|
48| `File not found` | Wrong file key | Extract from Figma URL: `figma.com/file/{KEY}/...` |
49| `Node not found` | Invalid node ID | Copy node link from Figma: right-click > Copy link |
50| `No renderable content` | Selected a page or group | Select a frame, component, or component set |
51| Empty `files` array | Node is empty or hidden | Unhide layers; ensure node has visible content |
52
53### Code Generation Errors
54
55```typescript
56// Common generation error handler
57async function safeGenerate(anima: Anima, params: any) {
58 try {
59 return await anima.generateCode(params);
60 } catch (err: any) {
61 if (err.message?.includes('rate limit')) {
62 console.error('Rate limited — wait 60s before retrying');
63 } else if (err.message?.includes('timeout')) {
64 console.error('Generation timed out — simplify the Figma node');
65 } else if (err.message?.includes('Invalid settings')) {
66 console.error('Invalid settings combo — check framework/styling/uiLibrary compatibility');
67 } else {
68 console.error('Generation error:', err.message);
69 }
70 return null;
71 }
72}
73```
74
75### Output Quality Issues
76
77| Symptom | Cause | Fix |
78|---------|-------|-----|
79| Messy layout | No auto-layout in Figma | Convert frames to auto-layout |
80| Wrong colors | Hardcoded hex instead of Figma variables | Use Figma color variables/styles |
81| Missing text | Text is inside masked groups | Flatten masks before generating |
82| Extra wrappers | Deeply nested groups | Flatten group hierarchy |
83| Wrong component names | Unnamed Figma layers | Name layers descriptively |
84
85### Valid Settings Combinations
86
87| Framework | Language | Styling | UI Library |
88|-----------|----------|---------|------------|
89| `react` | `typescript`, `javascript` | `tailwind`, `css`, `styled-components` | `none`, `mui`, `antd`, `shadcn` |
90| `vue` | `typescript`, `javascript` | `tailwind`, `css` | `none` |
91| `html` | `javascript` | `css`, `tailwind` | `none` |
92
93## Diagnostic Script
94
95```bash
96# Verify Figma token
97curl -s "https://api.figma.com/v1/me" \
98 -H "X-Figma-Token: ${FIGMA_TOKEN}" | jq '.handle // .err'
99
100# Verify file access
101curl -s "https://api.figma.com/v1/files/${FIGMA_FILE_KEY}" \
102 -H "X-Figma-Token: ${FIGMA_TOKEN}" | jq '.name // .err'
103```
104
105## Output
106
107- Error classified and root cause identified
108- Valid settings matrix for reference
109- Diagnostic commands for token and file verification
110
111## Examples
112
113When a staging generation returns `Node not found`, compare the copied node ID
114with the approved Figma link, then run the file-access diagnostic using a scoped
115development token. Regenerate only that small frame after correcting the ID and
116confirm files are emitted to the expected generated-code directory. If access
117is denied, the node remains hidden, or output is empty, stop the run and ask
118the file owner to correct permissions or visibility; do not expand the token’s
119scope or substitute a personal token to get past the error.
120
121## Error Handling
122
123| Failure | Response |
124|---------|----------|
125| Token is invalid, expired, or over-scoped | Stop the diagnostic, replace it through managed secret rotation, and avoid logging the value. |
126| File or node cannot be resolved | Verify the approved link and visibility with the design owner before retrying. |
127| Generator times out or rate-limits | Use bounded backoff or simplify the fixture; do not fan out uncontrolled retries. |
128| Generated output is unsafe or wrong | Keep it out of the main branch, correct source design/settings, and rerun targeted validation. |
129
130## Resources
131
132- [Anima API Docs](https://docs.animaapp.com/docs/anima-api)
133- [Figma API Reference](https://www.figma.com/developers/api)
134
135## Next Steps
136
137For collecting debug data, see `anima-debug-bundle`.