FrameForge Studio: The Complete Guide to Making 2D Animated Videos

FrameForge Studio is a free, browser-based 2D animation editor for building explainer and story videos with rigged characters, speech bubbles, shapes, and a full keyframe timeline — then exporting the result as a video file. Nothing is uploaded anywhere; the canvas, the character renderer, and the video export all run locally in your tab. This guide walks through every panel and feature, from your first character to your first exported video.

The Workspace at a Glance

The editor is split into five areas:

Top toolbar — playback controls, scene duration, canvas background color, undo, save/open project, PNG export, and video export.
Left panel — Character Studio, element library (puppets, bubbles, backdrops, images, shapes, icons), and the layers list.
Stage (center) — the 1920×1080 canvas where you drag, resize, and preview your scene.
Right panel — properties for whatever element is currently selected.
Bottom panel — the animation timeline, with the playhead, keyframes, and action markers.

A demo scene loads automatically when you open the tool, with two characters and two speech bubbles already animated — press Play to see it before building your own.

Building Characters in the Character Studio

Click 🧍 Character Studio to open the character builder. Every character is generated from a set of options rather than a static image, so you can mix and match freely:

Name — used as the layer name once added to the scene.
Skin tone — six swatches from light to deep.
Body — Slim, Round, or Broad, which changes torso width and proportions.
Hair — Bald + sides, Short, Parted, Bun, Long, or None, plus a hair color picker.
Mustache — on or off.
Marks — None, Bindi, or Tilak (forehead marks).
Extras — None, Glasses, Earrings, or both.
Lip color — Natural or Lipstick.
Outfit — Dhoti + sash, Saree, Kurta + pyjama, Shirt + pants, or Dress — each with its own draping, pleats, and trim rendered in code (not a flat texture).
Main / Second / Accent colors — control the outfit's primary fabric, secondary fabric (e.g. dhoti waistband or saree blouse), and trim/sash color.
Jewellery — adds bangles, a necklace, and other accents (most visible on saree and dress outfits).
Hand prop — None, Phone, Cup of chai, Bag, Book, or Walking stick, held in the character's front hand.

The live preview canvas on the left shows your character at full size, already breathing in its currently selected action (see the action buttons below the preview: idle, walk, run, sit, jump, talk, wave — click any one to preview that motion loop). Click 🎲 Random to generate a random combination of all the above, useful for quickly populating a crowd scene.

When you're happy with the design, click Add to scene. If you opened the Studio from an existing character's properties panel (via ✏️ Edit design in Studio), the button instead reads Update character and applies your changes to that character in place, keeping its position and animation intact.

Characters vs. Puppets

FrameForge Studio actually has two different character systems, and choosing the right one matters:

Character (🧍) — fully procedural. The whole body is drawn from your Character Studio choices, with a real skeletal pose for each action (arms, legs, torso lean, head tilt, blinking, and a talking mouth all driven by the action). This is the fastest way to get a usable rigged character with zero artwork.
Puppet (🎭) — for your own artwork. Add a Puppet element, then choose a PNG (ideally with a transparent or removed background) as its art. The puppet doesn't re-pose a skeleton; instead it applies secondary motion to the whole image — a bob, lean, and squash/stretch driven by the same actions (idle, walk, run, jump, talk, wave) — so a single static illustration still feels alive. For talking, you can add a second "open mouth" image and position it with the Mouth x/y/width % controls; the editor swaps it in automatically whenever the mouth-open phase of the talk cycle is active. An Intensity slider controls how strong the secondary motion is, and Anim speed controls how fast the motion cycles.

A practical tip baked into the Puppet panel itself: generate art with any AI image tool using a prompt like "2D illustrated character, full body, standing, front view, storybook digital painting style, plain white background", remove the background, and import the PNG. Make a second matching crop with the mouth open for the talking mouth-swap.

Adding Backdrops, Shapes, Bubbles, and Icons

The left panel's Story and Shapes sections let you build out a scene:

