# Premiers pas avec la 2D interactive dans Hana - Hana | Tout ce qu’il faut savoir - 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. [Cours](https://spline.design/fr/academy/collections)
3. [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know)
4. Premiers pas avec la 2D interactive dans Hana

# Premiers pas avec la 2D interactive dans Hana

Leçon 1 sur 15HanaDé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

## À suivre

[Donnez de la dimension à vos designs Hana avec l’effet 3D Shape3 minDébutant](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/add-dimension-to-hana-designs-with-the-3d-shape-effect)[Continuer](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/add-dimension-to-hana-designs-with-the-3d-shape-effect)

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