# How to Use AI Image Generation in Hana - Full Tutorial Source: https://www.youtube.com/watch?v=hYZ3OF30Awo Recap page: https://rapidrecap.app/video/hYZ3OF30Awo Generated: 2025-11-12T01:44:51.653+00:00 --- ## Quick Overview The Hana AI Image Generation tool integrates directly into the design workflow, allowing users to generate, remove backgrounds, create variations, and upscale images using prompts based on existing designs or entirely new concepts, supporting multilingual prompts and offering various export options including shareable links and embedded code for interactive web elements. **Key Points:** - Hana's AI Image Generation tool is accessible via an icon on the top toolbar and opens a prompt window for generating new visuals. - The AI successfully generated a cute red panda holding a cup from a simple line art icon and a photo reference (0:00-0:07). - Users can switch between AI models including NanoBanana, Seedream, and Flux, each bringing unique stylistic qualities to the output (1:28, 1:54). - The tool supports using existing design elements (vector shapes, text) as direct visual references for AI generation, as demonstrated with a signpost design (3:11-3:24). - It features tools like background removal (4:04) and the ability to generate variations based on an initial image (3:46). - Interactive elements, like the liquid glass effect on glasses that magnifies text when hovered over, can be exported as videos or interactive embeds (5:07, 6:09). ![Screenshot at 0:04: Demonstration of using a simple line art icon of a steaming mug as a visual reference alongside a photo of a coffee cup to generate a mockup image with the icon placed on the cup.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-00-04.png) **Context:** This tutorial demonstrates the new AI image generation capabilities integrated within the Hana design software, focusing on how designers can use text prompts alongside visual references (like existing vector shapes or raster images) to quickly iterate on design concepts, create assets, and build interactive prototypes without leaving the design environment. ## Detailed Analysis The video provides a comprehensive walkthrough of the AI Image Generation feature within the Hana design tool. The process begins by accessing the AI icon on the top toolbar (0:42), which opens a prompt box. Users can input text prompts, select an AI model (NanoBanana, Seedream, or Flux), and generate images based on a blank canvas or by referencing existing elements (0:00, 1:28). Several examples showcase this integration: an icon being placed onto a coffee cup mockup (0:00), vector art being transformed into a detailed sunset scene (2:59), and a cartoon cat being rendered in hyper-realistic style (3:44). A key feature highlighted is using existing layers, such as vector shapes in a signpost design, as a compositional guide for the AI to generate a photorealistic wooden sign (3:11). Furthermore, the tutorial covers iterating on generated images by creating variations (3:46) and enhancing quality via upscaling (4:22). The tool also supports background removal (4:04) and creating complex interactive designs, such as glasses where the lenses magnify text on hover using the liquid glass effect (5:07). Finally, the export options are detailed, allowing users to share designs as images/videos, generate an embed link for live sharing, or copy embed code for web integration, with options to customize frame size, logo visibility, and page scrolling behavior (5:56). ### AI Generation Workflow - Access AI icon in toolbar (0:42) - Input text prompt and select model (1:28) - Generate image using visual references (0:04). ### Reference Material Use - Vector shapes used as composition guide for sunset scene (3:00) - Cartoon icon used to generate hyper-realistic cat variations (3:44) - Image reference used to generate a product mockup (0:00). ### Advanced Iteration Tools - Generate variations from an existing image (3:46) - One-click background removal (4:04) - Upscaling for high-resolution assets (4:22). ### Interactive Design Capabilities - Applying liquid glass effect to mimic lens magnification via mouse events (5:07) - Setting up follow interactions for text movement (5:19). ### Export Options - Export as Image/Video (5:57) - Generate shareable Embed Link or embed code (6:09) - Customize export settings like frame size and logo visibility (6:18). ![Screenshot at 0:04: Demonstration of using a simple line art icon of a steaming mug as a visual reference alongside a photo of a coffee cup to generate a mockup image with the icon placed on the cup.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-00-04.png) ![Screenshot at 0:08: Showcase of the AI generating diverse image styles, including a cyberpunk cat, demonstrating the capability to switch between stylistic models.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-00-08.png) ![Screenshot at 0:09: AI transforming a grayscale vector layout of mountains into a fully colored sunset scene, using the structure as a guide.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-00-09.png) ![Screenshot at 0:21: Finalized educational app screens featuring AI-generated characters \(Teddy the Bear and Chirpy the Parrot\) ready for use.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-00-21.png) ![Screenshot at 0:45: The prompt box showing an AI model selection dropdown, currently highlighting the 'Sparkles' recognition feature.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-00-45.png) ![Screenshot at 1:13: Demonstration of refining a generated image by providing a follow-up prompt: 'Generate a cute character holding this cup'.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-01-13.png) ![Screenshot at 3:16: Using a simple vector signpost as a guide to generate a photorealistic wooden signpost image.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-03-16.png) ![Screenshot at 4:28: Upscaling a generated image of a cartoon boy to high resolution, showing improved clarity and detail retention.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-04-28.png) ![Screenshot at 5:29: Applying a 'Liquid Glass' effect to the text behind glasses to simulate lens magnification when the cursor hovers over the lenses.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-05-29.png) ![Screenshot at 6:09: The Export dialog showing options to export as an interactive embed link, image, or video, with customizable settings for video export duration and resolution.](https://ss.rapidrecap.app/screens/hYZ3OF30Awo/00-06-09.png)