How to Use AI Image Generation in Hana - Full Tutorial

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).

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).