En aquest tema, explorarem com utilitzar les variants a Figma per crear prototips més dinàmics i flexibles. Les variants permeten agrupar diferents estats d'un component en un sol conjunt, facilitant la gestió i l'actualització dels dissenys. Això és especialment útil per a elements com botons, targetes o qualsevol component que pugui tenir múltiples estats.

Les variants són una funcionalitat de Figma que permet crear múltiples versions d'un component dins d'un sol conjunt de components. Això ajuda a mantenir els dissenys organitzats i a reduir la complexitat quan es treballa amb components que tenen diferents estats o aparences.

• Component Principal: El component original del qual es deriven les variants.
• Propietats de Variant: Atributs que defineixen les diferències entre les variants, com ara el color, la mida o l'estat.
• Conjunt de Variants: Un grup de variants que comparteixen el mateix component principal.

1. Crear un Component Principal:

   • Selecciona l'element que vols convertir en un component.
   • Fes clic amb el botó dret i selecciona "Create Component" o utilitza la drecera Cmd + Alt + K (Mac) o Ctrl + Alt + K (Windows).

2. Afegir Variants:

   • Amb el component seleccionat, fes clic a "Add Variant" al panell de propietats.
   • Això crearà una nova variant dins del mateix conjunt de components.

3. Definir Propietats de Variant:

   • A la barra lateral dreta, defineix les propietats que diferencien cada variant, com ara "State" (estat) amb valors com "Default", "Hover", "Active", etc.

4. Organitzar les Variants:

   • Arrossega i deixa anar les variants per organitzar-les dins del conjunt.
   • Utilitza noms descriptius per a cada variant per facilitar la seva identificació.

Suposem que estem creant un botó amb tres estats: per defecte, en passar el ratolí i actiu.

1. Botó per Defecte:

   • Color de fons: Blau
   • Text: "Enviar"

2. Botó Hover:

   • Color de fons: Blau clar
   • Text: "Enviar"

3. Botó Actiu:

   • Color de fons: Blau fosc
   • Text: "Enviant..."

Objectiu: Crear un conjunt de variants per a un botó de formulari amb els estats "Default", "Hover" i "Disabled".

1. Crea un component per al botó amb l'estat per defecte.
2. Afegeix variants per als estats "Hover" i "Disabled".
3. Defineix les propietats de variant per a cada estat.
4. Organitza les variants dins del conjunt.

1. Botó per Defecte:

   • Color de fons: Verd
   • Text: "Enviar"

2. Botó Hover:

   • Color de fons: Verd clar
   • Text: "Enviar"

3. Botó Disabled:

   • Color de fons: Gris
   • Text: "Enviar"

• Nomenclatura Consistent: Utilitza noms consistents per a les propietats de variant per facilitar la seva gestió.
• Proves de Prototipatge: Assegura't de provar els teus prototips per verificar que les transicions entre variants funcionen correctament.
• Actualitzacions Fàcils: Quan necessitis actualitzar un component, fes-ho al component principal per aplicar els canvis a totes les variants.

Les variants a Figma són una eina poderosa per gestionar components amb múltiples estats de manera eficient. Amb una comprensió clara de com crear i utilitzar variants, pots millorar significativament la teva capacitat per crear prototips dinàmics i flexibles. En el següent tema, explorarem tècniques d'animació avançades per portar els teus prototips al següent nivell.