# Erste Schritte mit interaktivem 2D in Hana - Hana | Alles, was du wissen musst - Spline Academy (https://spline.design/de/academy/tutorials/get-started-with-interactive-2d-in-hana)

> Hana ist ein neuer 2D-Design-Canvas in Echtzeit in Spline, mit dem du animierte und interaktive Szenen direkt im Browser erstellst. Dieses Einführungsvideo…

1. [Academy](https://spline.design/de/academy)
2. [Kurse](https://spline.design/de/academy/collections)
3. [Hana | Alles, was du wissen musst](https://spline.design/de/academy/collections/hana-everything-you-need-to-know)
4. Erste Schritte mit interaktivem 2D in Hana

# Erste Schritte mit interaktivem 2D in Hana

Lektion 1 von 15HanaEinsteiger17 Min.

Hana ist ein neuer 2D-Design-Canvas in Echtzeit in Spline, mit dem du animierte und interaktive Szenen direkt im Browser erstellst. Dieses Einführungsvideo hilft dir, dich mit der Oberfläche vertraut zu machen, und führt Einsteiger durch das Erstellen interaktiver 2D-Events.

Die Tour behandelt die Oberfläche, Funktionen, States, Events und Exportoptionen und zeigt außerdem, wie du Animationen baust und Designs teilst.

Ob du gerade erst anfängst oder deine Skills erweitern willst: Dieses Video gibt dir die Grundlage, um mit Hana loszulegen.

✨ Sieh dir die Szenen aus dem Video an und dupliziere sie: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

Entdecke weitere großartige Creator und Projekte #MadeInSpline auf <https://community.spline.design/>

## Das lernst du

1. [0:00Intro](https://www.youtube.com/watch?v=DD8z1voLghU&t=0s)
2. [0:26Eine 2D-Designdatei erstellen](https://www.youtube.com/watch?v=DD8z1voLghU&t=26s)
3. [0:55Hanas Oberfläche und Funktionen erkunden](https://www.youtube.com/watch?v=DD8z1voLghU&t=55s)
4. [7:47Deinen 2D-Designs Animationen und Interaktivität hinzufügen](https://www.youtube.com/watch?v=DD8z1voLghU&t=467s)
5. [9:24Ein einfaches Interaktionsbeispiel erstellen](https://www.youtube.com/watch?v=DD8z1voLghU&t=564s)
6. [13:51Dein Design exportieren und einbetten](https://www.youtube.com/watch?v=DD8z1voLghU&t=831s)
7. [15:58Designs teilen und Bearbeitungsrechte festlegen](https://www.youtube.com/watch?v=DD8z1voLghU&t=958s)

## Weitere Ressourcen

- [Hana Public DemosVorlage](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)

## Überblick

- Hana
- 17 Min.
- Einsteiger

## Als Nächstes

[Mehr Dimension für Hana-Designs mit dem 3D-Shape-Effekt3 Min.Einsteiger](https://spline.design/de/academy/collections/hana-everything-you-need-to-know/add-dimension-to-hana-designs-with-the-3d-shape-effect)[Weiter](https://spline.design/de/academy/collections/hana-everything-you-need-to-know/add-dimension-to-hana-designs-with-the-3d-shape-effect)

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

Der 3D- und 2D-Editor für Teams und ihre Agenten. Veröffentliche im Web, auf iOS und Android.

#### Frag die KI zu Spline

#### Produkte

- [3D-Design](https://spline.design/de/3d-design)
- [Hana](https://spline.design/de/hana)
- [Omma](https://omma.build)
- [KI-3D-Generierung](https://spline.design/de/ai-generate)
- [Spline MCP](https://spline.design/de/mcp)
- [Spline Arena](https://spline.design/de/arena)
- [Preise](https://spline.design/de/pricing)
- [Enterprise](https://spline.design/de/enterprise)

#### Runtimes

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

#### Apps

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

#### Lernen

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

#### Community

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

#### Unternehmen

- [Kunden](https://spline.design/de/customers)
- [Karriere](https://www.ycombinator.com/companies/spline/jobs)
- [Sicherheit](https://spline.design/de/security)

#### Rechtliches

- [AGB](https://spline.design/terms)
- [Datenschutz](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.