Designing in Hana
Build real-time interactive experiences with intuitive tools that feel familiar from the start. Hana keeps the process simple, so you can focus on exploring ideas and building production-ready content.
Creating a new file in Hana
Log in or create a new Spline account (app.spline.design).
On the Home or My Files tab, locate the + Create button on the top right and press it.
On the dropdown menu, select Hana - 2D Design.
Features Overview
🖼️ Working with Frames
Frames are containers that define specific regions on the canvas. Use them to organize content, structure layouts, and build interactivity. Frames are the foundation of your design—they help keep everything in order as your project grows. You can also nest frames inside other frames for more sophisticated cases.
💠 Working with 2D Shapes
Hana offers tools to create basic 2D shapes like Rectangles and Ellipses. These shapes are perfect for building UI components, layouts, and backgrounds. With the Transform Panel, you can adjust their position, rotation, size, and corner radius, while the Fill & Stroke panel allows you to customize their color, border, and opacity.
📐 Constraints & Alignment
Constraints control how shapes behave when the frame is resized, ensuring your design adapts fluidly to different screen sizes or layouts. Alignment tools help position elements evenly, making it easier to arrange objects in relation to each other, ensuring a clean and organized layout.
➕ Boolean Modifiers
Boolean modifiers allow you to combine, subtract, or intersect shapes to create more complex designs. Use Union, Subtract, and Intersect to manipulate basic 2D shapes, or apply these modifiers to nested shapes for advanced customization, making your designs more dynamic and intricate.
🔠 Text
You can create and style text by adjusting font size, weight, alignment, and more. The Text Panel provides control over the content, spacing, and styling, allowing you to fully integrate typography into your designs.
🖋️ Vector Tool
The Vector Tool lets you create custom shapes by plotting points directly on the canvas, making it ideal for detailed graphics like icons or complex illustrations. With Vector Networks, you can connect multiple paths together, creating intricate designs by branching paths from existing edges. This gives you the flexibility to build complex and detailed shapes with ease.
🎨 Fill & Stroke
The Fill and Stroke panels let you style shapes, text, and frames by applying background colors and outlines. You can adjust color, opacity, stroke thickness, and edge appearance with just a few clicks.
Fill: Apply a color with adjustable opacity to create background effects.
Stroke: Customize the outline with color, thickness, and corner styles (sharp, round, or beveled).
These panels work across all object types: 2D shapes, text, and frames, giving you flexible design control.