Frame-by-Frame
Onion Skinning
Ghost frames with red/blue tinting — previous and next frame preview for cel animation.
What is onion skinning?
Onion skinning shows faint ghost images of adjacent frames while you work, helping you maintain consistent motion and spacing. Available in Frame-by-Frame mode with color-coded tinting on the Figma canvas.
How it looks
- Previous frames — tinted red (default color:
#ff6b6b). Shows where your elements were. - Next frames — tinted blue (default color:
#4dabf7). Shows where your elements are going. - Current frame — shown at full opacity with no tint. This is the frame you're editing.
Settings
Onion skinning is fully configurable from the FBF settings panel:
| Setting | Default | Description |
|---|---|---|
| Previous count | 2 | How many previous frames to show as ghosts. |
| Next count | 1 | How many upcoming frames to show as ghosts. |
| Previous opacity | 40% | Opacity of previous frame ghosts. Decreases with distance. |
| Next opacity | 30% | Opacity of next frame ghosts. Decreases with distance. |
| Previous color | #ff6b6b | Tint color for previous frames (red). |
| Next color | #4dabf7 | Tint color for next frames (blue). |
How it works internally
When onion skinning is enabled and you scrub through FBF frames:
- All direct children of the root frame are hidden.
- The active clip's layer is made visible at full opacity.
- Previous/next clips are made visible at reduced opacity with a color tint applied to their fills and effects.
- Onion-skinned frames are locked on the canvas to prevent accidental editing — you can only edit the current frame.
Tips
- Increase count for smooth motion — if your animation has fast movement, showing 3–4 previous frames gives better motion reference.
- Reduce opacity for complex frames — if your clips have many elements, lower the ghost opacity to keep the current frame clear.
- Color coding — the red/blue distinction makes it immediately clear which ghosts are behind you (red) and ahead of you (blue).