Com utilitzar components a Figma

En els últims anys, Figma ha crescut ràpidament en popularitat i no és estrany. El programari basat en núvol d'ús gratuït és fàcilment accessible en tots els dispositius i no requereix cap pagament ni descàrrega. Des del disseny d'interfícies d'aplicacions mòbils fins a la fabricació de publicacions a les xarxes socials, amb Figma, podeu experimentar amb tot tipus de funcions de disseny gràfic i ampliar les vostres habilitats.

Per obtenir més coherència en els vostres dissenys, potser voldreu considerar l'ús de components al vostre treball. Els components són elements de la interfície d'usuari (UI) que es poden utilitzar en diversos fitxers a Figma. Sovint poden ser una addició forta als vostres dissenys i millorar-ne la qualitat general.

Tant si sou nou a Figma com si l'heu fet servir durant un temps i no esteu segur de com utilitzar els components amb èxit, estem aquí per ajudar-vos.

En aquest article, explorarem com utilitzar components Figma i com això us pot ajudar a millorar el vostre treball.

Si t'interessa saber-ne més, segueix llegint.

Com utilitzar components a Figma

Dominar l'ús dels components us pot ajudar amb l'organització i la coherència a l'hora d'utilitzar Figma. Aquests elements de la interfície d'usuari es poden utilitzar una i altra vegada en diversos projectes de disseny en els quals estigueu treballant. Es pot fer un component en una icona, un botó i més, depenent del vostre projecte.

El millor d'introduir components a la vostra experiència Figma és que us estalvia molt de temps. Qualsevol canvi que pugueu fer a un component s'actualitzarà automàticament als altres. Això pot ser especialment útil si teniu un període de temps ajustat o col·laboreu amb altres dissenyadors i voleu accelerar el vostre flux de treball.

Per començar, notareu que hi ha dues barres laterals a cada costat del llenç principal que utilitzeu. Podeu utilitzar les eines de qualsevol d'aquestes barres laterals per fer modificacions al vostre projecte.

La barra lateral del costat dret us permet accedir a qualsevol configuració del prototip i us permet ajustar o editar qualsevol propietat dels vostres components. Tanmateix, la barra lateral de l'esquerra us presenta les capes, els recursos i les pàgines utilitzades al vostre projecte. Això s'anomena panell de capes.

Els components s'han d'introduir al vostre treball bastant aviat. Us ajuden a mantenir la coherència en els vostres dissenys i us permeten accelerar el ritme al qual feu canvis als vostres projectes. Hi ha dos elements clau d'un component:

• El component mestre (o principal) (icona de diamant quàdruple)
• Un component d'instància (icona de diamant únic)

Components mestres

Abans de res, primer heu de crear el Component Mestre. Per fer-ho, seguiu els passos següents:

1. Feu clic amb el botó dret a la vostra capa, grup o marc.
   
2. Seleccioneu Crea component.
   
3. A la part esquerra de la pantalla, veureu un menú desplegable que diu Component. Feu clic a això.
   
4. A partir d'aquí, notareu un menú on podeu fer canvis al vostre component i redissenyar els estils dels projectes.
   

Una altra manera de crear un component mestre és utilitzar les dreceres:

• Opcions + Ordre + K per a Mac
• Ctrl + Alt + K per a Windows

Per descomptat, aquest mètode només funciona si feu servir Figma a un ordinador.

Components instantanis

Un component instantani és una còpia del vostre component mestre. Quan el component mestre s'edita d'alguna manera, la instància s'actualitza automàticament per coincidir amb els canvis realitzats. Si esteu creant un lloc web, aquesta eina pot ser especialment útil i us estalviarà molt de temps. Per exemple, s'han acabat els dies d'entrar manualment a tots els components per repetir les mateixes edicions. En canvi, Figma els canvia tots per a tu.

Pot ser que arribi el moment en què hàgiu creat diverses instàncies i us agradaria tornar al vostre Component Mestre perquè pugueu fer un canvi ràpid a tots els vostres components. Per accedir al vostre component principal, feu el següent:

