En aquest tema, aprendrem a crear components interactius a Figma, una habilitat essencial per a dissenyadors que volen simular interaccions reals en els seus prototips. Els components interactius permeten als usuaris experimentar amb el disseny de manera més dinàmica i realista.

Els components interactius són elements de disseny que poden canviar d'estat en resposta a les accions de l'usuari, com ara clics, desplaçaments o altres interaccions. Això permet simular comportaments com botons que canvien de color quan es premen o menús desplegables.

• Realisme: Afegeixen una capa de realisme als prototips, ajudant a visualitzar millor el producte final.
• Eficiència: Redueixen el temps de disseny, ja que es poden reutilitzar en múltiples llocs del projecte.
• Consistència: Asseguren que els elements interactius es comportin de manera consistent en tot el disseny.

1. Dibuixa un Element: Comença per crear un element bàsic, com un botó, utilitzant les eines de formes i text.
2. Converteix-lo en Component: Selecciona l'element i fes clic a "Create Component" a la barra d'eines superior o utilitza la drecera Cmd + Alt + K (Mac) o Ctrl + Alt + K (Windows).

1. Defineix els Estats: Els estats poden incloure "normal", "hover", "pressed", etc.
2. Duplica el Component: Duplica el component per a cada estat necessari.
3. Modifica Cada Estat: Canvia l'aparença de cada duplicat per reflectir el seu estat (per exemple, canvia el color de fons per al botó "hover").

1. Selecciona el Component Principal: Fes clic al component principal.
2. Afegeix Interaccions: A la pestanya de "Prototype", arrossega una línia des del component a l'estat corresponent i selecciona el tipus d'interacció (per exemple, "On Hover" per canviar a l'estat "hover").
3. Defineix les Transicions: Escull com es farà la transició entre estats (per exemple, "Instant" o "Dissolve").

A continuació, es mostra un exemple de com es podria configurar un botó interactiu:

Objectiu: Crea un botó interactiu amb estats "normal", "hover" i "pressed".

1. Dibuixa un botó senzill.
2. Converteix-lo en un component.
3. Crea estats per "hover" i "pressed".
4. Configura les interaccions perquè el botó canviï d'estat correctament.

1. Botó Normal: Rectangle amb text "Submit".
2. Estat Hover: Canvia el color de fons a un to més clar.
3. Estat Pressed: Canvia el color de fons a un to més fosc.
4. Interaccions: Configura "On Hover" per canviar a l'estat "hover" i "On Click" per canviar a l'estat "pressed".

• No oblidis duplicar el component per a cada estat: Assegura't que cada estat tingui el seu propi component duplicat.
• Revisa les transicions: Comprova que les transicions entre estats siguin suaus i coherents.
• Utilitza noms clars per als estats: Això ajudarà a mantenir el projecte organitzat i fàcil de seguir.

Els components interactius són una eina poderosa per millorar la qualitat i la funcionalitat dels teus prototips a Figma. Amb la pràctica, podràs crear dissenys més realistes i atractius que reflecteixin millor l'experiència d'usuari final. En el següent tema, explorarem com utilitzar superposicions i transicions per enriquir encara més els teus prototips.