From Sketch to Game Art with Figma Weave, by Figma Weave on YouTube. 5 min 29 s.
- Video length
- 5 min 29 s
- Time to do it
- 30 minutes
- Difficulty
- Medium
- Steps
- 10
What you need
Steps
Set up one Figma file with your game UI concept, your character art and a mood board frame on the same page. Note the two device sizes you need to cover before you start generating.
Bring your Figma concept, character and mood board into Weave using the Figma node. The node keeps both tools linked so edits can travel in either direction.
Write a prompt that describes the scene, style and lighting you want, then generate several concepts and compare them side by side before picking one.
Refine the chosen concept with the Text Iterator. Change only the lighting words in your prompt, run it again, and keep the version that matches your mood board.
Test the generated design on both target devices and compare Figma and Weave side by side. Check that the UI still reads clearly over the new background.
Reuse your saved prompt and template for a second aspect ratio instead of writing a new one. Adjust the framing so the composition still works in the new shape.
Drop the generated images into Figma and place them behind your UI using image placeholders. Swap the fills until each screen sits correctly in the layout.
Send new input from Figma to Weave with the node so you can keep iterating without leaving your file. Regenerate only the parts that need work.
Generate a lifestyle mockup of the game screen, then animate it with a video model to get a short moving preview. Keep the export short and simple.
Fine-tune the result back in Figma, adjusting position and scale while keeping your crop ratio locked. Lock the frame before nudging layers so nothing shifts out of frame.
Tips and common mistakes
Keep the mood board on the same page as the UI, since the node pulls both across together.
Change one prompt variable at a time, such as lighting, so you can tell what made the difference.
Save your best prompts as templates before you move to a new aspect ratio.
Lock the crop ratio in Figma before fine-tuning so your generated image does not stretch.
Questions
Do I need to know Weave before starting?
No. The Figma node handles the handoff, so you mostly write prompts and compare results. A basic Figma workflow with frames and placeholders is enough.
Can I keep working only in Figma?
Partly. You still generate the images in Weave, but the node lets you send input and receive results without switching back and forth constantly.
How many concepts should I generate?
Generate a handful at a time and compare them together. It is faster to pick a direction from several options than to polish a single one too early.
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.