Backdrop — uploads an image and automatically scales/crops it to fill the entire 1920×1080 canvas (cover-fit), placing it behind every other element.
Image — uploads an image as a normal, freely movable element (not auto-fit to the canvas).
Bubble — a speech bubble with editable text, a configurable tail position (drag the Tail pos slider to point it at the right speaker), corner radius, and stroke.
Box / Circle — filled shapes that can also carry a text label, with fill, stroke, stroke width, and (for boxes) corner radius.
Text — plain text with adjustable font size and weight.
Arrow / Line — straight connectors with a Draw % property, so you can animate them being "drawn on" from 0% to 100% length.
Icon — an emoji rendered large as a scene element; the Quick icons row gives one-click access to common ones (computer, server, mail, tree, home, gear, chair, tea, lightning, globe, check, cross), or use the Icon button and type any emoji into the Text field.

Every element you add appears in the Layers list at the bottom of the left panel, newest on top. Click any layer to select it (and its properties open on the right); a small amber ◆ count next to a layer's name shows how many keyframes and actions it has.

Selecting, Moving, and Resizing on the Stage

Click an element on the canvas to select it (a dashed amber outline appears, with a small handle in the bottom-right corner). Then:

Drag the body of the shape to move it.
Drag the bottom-right handle to resize it (for arrows/lines this adjusts the end point instead of a bounding box).
Shift+drag anywhere on the shape to resize instead of move.
Arrow keys nudge the selected element by 4px (hold Shift for 20px).

Any drag or nudge is recorded into the timeline automatically once an element already has at least one keyframe — see the next section for exactly how that works.

How Animation Works: Keyframes

Six properties are animatable on every element: x, y, scale, opacity, rotation, and progress (used by arrows/lines for the draw-on effect). A keyframe records the value of all six at a specific time. Between two keyframes, FrameForge Studio interpolates smoothly using one of five easing curves: linear, easeIn, easeOut, easeInOut, and back (which overshoots slightly, good for "pop" effects).

There are three ways to create keyframes:

Auto-keying while dragging — once an element has at least one keyframe, any further drag, property edit, or arrow-key nudge at the current playhead position automatically records a new keyframe there. Before the first keyframe exists, edits just change the element's static properties (no animation yet).
Manual keyframe button — move the playhead to the time you want, select an element, and click ◆ Add keyframe (or press K) to lock in its current values at that exact time, even if you haven't changed anything.
Animation presets — see below; these insert a ready-made pair (or set) of keyframes for you.

Keyframes appear on the timeline as amber ◆ diamonds on that element's track. Drag a diamond left/right to retime it, click it to jump the playhead there, or select it and press Delete/Backspace to remove just that keyframe. Clear keyframes in the transport bar removes every keyframe (and action) from the selected element, freezing it at its current on-screen values.

Animation Presets for Any Element

Selecting a non-character element shows an Animate from playhead panel with one-click presets, each of which inserts the right keyframes for you starting at the current playhead time:

Fade in / Fade out — opacity 0 → 1 (or 1 → 0) over 0.6s.
Pop in — scale and opacity from 0 with a "back" overshoot ease, for a bouncy entrance.
Slide ← in / Slide → in / Slide ↑ in — enters from off-position while fading in.
Draw on (arrows/lines only) — animates the Draw % property from 0 to 1, so the line appears to be drawn.
Pulse — a quick scale-up-and-back, good for drawing attention to an icon or label.

Characters get a simplified Visibility panel with Fade in/out, Pop in, and Pulse — since their motion is normally driven by actions instead.

The Action System: Walk, Run, Sit, Jump, Talk, Wave

Characters and Puppets have a second, independent animation layer called actions. Unlike keyframes (which interpolate property values smoothly between two points in time), an action is a discrete state that starts at a given time and continues — driving a procedural motion loop — until the next action change. Action markers show up on the timeline as cyan ● dots.

For a Character, the property panel's Action dropdown lets you set the action at the current playhead directly. The Act from playhead presets do more in one click:

Walk → / ← Walk — sets the action to walk, automatically faces the character the right direction, and adds a position keyframe ~2.6s later so the character actually travels (560px) across the scene, then returns to idle.
Run → / ← Run — same idea, faster and farther (900px over 1.8s).
Sit down — switches straight to the sitting pose.
Jump — a single jump arc, then back to idle after 1.5s.
Talk — switches to the talking pose (mouth movement, hand gesture, gentle bob).
Wave 👋 — a waving arm cycle, automatically returns to idle after 1.6s.

