En aquest tema, explorarem com utilitzar superposicions i transicions en Figma per crear prototips més dinàmics i interactius. Aquestes tècniques permeten simular interaccions més realistes i millorar l'experiència de l'usuari en els teus dissenys.

Les superposicions són elements que es mostren a sobre d'altres elements en un prototip. Són útils per simular finestres emergents, menús desplegables i altres elements que apareixen temporalment.

1. Selecciona l'element que vols utilitzar com a superposició.
2. Crea un nou marc per a la superposició si encara no ho has fet.
3. Configura la interacció:
   • Selecciona l'element que activarà la superposició.
   • A la pestanya de prototipatge, arrossega una fletxa des de l'element activador fins al marc de la superposició.
   • Tria "Open overlay" com a acció.
   • Configura les opcions de superposició, com ara la posició i si es tanca al fer clic fora.

Encara que Figma no utilitza codi, aquí tens un exemple de com es configuraria una superposició:

Les transicions són animacions que es produeixen quan es passa d'un estat a un altre en un prototip. Ajuden a guiar l'usuari i a fer que les interaccions siguin més suaus.

1. Defineix els estats inicial i final:
   • Crea dos marcs que representin els estats abans i després de la transició.
2. Configura la interacció:
   • Selecciona l'element que activarà la transició.
   • A la pestanya de prototipatge, arrossega una fletxa des de l'element activador fins al marc de destinació.
   • Tria "Navigate to" com a acció.
   • Selecciona el tipus de transició (per exemple, "Dissolve", "Move in", etc.).

Objectiu: Crear un menú desplegable utilitzant superposicions i una transició suau per a un botó de navegació.

1. Crea un marc per al menú desplegable.
2. Dissenya el menú amb les opcions que desitgis.
3. Configura la superposició:
   • Selecciona el botó de navegació.
   • Arrossega una fletxa fins al marc del menú.
   • Tria "Open overlay" i configura perquè es tanqui al fer clic fora.
4. Afegir una transició:
   • Selecciona el botó de tancament del menú.
   • Arrossega una fletxa fins al marc original.
   • Tria "Navigate to" amb una transició "Dissolve".

Assegura't que el menú es mostri correctament i que es tanqui al fer clic fora. La transició hauria de ser suau i coherent amb el disseny general.

• Error: La superposició no es tanca al fer clic fora.

  • Solució: Revisa les opcions de configuració de la superposició i assegura't que l'opció "Close when clicking outside" estigui activada.

• Error: La transició no és suau.

  • Solució: Ajusta la durada de la transició per fer-la més suau. Prova amb diferents tipus de transicions per veure quina s'adapta millor al teu disseny.

Les superposicions i transicions són eines poderoses en Figma que poden millorar significativament la interactivitat dels teus prototips. Practicar aquestes tècniques et permetrà crear experiències d'usuari més riques i atractives. En el següent tema, explorarem com utilitzar variants per a un prototipatge encara més avançat.