1. Feu clic amb el botó dret a qualsevol instància.
   
2. Feu clic a Vés al component principal.
   
3. El component mestre apareixerà a la barra lateral del costat esquerre.
   

Tot i que fer components un a un és relativament senzill; podeu accelerar les coses fent-les a granel. Per fer-ho, seguiu aquests passos:

com puc convertir un wav a mp3

1. Des del vostre tauler de capes, trieu les capes on voleu crear components.
   
2. Feu clic a la icona de fletxa cap avall situada al costat de la icona del component principal dins del tauler de capes.
   
3. Seleccioneu Crea diversos components entre les opcions disponibles.
   
4. A partir d'aquí, Figma farà un component per a cada capa de fotograma.
   

Preguntes freqüents addicionals

Com anul·lo o desconnecto una instància?

Hi pot haver moments en què vulgueu fer canvis a les propietats d'una instància concreta sense canviar totes les altres. Podeu fer variacions de diferents components. A Figma, això es coneix com a anul·lació.

Un cop anul·lis una instància, els canvis fets al component mestre no l'afectaran. Per fer-ho, consulteu els passos següents:

1. Feu clic al vostre Component de la instància.

2. Al tauler Propietats a la part dreta de la pantalla, seleccioneu Component.

3. Al menú desplegable que apareix, trieu Separar instància.

Si voleu esborrar una substitució, seleccioneu el component i, a continuació, trieu Restableix la instància a la barra central superior de la pantalla.

Què faig si suprimeixo accidentalment el meu component principal?

Quan passeu tot el dia editant contingut, de vegades pot ser que accidentalment us llisqueu i suprimiu alguna cosa important, com ara el vostre component principal. No tinguis por, per restaurar-lo és tan fàcil com 1-2-3. Només cal que seguiu aquests passos bàsics per recuperar el component principal que falta:

1. Aneu a una de les instàncies del component.

2. Al tauler Propietats de la part dreta de la pantalla, seleccioneu Restaura el component principal.

3. El Component Mestre apareixerà immediatament.

Com puc afegir una descripció per als meus components?

Quan creeu els vostres components, afegir una descripció i un enllaç de documentació a cadascun us pot ajudar a navegar millor pel vostre projecte. També és útil perquè qualsevol col·laborador amb qui estiguis treballant tingui accés a notes addicionals. Per afegir una descripció, aneu al tauler Propietats a la part dreta de la pàgina i seleccioneu Afegeix una descripció.

Un cop hàgiu fet això, qualsevol espectador extern pot accedir a aquesta informació si aneu al Panell d'inspecció de la barra lateral dreta.

Com importo components a Figma?

Podeu importar tot tipus de fitxers a un component Figma. La manera més senzilla de fer-ho és des del vostre escriptori. Simplement seguiu aquests passos:

1. A Figma, obriu la pàgina on voleu importar un fitxer.

2. Dels fitxers, seleccioneu el fitxer específic que voleu utilitzar.

3. Arrossegueu i deixeu anar el fitxer seleccionat a la vostra pàgina de Figma.

4. Quan hàgiu acabat, feu clic a Fet.

El camí cap a l'èxit

Figma és una eina fantàstica per utilitzar tant si sou nou per dissenyar com si heu estat al joc durant anys. El programari ofereix un sistema d'edició amigable per a principiants on els dissenyadors poden crear contingut des de zero o utilitzar l'ajuda d'una plantilla si cal.

Comprendre com utilitzar components amb èxit a Figma us pot estalviar molt de temps quan feu un projecte de disseny. En aprendre a crear un sistema de components d'alta qualitat, podreu créixer com a dissenyador. No només això, sinó que també us pot ajudar a mantenir un flux de treball coherent al llarg del vostre viatge creatiu i permetre que els futurs col·laboradors trobin el vostre treball fàcilment.

Has provat d'utilitzar Figma per als teus projectes creatius? Com et vas trobar l'ús de components? Feu-nos saber més sobre la vostra experiència a la secció de comentaris a continuació.