# Erste Schritte mit interaktivem 2D in Hana - 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. [Tutorials](https://spline.design/de/academy/tutorials)
3. Erste Schritte mit interaktivem 2D in Hana

# Erste Schritte mit interaktivem 2D in Hana

HanaEinsteiger17 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

## Teil von

- [Hana | Alles, was du wissen musst](https://spline.design/de/academy/collections/hana-everything-you-need-to-know/get-started-with-interactive-2d-in-hana)

## Ähnliche Tutorials

[Alle Tutorials](https://spline.design/de/academy/tutorials)

[Eine 2D-Follow-Interaktion erstellenHanaEinsteiger8 Min.](https://spline.design/de/academy/tutorials/create-a-2d-follow-interaction)[Mit Hana und Spline entlang eines Pfads animierenHanaEinsteiger7 Min.](https://spline.design/de/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)[Interaktive Designs, die auf deine Maus reagieren, mit Hana erstellenHanaEinsteiger6 Min.](https://spline.design/de/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

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