Because walk/run already insert their own position keyframes, the editor's hint banner sums up the core technique: combine a walk action with position keyframes to make a character stroll across the scene — and the presets do exactly that for you in one click, or you can hand-place additional keyframes for a custom path.

Idle characters aren't static even when nothing is happening: a subtle breathing/idle motion (and occasional blink) renders continuously whenever the scene contains at least one Character, even while playback is paused, so the canvas never looks frozen.

The Timeline in Detail

The ruler at the top shows seconds; click or drag on it to scrub the playhead to any point.
Each element gets its own track, labeled on the left; click a track's label to select that element.
◆ amber diamonds are property keyframes; ● cyan dots are action changes.
Drag any marker to retime it; the marker re-sorts itself into the correct order automatically.
The amber vertical playhead line shows the current time across all tracks at once.
The timecode readout in the transport bar shows current time / total duration (minutes:seconds.hundredths).

Scene Duration is set in the top toolbar (1–300 seconds); changing it rescales the ruler and clamps the playhead if needed. Loop (checked by default) makes playback restart from 0 automatically when it reaches the end; unchecked, playback stops and holds on the final frame.

Layer Order and Element Management

Elements render in the order they sit in the Layers list — earlier items in the underlying list draw first (further back), later items draw on top. With an element selected, the Arrange section in its properties panel gives you:

↑ / ↓ — move the element one step toward the front or back.
Duplicate — clones the element (including all its keyframes and actions, offset 40px so it doesn't sit exactly on top of the original).
Delete — removes the element entirely (also available via the Delete/Backspace key when nothing else is focused).

Every destructive or scene-changing action — adding, moving, deleting, keyframing — is recorded into an undo history (up to 60 steps). Press the ↩ Undo button or Ctrl/Cmd+Z to step backward.

Exporting Your Work

FrameForge Studio gives you three separate outputs, depending on what you need:

⬤ Export video — renders your scene in real time (the canvas plays through from start to finish while being recorded) and downloads it as a WebM file, or MP4 where your browser's MediaRecorder implementation supports it. Because this captures the canvas live, keep the browser tab visible and avoid switching away while exporting; a progress bar and a Cancel button are shown in a modal for the duration of the render. If your browser doesn't support video capture, the Export button is disabled with an explanatory tooltip rather than failing silently.
PNG frame — grabs a single still image of whatever the playhead is currently showing and downloads it as a PNG — useful for thumbnails or a poster frame.
Save project / Open project — exports your entire scene (every element, every keyframe, every action, duration, and background color) as a JSON file you can re-open later to keep editing, or share/back up your work outside the browser.

Keyboard Shortcuts

Space — play / pause.
K — add a keyframe for the selected element at the current playhead time.
Ctrl/Cmd + Z — undo.
Delete / Backspace — delete the selected keyframe (if one is selected on the timeline) or the selected element.
Arrow keys — nudge the selected element 4px (hold Shift for 20px).

Shortcuts are disabled while typing in a text field or while the Character Studio panel is open, so they won't interfere with naming a character or editing text.

Putting It Together: A Simple Walkthrough

Click Backdrop and upload a background image for your scene.
Open Character Studio, design a character, and click Add to scene. Drag it into position.
With the character selected, click Walk → at time 0 to have it enter from the left and stop near the center.
Move the playhead to where the character should start talking, and click Talk.
Add a Bubble, type your character's line, point its tail at the character with Tail pos, and use Pop in / Fade out presets so it appears and disappears at the right moments.
Scrub through the timeline to check the timing, adjusting keyframes by dragging them.
Press Space to preview the full scene.
Click ⬤ Export video to download your finished animation.

Tips and Browser Notes

The editor's canvas, layers, and timeline panels need real screen space; for the best experience use a tablet or desktop rather than a phone.
Video export relies on each browser's MediaRecorder and canvas captureStream support — the latest Chrome, Edge, or Firefox give the most reliable results.
For Puppets, removing the background from your artwork (so it's a transparent PNG) before importing gives much cleaner results than a flat white background.
Use Save project often on longer scenes — it's a lightweight JSON file you can keep as a backup or re-open in a future session.

That covers every panel in FrameForge Studio. The best way to internalize it is to open the tool, keep this guide in a second tab, and rebuild the workflow above with your own characters and story.