# Pagdidisenyo ng 3D toggle button micro-interaction gamit ang Spline - Spline Academy (https://spline.design/fil/academy/tutorials/designing-a-3d-toggle-button-micro-interaction-with-spline)

> Sa tutorial na ito, matututunan mo kung paano gamitin ang sistema ng mga event at state para gumawa ng mga micro-interaction at bumuo ng toggle button sa 3D.

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Pagdidisenyo ng 3D toggle button micro-interaction gamit ang Spline

# Pagdidisenyo ng 3D toggle button micro-interaction gamit ang Spline

Spline 3DBaguhan14 min

Sa tutorial na ito, matututunan mo kung paano gamitin ang sistema ng mga event at state para gumawa ng mga micro-interaction at bumuo ng toggle button sa 3D.

☀️ Update: Mabilis na umuunlad ang Spline, at may bagong paraan na ngayon para makamit ang toggle effect nang hindi gumagamit ng mga invisible na object.

Silipin ang tutorial na ito para sa higit pa: <https://www.youtube.com/watch?v=lJIDSiDlhvw&t=10s&ab%5Fchannel=Spline>

☀️ Update 2: Magagamit ang bagong Components para gumawa ng mga variation ng mga 3D UI element mo.

Tutorial tungkol sa mga component dito: <https://youtu.be/VSddFnDjPUA>

## Ang matututunan mo

1. [0:00Introduksyon](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=0s)
2. [0:20Paggawa ng mga hugis ng toggle](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=20s)
3. [1:40Paggawa ng mga material](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=100s)
4. [5:45Paggawa ng mga event trigger](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=345s)
5. [8:47Paggawa ng mga state](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=527s)
6. [11:30Pagdaragdag ng maliliit na detalye](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=690s)
7. [12:20Mga huling opsyon sa export](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=740s)

## Overview

- Spline 3D
- 14 min
- Baguhan

## Mga kaugnay na tutorial

[Lahat ng tutorial](https://spline.design/fil/academy/tutorials)

[Gumawa ng Madilim na Interactive na Keyboard sa 3DSpline 3DIntermediate16 min](https://spline.design/fil/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Paano Gumawa ng mga 3D Multi-scene at Mag-import ng mga AnimationSpline 3DIntermediate18 min](https://spline.design/fil/academy/tutorials/how-to-build-3d-multi-scenes-and-import-animations)[Pagdidisenyo ng 3D website gamit ang Spline at FramerSpline 3DBaguhan14 min](https://spline.design/fil/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

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

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

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

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

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

#### Community

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

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.