En aquest tema, aprendrem a utilitzar colors i estils a Figma per crear dissenys coherents i atractius. Els colors i estils són elements fonamentals en el disseny, ja que ajuden a establir la identitat visual i millorar l'experiència de l'usuari.

1. Paleta de Colors:

   • Una paleta de colors és una selecció de colors que s'utilitzen de manera consistent en un projecte.
   • Les paletes poden incloure colors primaris, secundaris i accents.

2. Estils de Color:

   • Els estils de color permeten aplicar colors de manera consistent a través de diferents elements del disseny.
   • Els estils es poden actualitzar fàcilment, i els canvis es reflectiran automàticament en tots els elements que utilitzen aquest estil.

3. Tipografia i Estils de Text:

   • Els estils de text defineixen la tipografia, mida, pes i altres propietats del text.
   • Com els estils de color, els estils de text permeten una gestió centralitzada i coherent de la tipografia.

1. Selecciona un Element:

   • Tria un element al teu disseny al qual vulguis aplicar un color.

2. Obre el Panell de Propietats:

   • A la part dreta de la interfície de Figma, trobaràs el panell de propietats.

3. Defineix un Color:

   • A la secció de color, selecciona el color que desitges utilitzar. Pots introduir un codi hexadecimal o utilitzar el selector de color.

4. Crea un Estil de Color:

   • Fes clic a l'icona de quatre punts al costat del color i selecciona "Crea un estil de color".
   • Assigna un nom descriptiu a l'estil, com ara "Color Primari" o "Accent".

1. Selecciona un Text:

   • Tria un bloc de text al teu disseny.

2. Obre el Panell de Propietats:

   • A la part dreta, ajusta les propietats de la tipografia com la font, mida, pes, etc.

3. Crea un Estil de Text:

   • Fes clic a l'icona de quatre punts al costat de les propietats de text i selecciona "Crea un estil de text".
   • Assigna un nom descriptiu a l'estil, com ara "Títol Principal" o "Cos de Text".

Objectiu: Crear una paleta de colors i estils de text per a un projecte de disseny d'una aplicació mòbil.

1. Defineix una Paleta de Colors:

   • Tria almenys tres colors per a la teva paleta: un color primari, un secundari i un accent.
   • Crea estils de color per a cadascun.

2. Crea Estils de Text:

   • Defineix estils per a títols, subtítols i text de cos.
   • Assegura't que els estils siguin coherents i fàcils de llegir.

• Colors:

  • Color Primari: #3498db
  • Color Secundari: #2ecc71
  • Color Accent: #e74c3c

• Estils de Text:

  • Títol Principal: Font: Arial, Mida: 24px, Pes: Bold
  • Subtítol: Font: Arial, Mida: 18px, Pes: Regular
  • Cos de Text: Font: Arial, Mida: 14px, Pes: Regular

En aquesta secció, hem après a crear i gestionar colors i estils a Figma, una habilitat essencial per mantenir la coherència visual en els nostres dissenys. A mesura que avancem, aquests conceptes seran fonamentals per a la creació de components i prototips més complexos.