En aquest tema, aprendrem a crear i gestionar components a Figma, una funcionalitat essencial per a qualsevol dissenyador que vulgui mantenir la consistència i l'eficiència en els seus projectes. Els components són elements reutilitzables que poden ser utilitzats en múltiples llocs dins del teu disseny, i qualsevol canvi realitzat en el component principal es reflectirà automàticament en totes les seves instàncies.

• Definició: Un component és un element de disseny que pots reutilitzar en diferents parts del teu projecte. Pot ser un botó, un formulari, una icona, etc.
• Avantatges:
  • Consistència: Assegura que els elements del disseny siguin uniformes.
  • Eficiència: Estalvia temps en no haver de redissenyar elements repetitius.
  • Facilitat d'actualització: Canvis en el component principal s'apliquen a totes les instàncies.

1. Selecciona l'Element: Tria l'element o grup d'elements que vols convertir en un component.
2. Crea el Component:
   • A la barra superior, fes clic a "Create Component" o utilitza la drecera de teclat Ctrl + Alt + K (Windows) o Cmd + Option + K (Mac).
3. Nom del Component: Assigna un nom descriptiu al component per facilitar la seva identificació i ús posterior.

• Instàncies de Components: Quan utilitzes un component en altres parts del teu disseny, estàs creant una instància d'aquest component.
• Actualització de Components:
  • Canvia el component principal per actualitzar totes les instàncies.
  • Pots modificar propietats específiques d'una instància sense afectar el component principal.

Objectiu: Crear un component de botó i utilitzar-lo en un disseny de pàgina.

1. Crea un Botó:

   • Dibuixa un rectangle de 150x50 píxels.
   • Afegeix text al centre que digui "Enviar".
   • Converteix-lo en un component i anomena'l "Botó Enviar".

2. Utilitza el Component:

   • Crea un nou marc que simuli una pàgina de formulari.
   • Afegeix diverses instàncies del component "Botó Enviar" en diferents parts del formulari.

3. Actualitza el Component:

   • Canvia el color de fons del component principal a blau.
   • Observa com totes les instàncies del botó es reflecteixen amb el nou color.

• No oblidis anomenar els teus components: Això facilita la seva gestió i ús.
• Evita modificar directament les instàncies: Si necessites un canvi global, fes-lo al component principal.
• Utilitza components per a elements repetitius: Això millorarà la consistència i l'eficiència del teu disseny.

Els components són una eina poderosa a Figma que t'ajuden a mantenir la consistència i l'eficiència en els teus projectes de disseny. Aprendre a crear i gestionar components et permetrà treballar de manera més intel·ligent i ràpida, assegurant que els teus dissenys siguin coherents i fàcils de mantenir. En el següent tema, explorarem com utilitzar graelles i dissenys per organitzar millor els teus elements de disseny.