# Premiers pas avec la 2D interactive dans Hana - Spline Academy (https://spline.design/fr/academy/tutorials/get-started-with-interactive-2d-in-hana)

> Hana est un nouveau canevas de design 2D en temps réel dans Spline qui permet de créer des scènes animées et interactives directement dans le navigateur.…

1. [Academy](https://spline.design/fr/academy)
2. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Premiers pas avec la 2D interactive dans Hana

# Premiers pas avec la 2D interactive dans Hana

HanaDébutant17 min

Hana est un nouveau canevas de design 2D en temps réel dans Spline qui permet de créer des scènes animées et interactives directement dans le navigateur. Cette vidéo d’introduction vous aide à vous familiariser avec l’interface et guide les débutants dans la création d’événements 2D interactifs.

La visite couvre l’interface, les fonctionnalités, les états, les événements et les options d’export, et montre aussi comment créer des animations et partager vos designs.

Que vous débutiez ou que vous souhaitiez élargir vos compétences, cette vidéo vous donnera les bases pour commencer à créer avec Hana.

✨ Découvrez et dupliquez les scènes de la vidéo : <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

Découvrez d’autres créateurs et projets incroyables #MadeInSpline sur <https://community.spline.design/>

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=DD8z1voLghU&t=0s)
2. [0:26Créer un fichier de design 2D](https://www.youtube.com/watch?v=DD8z1voLghU&t=26s)
3. [0:55Explorer l’interface et les fonctionnalités de Hana](https://www.youtube.com/watch?v=DD8z1voLghU&t=55s)
4. [7:47Ajouter des animations et de l’interactivité à vos designs 2D](https://www.youtube.com/watch?v=DD8z1voLghU&t=467s)
5. [9:24Créer un exemple d’interaction simple](https://www.youtube.com/watch?v=DD8z1voLghU&t=564s)
6. [13:51Exporter et intégrer votre design](https://www.youtube.com/watch?v=DD8z1voLghU&t=831s)
7. [15:58Partager vos designs et définir les droits de modification](https://www.youtube.com/watch?v=DD8z1voLghU&t=958s)

## Ressources associées

- [Hana Public DemosModèle](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)

## Présentation

- Hana
- 17 min
- Débutant

## Fait partie de

- [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/get-started-with-interactive-2d-in-hana)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Créer une interaction Follow en 2DHanaDébutant8 min](https://spline.design/fr/academy/tutorials/create-a-2d-follow-interaction)[Animer le long d’un tracé avec Hana et SplineHanaDébutant7 min](https://spline.design/fr/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)[Créer avec Hana des designs interactifs qui réagissent à votre sourisHanaDébutant6 min](https://spline.design/fr/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

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

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

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

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

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

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.