# Get Started with Interactive 2D in Hana - Hana | Everything You Need To Know - Spline Academy (https://spline.design/academy/tutorials/get-started-with-interactive-2d-in-hana)

> Hana is a new real-time 2D design canvas in Spline that allows you to create animated and interactive scenes directly in the browser. This introductory…

1. [Academy](https://spline.design/academy)
2. [Courses](https://spline.design/academy/collections)
3. [Hana | Everything You Need To Know](https://spline.design/academy/collections/hana-everything-you-need-to-know)
4. Get Started with Interactive 2D in Hana

# Get Started with Interactive 2D in Hana

Lesson 1 of 15HanaBeginner17 min

Hana is a new real-time 2D design canvas in Spline that allows you to create animated and interactive scenes directly in the browser. This introductory video is designed to help users get familiar with the interface and guide beginners through the process of creating interactive 2D events.

The walkthrough covers the interface, features, states, events, and export options, while also demonstrating how to build animations and share designs.

Whether you're just starting out or looking to expand your skills, this video will give you the foundation to start creating with Hana.

✨ Check out and duplicate the scenes from the video: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

Discover more amazing creators and projects #MadeInSpline at <https://community.spline.design/>

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=DD8z1voLghU&t=0s)
2. [0:26How to create a 2D design file](https://www.youtube.com/watch?v=DD8z1voLghU&t=26s)
3. [0:55Exploring Hana's interface and features](https://www.youtube.com/watch?v=DD8z1voLghU&t=55s)
4. [7:47How to add animations and interactivity to your 2D designs](https://www.youtube.com/watch?v=DD8z1voLghU&t=467s)
5. [9:24Creating a simple interaction example](https://www.youtube.com/watch?v=DD8z1voLghU&t=564s)
6. [13:51How to export and embed your design](https://www.youtube.com/watch?v=DD8z1voLghU&t=831s)
7. [15:58How to share your designs and set editing permissions](https://www.youtube.com/watch?v=DD8z1voLghU&t=958s)

## Related resources

- [Hana Public DemosTemplate](https://app.spline.design/academy/tutorials/get-started-with-interactive-2d-in-hana?redirect-duplicate-template-uuid=91cbe967-5529-4c64-aa6c-7872116ddb5a&is-2d-file=true)

## Overview

- Hana
- 17 min
- Beginner

## Up next

[Add Dimension to Hana Designs with the 3D Shape Effect3 minBeginner](https://spline.design/academy/collections/hana-everything-you-need-to-know/add-dimension-to-hana-designs-with-the-3d-shape-effect)[Continue](https://spline.design/academy/collections/hana-everything-you-need-to-know/add-dimension-to-hana-designs-with-the-3d-shape-effect)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.