From a Procreate Sketch to a Full Animated Sequence in Figma Weave, by Figma Weave on YouTube. 11 min 54 s.
- Video length
- 11 min 54 s
- Time to do it
- 45 minutes
- Difficulty
- Medium
- Steps
- 10
What you need
Steps
Draw your character in Procreate, then export it as a flat PNG and import that file into a new Figma Weave workflow as an image node.
Run the sketch through Nano Banana Pro to clean it up: remove stray lines, tidy the edges and fill the colours so you have a solid illustration.
Pose the cleaned character into one strong keyframe. Use a clear side view with the arms and legs separated so the AI can read the limbs.
Feed that keyframe into Kling 3 as the start image and generate a walk cycle, letting the model animate the legs and arms in a repeating loop.
Apply a sticker look with a video-to-video style transfer, pushing the colours flat and adding a thick outline around the character.
Open the Timeline and trim the start and end of the clip so the first and last frames match, giving you a clean loop.
Remove the background from the animation to get a clean alpha channel, so the character can sit on any scene.
Build your backgrounds by connecting a Text Iterator to an LLM node, generate a batch of prompts, then unpack the results into separate nodes.
Composite each animation frame over a background with small positional shifts, and hold every frame for two frames to work on twos.
Stitch the composited frames together in the Timeline editor, set the duration, then export the finished looping animation.
Tips and common mistakes
Hold each frame for two frames (on twos) instead of one, so the motion reads as hand-made stop motion rather than smooth AI output.
Keep the keyframe pose simple and side-on. Overlapping limbs confuse the walk cycle generator.
Trim the loop before you composite, otherwise every background frame inherits a visible jump.
Nudge the character's position by a few pixels per frame so the loop does not look pinned in place.
Questions
Do I need Procreate for this?
No. Procreate is only used for the first sketch. Any drawing app works as long as you can export a flat PNG to import into Figma Weave.
What does working on twos mean?
It means showing each drawn frame for two frames of playback instead of one. That half-speed rhythm is what gives classic hand-drawn animation its look.
Why remove the background?
A clean alpha channel lets the character drop onto any generated background without a white box behind it, and keeps the loop reusable.
This guide was drafted from the video's details and general task knowledge. It has not been checked against the full video. Check the video and relevant product instructions before following a procedure. Report a correction.
