# Bygg ett interaktivt tangentbord med Hana - Hana | Allt du behöver veta - Spline Academy (https://spline.design/sv/academy/tutorials/build-an-interactive-keyboard-with-hana)

> Hej! 👋

1. [Academy](https://spline.design/sv/academy)
2. [Kurser](https://spline.design/sv/academy/collections)
3. [Hana | Allt du behöver veta](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know)
4. Bygg ett interaktivt tangentbord med Hana

# Bygg ett interaktivt tangentbord med Hana

Lektion 10 av 15HanaNybörjare9 min

Hej! 👋

I den här tutorialen lär du dig att skapa ett interaktivt tangentbord som är gjort helt i Hana. Vi går igenom hur du lägger till skuggor för att ge designen djup och hur du använder tangenthändelser för att interagera med scenen med ditt riktiga tangentbord. Designen är väldigt flexibel och kan användas på många olika sätt. Nu kör vi!

Remixa demon här: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=0s)
2. [0:22Lägga till grund-framen](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=22s)
3. [0:34Skapa tangentbordets bas](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=34s)
4. [1:14Lägga till skuggor på tangentbordets bas](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=74s)
5. [1:37Skapa bokstavs- och siffertangenter](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=97s)
6. [3:31Skapa Enter-tangenten](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=211s)
7. [3:45Lägga till skuggor under siffror och bokstäver](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=225s)
8. [4:07Lägga till tangenttryckningshändelsen](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=247s)
9. [6:57Bygga skärminteraktionen](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=417s)
10. [8:50Färdig design](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=530s)
11. [9:04Avslutning](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=544s)

## Relaterade resurser

- [Interactive KeyboardMall](https://app.spline.design/academy/tutorials/build-an-interactive-keyboard-with-hana?redirect-duplicate-template-uuid=f3103f23-97e2-4ee8-807c-8c73bc5ae38a&is-2d-file=true)
- [Designing in HanaDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Översikt

- Hana
- 9 min
- Nybörjare

## Nästa

[Så animerar du längs en bana med Hana och Spline7 minNybörjare](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)[Fortsätt](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

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

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

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

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.