13 Real Product Demos of Figma
Figma
The collaborative interface design tool for teams to build products together.
Figma is a cloud-based design platform that enables teams to brainstorm, design, and prototype in a single shared workspace. It bridges the gap between design and development with integrated handoff tools, real-time collaboration, and AI-powered workflows.
intermediateGraphic Design & Vector Art
- Real-time collaborative interface design
- Interactive prototyping and user testing
- Dev Mode for design-to-code handoff
- Scalable design systems and shared libraries
- AI-powered app and website generation
- FigJam digital whiteboarding for brainstorming
- Responsive website publishing with Figma Sites
- Advanced vector illustration and drawing tools
13 clips
29:034:45Automating Multi-Angle Prompts with Array and List NodesThe demonstration shows how to use an 'Array' node to split a single block of text (separated by asterisks) into individual camera angle prompts and then mapping them to a 'List' node for batch processing.Figma · intermediate · Graphic Design & Vector Art
0:210:17Building node-based AI workflows in Figma WeaveThe video demonstrates the Figma Weave interface where a user connects various AI model nodes and image processing blocks to create a repeatable design machine.Figma · intermediate · Graphic Design & Vector Art
7:341:48Extracting camera angles using LLM nodesThe user demonstrates resizing a 3D model view and using a ChatGPT node to describe the specific camera angle in text for use in further image generation.Figma · intermediate · Graphic Design & Vector Art- 11:501:34Swapping objects in a pre-built AI workflowThe video shows the efficiency of the node system by swapping the 'glass' prompt for a 'banana' prompt to generate a new object in the exact same camera angle using the existing pipeline.Figma · intermediate · Graphic Design & Vector Art
13:492:32Design a YouTube thumbnail with Weavy AIRory Flynn shows how he uses Weavy AI's compositor node and layers to isolate characters, remove backgrounds, and adjust camera angles to create a consistent aesthetic for a podcast thumbnail.Figma · intermediate · Graphic Design & Vector Art
1:353:15Exploring Figma Weave node-based workflowsThe creator walks through a pre-built 'illustration machine' workflow in Figma Weave, showing how nodes for prompts, image generation, and video generation (using V3) are connected to create a face-swap animation.Figma · intermediate · Graphic Design & Vector Art- 6:554:14Building a multi-model image composition in WeaveThe demonstration shows how to drag and drop nodes for different AI models (like Ideogram v3 and Imagen 4) and use a 'compositor' node to layer a generated car over a generated background.Figma · Imagen · intermediate · Graphic Design & Vector Art
- 11:152:29Generating AI video from images using Seedance and KlingThe creator shows how to use a 'crop' node to set a 16:9 aspect ratio and then connects the result to Seedance 1.5 and Kling 3 nodes to generate cinematic video rotations from a static composite image.Figma · Kling · intermediate · Graphic Design & Vector Art
2:400:31Edit images and create mockups with Higgsfield AI in FigmaThe demo shows the Higgsfield AI plugin inside Figma being used to remove backgrounds, swap product images, and generate design mockups.Figma · intermediate · Graphic Design & Vector Art
2:542:06Convert an image to video with Grok ImagineThe user shows how to connect an existing image node and a new prompt node to the Grok Imagine video model, adjusting settings like duration and aspect ratio to generate a realistic video clip.Figma · intermediate · Graphic Design & Vector Art- 9:121:38Build a consistent character workflowThe creator demonstrates a complex node setup that uses profile pictures and detailed prompts to maintain character consistency across multiple generated scenes and videos.Figma · intermediate · Graphic Design & Vector Art
34:473:06Scaling image generation with prompt arrays in Weavy AIThe demo shows how to use an LLM node to generate 10 unique prompt variations from a single idea, splitting them via an array node to produce batch outputs in Weavy AI's app mode.Figma · intermediate · Graphic Design & Vector Art- 40:222:16Batch processing product assets for BarkBoxA demonstration of a completed Weavy AI workflow that preserves product details while generating hundreds of background and lighting variations for marketing assets.Figma · intermediate · Graphic Design & Vector Art